html {
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.15;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	min-width: 280px;
	background: #f0ebe8;
	color: #000;
	font-size: 16px;
	line-height: 1.15;
	padding: 0;

	&.page-template-article-v3 {
		background: #f0ebe8;
		padding-top: 70px;
	}
}
body.no-scroll {
	overflow: hidden;
}

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

a[href^='tel'] {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: 2.3em;
}

p,
ul,
ol,
dl,
hr,
table,
blockquote {
	margin-top: 0;
	margin-bottom: 1.15em;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
table:last-child,
blockquote:last-child {
	margin-bottom: 0;
}

button {
	all: unset;
	cursor: pointer;
}

/* ------------------------------------------------------------ *\
	WYSWYG
\* ------------------------------------------------------------ */

.line05em {
	line-height: 0.5em !important;
}
.line06em {
	line-height: 0.6em !important;
}
.line07em {
	line-height: 0.7em !important;
}
.line08em {
	line-height: 0.8em !important;
}
.line09em {
	line-height: 0.9em !important;
}
.line1em {
	line-height: 1em !important;
}
.line11em {
	line-height: 1.1em !important;
}
.line12em {
	line-height: 1.2em !important;
}
.line13em {
	line-height: 1.3em !important;
}
.line14em {
	line-height: 1.4em !important;
}
.line15em {
	line-height: 1.5em !important;
}
.line16em {
	line-height: 1.6em !important;
}
.line17em {
	line-height: 1.7em !important;
}
.line18em {
	line-height: 1.8em !important;
}
.line19em {
	line-height: 1.9em !important;
}
.line2em {
	line-height: 2em !important;
}
.line3em {
	line-height: 3em !important;
}
.lightweight {
	font-weight: 300 !important;

	b {
		font-weight: 700 !important;
	}

	.heavyweight {
		font-weight: 700 !important;
	}
}
.font4weight {
	font-weight: 400 !important;
}
.font5weight {
	font-weight: 500 !important;
}
.font6weight {
	font-weight: 600 !important;
}
.heavyweight {
	font-weight: 700 !important;
}
.underline {
	text-decoration: underline !important;
}
.nunito-sans {
	font-family: 'Nunito Sans' !important;
}
.reem-kufi {
	font-family: 'Reem Kufi' !important;
}
.arial {
	font-family: 'Arial', sans-serif !important;
}
.futura {
	font-family: 'futura' !important;
}
.futura-ndalt {
	font-family: 'FuturaNDAlt-demibold' !important;
}
.letsp155px {
	letter-spacing: 1.5px !important;
}
.checkmark {
	width: 23px !important;
	height: 23px !important;
}

/* ------------------------------------------------------------ *\
	Shell
\* ------------------------------------------------------------ */

.shell {
	max-width: calc(1360px + 40px * 2);
	padding-left: 40px;
	padding-right: 40px;
	margin: 0 auto;

	&.shell--fluid {
		max-width: none;
	}

	&.shell--sm {
		max-width: calc(1128px + 40px * 2);
	}
}
@media (max-width: 835px) {
	.shell {
		padding-left: 13px;
		padding-right: 13px;
	}
}

/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */

.page-template-home-v3 {
	.header-main,
	.header-mobile {
		background-color: transparent;
		box-shadow: none;

		&.header--scrolled {
			background: #f0ebe8;
			box-shadow: 0px 2px 4px 0px #00000014;
		}

		&:not(.header--scrolled) {
			.nav {
				.nav__open {
					svg {
						path {
							fill: #fff;
							filter: brightness(0) invert(1);
						}
					}
				}
			}

			.logo {
				svg {
					width: auto;
					height: 44px;
					filter: brightness(0) invert(1);
				}
			}

			.controls {
				svg {
					path {
						fill: #fff;
						filter: brightness(0) invert(1);
					}
				}

				.cart-count {
					color: #fefefe;
				}
			}

			.header__button {
				color: #fff;
			}
		}
	}
}

body {
	.header-main {
		.header__inner {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: stretch;

			.header__left,
			.header__right {
				width: 50%;
				min-height: 48px;
				display: flex;
				align-items: center;
				position: relative;

				.logo {
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(-50%, -50%);

					svg {
						width: auto;
						height: 44px;
					}
				}
			}
			.header__right {
				flex-direction: row-reverse;
			}
		}

		.header__button {
			display: block;
			color: #151412;
			font-family: Geist;
			font-size: 12px;
			font-style: normal;
			font-weight: 600;
			line-height: 110%; /* 24px */
			border: none;
			outline: none;
			text-decoration: none;
			text-transform: uppercase;

			& ~ .header__button {
				margin-left: 32px;
			}
		}
	}

	.header-main,
	.header-mobile {
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100vw;
		background: #f0ebe8;
		box-shadow: 0px 2px 4px 0px #00000014;
		padding: 16px 10px 16px 0px;
		transition: all 0.4s;

		&.header--scrolled {
			padding: 16px 10px 16px 0;
		}

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

			.nav,
			.controls {
				flex-grow: 1;
				flex-basis: 0;
			}
		}

		.header__outer {
			overflow-y: auto;
			max-height: 65vh;

			.header__menu {
				display: none;

				&.active-menu {
					display: block;

					&#menu-two {
						display: flex;
						flex-wrap: wrap;
						gap: 32px 16px;

						.header__submenu {
							width: calc((100% - 64px) / 5);
						}
					}
				}
			}
		}
	}

	.header-main {
		display: block !important;
	}
	.header-mobile {
		display: none !important;
	}

	.header__menu-inner {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}
}

@media (max-width: 835px) {
	.logo {
		svg {
			height: 34px !important;
		}
	}
}

@media (max-width: 835px) {
	body {
		.header-main {
			opacity: 0;
			pointer-events: none;
		}
		.header-mobile {
			display: block !important;
			padding: 4px 10px 4px 0px;
		}
	}
}

.wrapper {
	.header-main:has(.active-menu) {
		background-color: #f0ebe8 !important;

		.header__menu-inner {
			.header__menu-left {
				p.header__menu-title {
					color: var(--BLACK, #151412);
					/* Desktop/Label */
					font-family: 'Geist Mono';
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: 110%; /* 15.4px */
					text-transform: uppercase;
					margin-bottom: 16px;
				}

				ul {
					list-style-type: none;
					padding-left: 0;

					li {
						& ~ li {
							margin-top: 16px;
						}

						a {
							color: var(--BLACK, #151412);
							font-family: Geist;
							font-size: 24px;
							font-style: normal;
							font-weight: 600;
							line-height: 110%; /* 26.4px */
						}
					}
				}
			}

			.header__menu-right {
				padding-left: 16px;
				border-left: 1px solid rgba(0, 0, 0, 0.08);

				p.header__menu-title {
					color: var(--BLACK, #151412);
					/* Desktop/Label */
					font-family: 'Geist Mono';
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: 110%; /* 15.4px */
					text-transform: uppercase;
					margin-bottom: 16px;
				}
			}
		}

		.header__menu-inner-pages {
			display: flex;
			justify-content: space-between;
			gap: 12px;

			.header__menu-left {
				width: calc(25% - 6px);
			}

			.header__menu-right {
				width: calc(75% - 6px);
				display: flex;
				gap: 12;
				justify-content: space-between;
				align-items: stretch;

				.header__blocks {
					width: calc((100% - 24px) / 3);

					img {
						display: block;
						width: 100%;
						height: auto;
						max-height: 100%;
						margin-bottom: 16px;
					}

					p {
						a {
							color: #000;
							/* Desktop/Label Bold */
							font-family: Geist;
							font-size: 14px;
							font-style: normal;
							font-weight: 600;
							line-height: 110%; /* 15.4px */
							text-transform: uppercase;
						}
					}
				}
			}
		}

		.header__submenu {
			p.header__menu-title {
				color: var(--BLACK, #151412);
				/* Desktop/Label */
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
				margin-bottom: 16px;
			}

			ul {
				list-style-type: none;
				padding-left: 0;

				li {
					& ~ li {
						margin-top: 16px;
					}

					a {
						color: var(--BLACK, #151412);
						font-family: Geist;
						font-size: 24px;
						font-style: normal;
						font-weight: 600;
						line-height: 110%; /* 26.4px */
					}
				}
			}
		}

		.header__outer {
			border-top: 1px solid rgba(0, 0, 0, 0.08);
			padding: 40px 0;
			margin-top: 16px;
		}

		.header__button {
			color: #151412;

			&.active-button {
				position: relative;

				&::before {
					content: '';
					display: block;
					width: 100%;
					height: 1px;
					background: #151412;
					position: absolute;
					bottom: -28px;
					left: 0;
				}
			}
		}

		.logo {
			svg {
				filter: none;
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Admin Bar (if header is fixed)
\* ------------------------------------------------------------ */

body.admin-bar {
	.header-main,
	.header-mobile {
		margin-top: 32px;
	}
}

@media (width <= 782px) {
	body.admin-bar {
		.header-mobile {
			margin-top: 46px;

			&.header--scrolled {
				margin-top: 46px;
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Nav
\* ------------------------------------------------------------ */

.nav {
	&.nav-opened {
		.nav__menu {
			left: 0;
		}
	}

	.nav__open {
		display: block;
		border-radius: 32px;
		transition: all 0.4s;

		&:hover {
			background-color: #f6a7630d;
			box-shadow: 0px 0px 0px 12px #f6a7630d;
		}

		svg {
			display: block;
		}
	}

	.nav__menu {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		width: 400px;
		max-width: 400px;
		height: 100vh;
		background: #fbf7f3;
		padding: 0 32px;
		position: fixed;
		top: 0;
		bottom: 0;
		left: -400px;
		z-index: 10;
		transition: left 0.5s;

		.nav__menu-head {
			position: relative;
			width: 100%;
			padding: 24px 0 114px;

			.nav-logo {
				position: absolute;
				left: 50%;
				top: 10px;
				svg {
					display: block;
					height: 58px;
					width: auto;
					transform: translateX(-50%);
				}
			}

			.nav__close {
				display: block;
				border-radius: 32px;
				margin-left: auto;
				transition: all 0.4s;

				svg {
					path {
						fill: #000;
					}
				}

				&:hover {
					background-color: #f6a7630d;
					box-shadow: 0px 0px 0px 12px #f6a7630d;
				}

				svg {
					display: block;
				}
			}
		}
	}
}

.nav-scrim {
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
	background: #00000099;
	transition: all 0.4s;
}

/* ------------------------------------------------------------ *\
	Admin Bar
\* ------------------------------------------------------------ */

body.admin-bar {
	.nav .nav__menu {
		margin-top: 32px;
		height: calc(100vh - 32px);
	}
}

@media (width <= 782px) {
	body.admin-bar {
		.nav .nav__menu {
			margin-top: 46px;
			height: calc(100vh - 46px);
		}
	}
}

/* ------------------------------------------------------------ *\
	Menu
\* ------------------------------------------------------------ */

.menu-main {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-grow: 1;
	width: 100%;
	list-style-type: none;
	padding: 0;
	margin: 0;

	.menu-item {
		display: block;

		&.current-menu-item {
			a {
				border-left: 2px solid #f2f2f2;
				padding-left: 38px;
			}
		}

		a {
			color: #271b10;
			font-family: Geist;
			font-size: 32px;
			font-style: normal;
			font-weight: 400;
			line-height: 121%; /* 38.72px */
			display: block;
			padding: 0 8px;
			transition: all 0.4s;

			&:hover {
				background-color: #ffffff1a;
			}
			&:active {
				background-color: #ffffff33;
			}
		}

		.sub-menu {
			padding-left: 8px;

			a {
				display: inline-block;
				padding: 0;
				color: #271b10;
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 146%; /* 26.28px */
				margin-bottom: 16px;

				&::after {
					content: ' →';
					display: inline-block;
					padding-left: 12px;
					color: #271b10;
					font-family: Geist;
					font-size: 18px;
					font-style: normal;
					font-weight: 400;
					line-height: 146%; /* 26.28px */
				}
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Controls
\* ------------------------------------------------------------ */

.controls {
	display: flex;
	justify-content: end;
	align-items: center;
	list-style-type: none;
	gap: 16px;
	padding: 0;

	li {
		position: relative;

		a {
			display: block;
			border-radius: 32px;
			transition: all 0.4s;

			&:hover {
				background-color: #f6a7630d;
				box-shadow: 0px 0px 0px 12px #f6a7630d;
			}

			svg {
				display: block;
			}

			.cart-count {
				position: absolute;
				top: -3px;
				right: -3px;
				color: #000;
				font-family: Geist;
				font-size: 12px;
				font-style: normal;
				font-weight: 600;
				line-height: 110%; /* 13.2px */
				text-transform: uppercase;
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Footer
\* ------------------------------------------------------------ */

.footer {
	background-color: #9c4f21;
	padding: 40px 0;

	.footer__head {
		padding-bottom: 40px;
		border-bottom: solid 1px #ffffff4d;
		margin-bottom: 40px;

		.contacts {
			list-style-type: none;
			display: flex;
			justify-content: space-between;
			align-items: start;
			flex-wrap: nowrap;
			padding: 0;

			li {
				position: relative;
				color: #fefefe;
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
				padding-left: 40px;

				&:last-child {
					max-width: 278px;
				}

				a {
					display: block;
					opacity: 0.5;
					transition: all 0.4s;

					&:hover {
						opacity: 0.8;
					}
				}

				svg {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
	}

	.footer__body {
		padding-bottom: 40px;
		border-bottom: solid 1px #ffffff4d;
		margin-bottom: 40px;

		.footer__content {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: start;
		}

		.footer__left {
			width: 50%;

			h3 {
				max-width: 330px;
				color: #fefefe;
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 600;
				line-height: 110%; /* 26.4px */
				text-transform: uppercase;
				margin-bottom: 20px;
			}

			.newsletter-form {
				max-width: 330px;

				.newsletter__row {
					position: relative;
					border-bottom: 1px solid #fefefe;

					.newsletter__input {
						width: 90%;
						background: transparent;
						padding: 15px 24px 15px 0;
						border: none;
						outline: none;
						color: #ffffff99;
						font-family: 'Geist Mono';
						font-size: 14px;
						font-style: normal;
						font-weight: 400;
						line-height: 110%; /* 15.4px */
						text-transform: uppercase;

						&::placeholder {
							color: #ffffff99;
						}
					}

					.newsletter__submit {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}

		.footer__right {
			width: 50%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: start;
			gap: 48px;

			.footer_right_1,
			.footer_right_2,
			.footer_right_3 {
				padding-left: 20px;
				border-left: 1px solid rgba(255, 255, 255, 0.3);
				width: calc((100% - 96px) / 3);

				summary {
					color: #fefefe;
					font-family: 'Geist Mono';
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: 110%; /* 15.4px */
					text-transform: uppercase;
					margin-bottom: 24px;

					&::marker {
						content: none;
					}
				}

				.content {
					a {
						display: block;
						color: #fff;
						font-family: Geist;
						font-size: 12px;
						font-style: normal;
						font-weight: 600;
						line-height: 110%; /* 13.2px */
						text-transform: uppercase;
						transition: all 0.4s;

						&:hover {
							opacity: 0.8;
						}
					}

					a ~ a {
						margin-top: 12px;
					}
				}

				@media (min-width: 1024px) {
					details summary {
						cursor: default;
						pointer-events: none;
					}

					details .content {
						display: block !important;
					}
				}
			}
		}
	}

	.footer__foot {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: end;
		gap: 40px;

		p {
			max-width: 1247px;
			color: #fefefe;
			font-family: Geist;
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: 132%; /* 15.84px */
			margin-bottom: 0;
		}

		.scroll-up {
			display: block;
		}
	}
}

@media (max-width: 835px) {
	.footer {
		padding: 32px 0;

		.footer__head {
			.contacts {
				flex-direction: column;
				gap: 12px;
			}
		}

		.footer__content {
			flex-direction: column;
			gap: 24px;

			.footer__left,
			.footer__right {
				width: 100%;
			}

			.footer__right {
				flex-direction: column;

				.footer_right_1,
				.footer_right_2,
				.footer_right_3 {
					width: 100%;
					padding-left: 0;
					border-left: none;
					border-top: 1px solid rgba(255, 255, 255, 0.08);
					padding-top: 24px;

					summary {
						opacity: 0.6;
					}
				}
			}
		}

		.footer__foot {
			.scroll-up {
				display: none;
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Intro
\* ------------------------------------------------------------ */

.intro {
	position: relative;

	.intro__inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;

		.intro__head {
			width: 50%;
			padding-bottom: 40%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;

			anchor-name: --menu-button;
		}

		.intro__body {
			width: 50%;
			padding-bottom: 40%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
	}

	.intro__container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: end;

		.shell {
			width: 100%;
		}

		.intro__content {
			width: 50%;
			padding: 40px 0;
			margin: 0;

			h3 {
				color: #fefefe;
				font-family: Geist;
				font-size: 28px;
				font-style: normal;
				font-weight: 500;
				line-height: 130%; /* 36.4px */
				margin-bottom: 24px;
			}

			p {
				max-width: 506px;
				color: #fefefe;
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%; /* 23.76px */
				margin-bottom: 0;

				& ~ p {
					margin-top: 12px;
				}
			}

			.intro__action {
				margin-top: 24px;
			}
		}
	}
}

@media (max-width: 835px) {
	.intro {
		.intro__inner {
			flex-wrap: wrap;

			.intro__head,
			.intro__body {
				width: 100%;
				padding-bottom: 105%;
			}
		}

		.intro__container {
			.intro__inner {
				display: flex;
				flex-direction: column-reverse;

				.intro__content {
					width: 100%;
					padding: 34px 0;

					h3 {
						font-size: 24px;
						font-style: normal;
						font-weight: 500;
						line-height: 112%;
						margin-bottom: 12px;
					}

					p {
						font-size: 15px;
						font-style: normal;
						font-weight: 400;
						line-height: 132%; /* 19.8px */
					}
				}
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Btn
\* ------------------------------------------------------------ */

.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fefefe;
	width: fit-content;
	gap: 8px;
	white-space: nowrap;
	color: #151412;
	font-family: Geist;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 110%;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border-radius: 2px;
	padding: 14px 20px;
	outline: none;
	cursor: pointer;
	transition: all 0.4s;

	&:hover {
		background: #f2f2f2;
	}

	&:active {
		background: #fefefe;
	}

	&.btn--product {
		background: transparent;
		width: 100%;
		color: #151412;
		text-align: center;
		font-family: Geist;
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 130%; /* 18.2px */
		text-transform: uppercase;
		text-align: center;
		border-radius: 2px;
		border: 1px solid rgba(21, 20, 18, 0.16);
	}
}

/* ------------------------------------------------------------ *\
	Featured
\* ------------------------------------------------------------ */

.featured {
	padding: 132px 0;

	&.featured--alt {
		padding: 120px 0;
	}

	.featured__head {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;

		h3 {
			max-width: 570px;
			color: #151412;
			font-family: Geist;
			font-size: 24px;
			font-style: normal;
			font-weight: 600;
			line-height: 110%; /* 26.4px */
			text-transform: uppercase;
			margin-bottom: 0;
		}

		a {
			display: block;
			color: #151412;
			text-align: center;
			font-family: Geist;
			font-size: 12px;
			font-style: normal;
			font-weight: 600;
			line-height: 110%; /* 13.2px */
			text-transform: uppercase;
			border-bottom: 1px solid #151412;
			text-decoration: none;
			transition: all 0.4s;

			&:hover {
				opacity: 0.8;
			}
		}
	}
}

.products {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 40px 12px;
}
.product {
	display: flex;
	flex-direction: column;
	width: calc(25% - 9px);

	.product__head {
		position: relative;
		overflow: hidden;
		border-radius: 4px;
		margin-bottom: 16px;

		.product__image {
			display: block;
			text-decoration: none;
			padding-bottom: 114%;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			transition: all 0.4s ease;
			background-color: #f4ede5;

			&:hover {
				transform: scale(1.06);
			}
		}

		.product__meta {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 24px;
			left: 0;
			right: 0;
			padding: 0 24px;

			.stars {
				display: flex;
				flex-wrap: nowrap;
				justify-content: start;
				align-items: center;
				gap: 2px;

				svg {
					width: 16px;
					height: 15px;
				}
			}
			.tag {
				color: #000;
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
			}
		}
	}

	.product__body {
		flex-grow: 1;

		.procuct__name {
			color: #000;
			font-family: Geist;
			font-size: 20px;
			font-style: normal;
			font-weight: 600;
			line-height: 120%; /* 24px */
			text-decoration: none;
			margin-bottom: 8px;
		}

		.product__info {
			color: #151412;
			font-family: Geist;
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: 132%; /* 23.76px */
			margin-bottom: 0;
			opacity: 0.6;
		}
	}

	.product__foot {
		margin-top: 32px;
	}
}

@media (max-width: 835px) {
	.featured {
		padding: 80px 0;

		&.featured--alt {
			padding: 48px 0;
			h3 {
				color: var(--BLACK, #151412);
				text-align: center;

				/* Mobile/Header M */
				font-family: Geist;
				font-size: 20px;
				font-style: normal;
				font-weight: 600;
				line-height: 100%; /* 20px */
				text-transform: uppercase;
			}
		}

		.featured__head {
			flex-direction: column;
			align-items: center;

			h3 {
				width: 100%;
				text-align: center;
				margin-bottom: 16px;
			}

			a {
				font-size: 11px;
			}
		}
	}

	.product {
		.product__body {
			.procuct__name {
			}
		}
	}
}

@media (max-width: 835px) {
	.products {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding-bottom: 40px; /* Extra space for dots */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Hide scrollbar (Firefox) */
	}

	.products::-webkit-scrollbar {
		display: none; /* Hide scrollbar (Chrome/Safari) */
	}

	.product {
		width: calc(82% - 10px);
		flex: 0 0 calc(82% - 10px);
		scroll-snap-align: start;
	}

	/* Pagination Dots */
	.products-pagination {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: -10px;
		position: relative;
		z-index: 2;
	}

	.products-pagination .dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #ddd;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.products-pagination .dot.active {
		background-color: #000;
		transform: scale(1.4);
	}
}

.demo {
	position: relative;

	.demo__image {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 50%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		z-index: -1;
	}

	.demo__inner {
		display: flex;
		justify-content: center;
		align-items: stretch;
	}

	.demo__content {
		display: flex;
		flex-direction: column;
		justify-content: end;
		width: 50%;
		padding: 40px 40px 40px 0;

		p {
			max-width: 500px;
			color: #fefefe;
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 500;
			line-height: 130%; /* 36.4px */
			margin-bottom: 32px;
		}
	}

	.demo__product {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 114px 40px;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);

		.product {
			width: auto;
			max-width: 330px;
		}
	}
}

@media (max-width: 835px) {
	.demo {
		flex-direction: column;

		.demo__inner {
			flex-direction: column;
		}

		.demo__product,
		.demo__content,
		.demo__image {
			width: 100%;
		}

		.demo__content {
			min-height: 480px;
			anchor-name: --demo-image;

			p {
				color: var(--White, #fefefe);
				/* Mobile/Header L */
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 500;
				line-height: 112%; /* 26.88px */
				margin-bottom: 24px;
			}
		}

		.demo__product {
			padding: 40px 0;

			.product {
				width: 100% !important;
				flex: 0 0 100% !important;

				.procuct__name {
					a {
						font-size: 18px;
					}

					p.product__info {
						font-size: 15px;
					}
				}
			}
		}
	}
	.demo__image {
		position-anchor: --demo-image;
		top: anchor(top) !important;
		bottom: anchor(bottom) !important;
	}
}

.categories-section {
	padding: 132px 0;

	.categories__inner {
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		.categories__left,
		.categories__right {
			width: 50%;
		}

		.categories__left {
			p {
				max-width: 215px;
				color: #151412;
				font-family: Geist;
				font-size: 28px;
				font-style: normal;
				font-weight: 500;
				line-height: 130%; /* 36.4px */
			}
		}

		.categories__right {
			ul {
				padding: 0;
				list-style-type: none;

				li {
					padding-bottom: 16px;
					border-bottom: 1px solid #00000025;

					& ~ li {
						margin-top: 16px;
					}
				}

				a {
					color: #151412;
					font-family: Geist;
					font-size: 28px;
					font-style: normal;
					font-weight: 500;
					line-height: 130%; /* 36.4px */
					text-decoration: none;
					transition: all 0.4s;

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}
	}
}

@media (max-width: 835px) {
	.categories-section {
		padding: 80px 0;

		.categories__inner {
			flex-direction: column;

			.categories__left,
			.categories__right {
				width: 100%;
			}

			.categories__left {
				p {
					max-width: none;
					font-size: 24px;
					margin-bottom: 40px;
				}
			}

			.categories__right {
				ul {
					a {
						font-size: 24px;
					}
				}
			}
		}
	}
}

.videos {
	padding-bottom: 132px;

	.videos__head {
		margin-bottom: 56px;

		h3 {
			color: #151412;
			text-align: center;
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 500;
			line-height: 130%; /* 36.4px */
			margin-bottom: 8px;
		}

		p {
			color: rgba(21, 20, 18, 0.6);
			text-align: center;
			font-family: Geist;
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: 132%; /* 23.76px */
			margin-bottom: 0;
		}
	}

	.videos__body {
		display: flex;
		justify-content: start;
		gap: 16px;

		.video-wrapper {
			overflow: hidden;
			width: calc(25% - 12px);
			border-radius: 4px;
		}
	}
}

@media (max-width: 835px) {
	.videos {
		padding-bottom: 65px;

		.videos__head {
			margin-bottom: 24px;

			h3 {
				font-size: 24px;
				margin-bottom: 8px;
			}

			p {
				font-size: 15px;
			}
		}
	}

	.videos__body {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding-bottom: 50px; /* Space for pagination dots */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
	}

	.videos__body::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Edge */
	}

	.video-wrapper {
		width: calc(82% - 10px); /* Shows ~1.2 products (you can adjust) */
		flex: 0 0 calc(82% - 10px);
		scroll-snap-align: start;
	}

	/* Pagination Dots */
	.videos-pagination {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: -20px;
		position: relative;
		z-index: 2;
	}

	.videos-pagination .dot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #ddd;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.videos-pagination .dot.active {
		background-color: #000;
		transform: scale(1.5);
	}
}

.testimonials {
	position: relative;
	min-height: 900px;
	margin-bottom: 132px;

	.testimonials__inner {
		display: flex;
		justify-content: space-between;
		align-items: start;

		.testimonials__right,
		.testimonials__left {
			width: 50%;
			padding-right: 24px;
		}
	}

	.testimonial__image {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 50%;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.testimonials__title,
	.testimonials__list {
		max-width: 578px;
	}

	.testimonials__title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 56px;

		p {
			width: 185px;
			min-width: 185px;
			color: #151412;
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 500;
			line-height: 130%; /* 36.4px */
			margin-bottom: 0;

			&:last-child {
				width: 321px;
				font-size: 18px;
				font-weight: 400;
				line-height: 132%; /* 23.76px */
			}
		}
	}

	.testimonial {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #0000001f;
		padding-top: 24px;

		& ~ .testimonial {
			margin-top: 56px;
		}

		.testimonial__meta {
			span {
				display: block;
				color: #151412;
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
			}
		}

		.testimonial__content {
			width: 321px;

			.stars {
				svg {
					height: 10px;
					width: auto;
				}
			}

			.testimonial__title {
				color: #151412;
				font-family: Geist;
				font-size: 20px;
				font-style: normal;
				font-weight: 600;
				line-height: 120%; /* 24px */
				margin-top: 12px;
				margin-bottom: 24px;
			}

			p {
				color: rgba(28, 26, 23, 0.6);
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%; /* 23.76px */
				margin-bottom: 0;
			}
		}
	}
}

@media (max-width: 835px) {
	.testimonials {
		margin-bottom: 24px;
		min-height: 0;

		.testimonial__image {
			display: none;
		}

		.testimonials__inner {
			width: 100%;

			.testimonials__title {
				flex-direction: column;
				align-items: start;
				margin-top: 4px;
				margin-bottom: 25px;

				p {
					max-width: none;
					width: 100%;
					font-size: 24px;
					margin-bottom: 14px;

					&:last-child {
						font-size: 15px;
					}
				}

				.testimonials__list {
					max-width: none;
				}
			}

			.testimonials__left {
				width: 100%;
				padding-right: 0;

				.testimonials__title,
				.testimonials__list {
					max-width: none;
				}
			}

			.testimonials__right {
				display: none;
			}
		}

		.testimonial {
			padding-top: 8px;
			flex-direction: column-reverse;

			.testimonial__meta {
				margin-top: 24px;
			}

			.testimonial__content {
				width: 100%;

				p {
					color: rgba(28, 26, 23, 0.6);
					/* Mobile/Paragraphe */
					font-family: Geist;
					font-size: 15px;
					font-style: normal;
					font-weight: 400;
					line-height: 132%; /* 19.8px */
				}
			}
		}
	}
}

.posts {
	margin: 132px 0;

	&.posts--alt {
		padding: 48px 0;
		border: 1px solid rgba(0, 0, 0, 0.12);
		margin: 0 0;

		.posts__head {
			h3 {
				text-align: left;
			}
		}
	}

	.posts__head {
		margin-bottom: 32px;

		h3 {
			color: #151412;
			text-align: center;
			font-family: Geist;
			font-size: 24px;
			font-style: normal;
			font-weight: 600;
			line-height: 110%; /* 26.4px */
			text-transform: uppercase;
			margin-bottom: 0;
		}
	}

	.posts__body {
		display: flex;
		justify-content: start;
		gap: 16px;
	}
}

.post {
	width: calc(25% - 12px);

	.post__head {
		overflow: hidden;
		border-radius: 4px;
		margin-bottom: 16px;

		img {
			width: 100%;
			height: auto;
		}
	}

	.post__body {
		.post__tags {
			margin-bottom: 12px;

			a {
				color: #151412;
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;

				&:hover {
					opacity: 0.8;
				}
			}
		}

		.post__title {
			a {
				color: #151412;
				font-family: Geist;
				font-size: 20px;
				font-style: normal;
				font-weight: 600;
				line-height: 120%; /* 24px */

				&:hover {
					opacity: 0.8;
				}
			}
		}
	}
}

@media (max-width: 835px) {
	.posts {
		margin: 24px 0;

		&.posts--alt {
			h3 {
				color: var(--BLACK, #151412);
				text-align: center;

				/* Mobile/Header M */
				font-family: Geist;
				font-size: 20px;
				font-style: normal;
				font-weight: 600;
				line-height: 100%; /* 20px */
				text-transform: uppercase;
				text-align: center !important;
			}
		}
	}
	.posts__body {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding-bottom: 50px; /* Space for pagination dots */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
	}

	.posts__body::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Edge */
	}

	.post {
		width: calc(82% - 10px); /* Nice 1 + partial next view */
		flex: 0 0 calc(82% - 10px);
		scroll-snap-align: start;
	}

	/* Pagination Dots */
	.posts-pagination {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: -20px;
		position: relative;
		z-index: 2;
	}

	.posts-pagination .dot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #ddd;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.posts-pagination .dot.active {
		background-color: #000;
		transform: scale(1.5);
	}
}

.questions {
	background-color: #e7ded9;
	padding: 80px 0;

	.questions__head {
		margin-bottom: 40px;

		h3 {
			color: #151412;
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 500;
			line-height: 130%; /* 36.4px */
			margin-bottom: 0;
		}
	}
}

@media (max-width: 835px) {
	.questions {
		padding: 32px 0;

		.questions__head {
			h3 {
				color: var(--BLACK, #151412);

				/* Mobile/Header L */
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 500;
				line-height: 112%; /* 26.88px */
				margin-bottom: 32px;
			}
		}
	}
}

.faqs {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid rgba(0, 0, 0, 0.16);

	& ~ .faqs {
		margin-top: 40px;
	}

	.faqs__head {
		color: #151412;
		font-family: 'Geist Mono';
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 110%; /* 15.4px */
		text-transform: uppercase;
		padding-top: 16px;
	}

	.faqs__body {
		width: 757px;
	}
}

.faq {
	summary {
		position: relative;
		display: block;
		color: #151412;
		font-family: Geist;
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 132%; /* 23.76px */
		padding-top: 8px;
		padding-bottom: 4px;
		border-bottom: 1px solid #00000029;
		margin-bottom: 0;

		svg {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.content {
		color: rgba(28, 26, 23, 0.6);
		font-family: Geist;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 132%; /* 23.76px */
		padding-bottom: 6px;
		transition: all 0.4s;
	}

	details[open] summary {
		border-bottom: none;
	}
	details[open] .content {
		border-bottom: 1px solid #00000029;
	}
}

@media (max-width: 835px) {
	.faqs {
		border-top: none;
		flex-direction: column;

		.faqs__body {
			width: 100%;
		}
	}

	.faq {
		summary {
			padding-right: 20px;
		}
	}
}

.main-wrapper {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 94px 0 120px;

	.main-content {
		width: 673px;
		min-width: 0;

		h1 {
			color: #151412;
			font-family: Geist;
			font-size: 48px;
			font-style: normal;
			font-weight: 600;
			line-height: 110%; /* 52.8px */
			margin-bottom: 40px;
		}

		h2 {
			color: #000;
			font-family: Geist;
			font-size: 32px;
			font-style: normal;
			font-weight: 500;
			line-height: 130%; /* 36.4px */
			margin-bottom: 24px;
		}

		h3 {
			color: #000;
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 500;
			line-height: 130%; /* 36.4px */
			margin-bottom: 24px;
		}

		h4 {
			color: #000;
			font-family: Geist;
			font-size: 12px;
			font-style: normal;
			font-weight: 600;
			line-height: 110%; /* 13.2px */
			text-transform: uppercase;
			margin-bottom: 24px;
		}

		p {
			color: #000;
			font-family: Geist;
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: 132%; /* 23.76px */
		}

		p.meta {
			max-width: 310px;
			color: #151412;
			font-family: 'Geist Mono';
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 110%; /* 15.4px */
			text-transform: uppercase;
			margin-bottom: 0;
		}

		p.subtitle {
			color: #000;
			font-family: Geist;
			font-size: 20px;
			font-style: normal;
			font-weight: 600;
			line-height: 120%; /* 24px */
			margin-bottom: 80px;
		}

		.image-block {
			margin: 80px 0;

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

		.highlight-block,
		.form-block,
		.text-block {
			margin: 80px 0;
		}

		.highlight-block {
			border-radius: 12px;
			background: #e7ded9;
			padding: 40px;

			h4 {
				color: #151412;
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 600;
				line-height: 110%; /* 26.4px */
				text-transform: uppercase;
				margin-bottom: 40px;
			}

			p {
				color: rgba(0, 0, 0, 0.6);
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%;
				padding-bottom: 0;

				& ~ p {
					margin-top: 32px;
				}

				strong,
				b {
					color: #000;
					font-weight: 700;
				}
			}
		}

		.form-block {
			border-radius: 12px;
			background: #9c4f21;
			padding: 40px;

			label {
				display: block;
				color: #fefefe;
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 600;
				line-height: 110%; /* 26.4px */
				text-transform: uppercase;
				margin-bottom: 20px;
			}

			.dl__row {
				position: relative;
				border-bottom: 1px solid #fefefe;

				.dl-input {
					width: 95%;
					background: transparent;
					padding: 15px 24px 15px 0;
					border: none;
					outline: none;
					color: #ffffff99;
					font-family: 'Geist Mono';
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: 110%; /* 15.4px */
					text-transform: uppercase;

					&::placeholder {
						color: #ffffff99;
					}
				}

				.dl-submit {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

	.sidebar {
		width: 359px;
		flex-shrink: 0;
		position: relative;
		padding-left: 16px;
		border-left: 1px solid #00000014;

		.sidebar__title {
			display: none;
		}

		h3 {
			color: #151412;
			font-family: 'Geist Mono';
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 110%; /* 15.4px */
			text-transform: uppercase;
			margin-bottom: 24px;
		}
	}

	.content-wrapper {
		position: sticky;
		top: 120px;
		transition: all 0.3s ease;
	}
}

@media (max-width: 835px) {
	.main-wrapper {
		flex-direction: column;
		padding: 88px 0 120px;

		.main-content {
			width: 100%;

			p.meta {
				max-width: none;
				color: var(--BLACK, #151412);
				font-family: 'Geist Mono';
				font-size: 11px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 12.1px */
				text-transform: uppercase;
				margin-bottom: 18px;
			}

			p.subtitle {
				color: #000;
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 600;
				line-height: 120%; /* 21.6px */
				margin-bottom: 65px;
			}

			h1 {
				color: var(--BLACK, #151412);
				font-family: Geist;
				font-size: 36px;
				font-style: normal;
				font-weight: 600;
				line-height: 110%; /* 39.6px */
			}

			h2 {
				color: #000;
				font-family: Geist;
				font-size: 30px;
				font-style: normal;
				font-weight: 500;
				line-height: 112%; /* 26.88px */
				margin-bottom: 24px;
			}

			h3 {
				color: #000;
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 500;
				line-height: 112%; /* 26.88px */
				margin-bottom: 24px;
			}

			h4 {
				color: #000;
				/* Mobile/Label Bold */
				font-family: Geist;
				font-size: 11px;
				font-style: normal;
				font-weight: 600;
				line-height: 110%; /* 12.1px */
				text-transform: uppercase;
				margin-bottom: 24px;
			}

			p {
				color: #000;
				font-family: Geist;
				font-size: 15px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%; /* 19.8px */
				margin-bottom: 10px;
			}

			.image-block {
				margin: 65px 0;
				border-radius: 4px;
				overflow: hidden;
			}

			.highlight-block,
			.form-block,
			.text-block {
				margin: 65px 0;
			}

			.form-block {
				padding: 24px;

				label {
					color: var(--White, #fefefe);

					/* Mobile/Header M */
					font-family: Geist;
					font-size: 20px;
					font-style: normal;
					font-weight: 600;
					line-height: 100%; /* 20px */
					text-transform: uppercase;
				}

				.dl-input {
					width: 90% !important;

					&::placeholder {
						color: #ffffff99;
					}
				}
			}

			.highlight-block {
				padding: 24px;

				h4 {
					color: var(--BLACK, #151412);

					/* Mobile/Header M */
					font-family: Geist;
					font-size: 20px;
					font-style: normal;
					font-weight: 600;
					line-height: 100%; /* 20px */
					text-transform: uppercase;
				}

				p {
					color: rgba(0, 0, 0, 0.6);

					/* Mobile/Paragraphe */
					font-family: Geist;
					font-size: 15px;
					font-style: normal;
					font-weight: 400;
					line-height: 132%;
				}
			}
		}

		.sidebar {
			width: auto;

			.sidebar__title {
				display: block;
				color: var(--BLACK, #151412);

				/* Mobile/Label Mono */
				font-family: 'Geist Mono';
				font-size: 11px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 12.1px */
				text-transform: uppercase;
				text-align: center;
			}

			.content-wrapper {
				position: static;

				h3 {
					display: none;
				}
			}
		}
	}
}

@media (max-width: 835px) {
	.content-wrapper {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding-bottom: 50px; /* Space for pagination dots */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
	}

	.content-wrapper::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Edge */
	}

	.product-info {
		width: calc(82% - 10px); /* Good balance for product cards */
		flex: 0 0 calc(82% - 10px);
		scroll-snap-align: start;

		flex-direction: column !important;

		& ~ .product-info {
			margin-top: 0 !important;
		}

		.product__head {
			width: 100% !important;
			padding-bottom: 80% !important;
		}

		.product__body {
			width: 100% !important;
		}
	}

	/* Pagination Dots */
	.sidebar-pagination {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: -20px;
		position: relative;
		z-index: 2;
	}

	.sidebar-pagination .dot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #ddd;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.sidebar-pagination .dot.active {
		background-color: #000;
		transform: scale(1.5);
	}
}

.product-info {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 16px;

	& ~ .product-info {
		margin-top: 40px;
	}

	.product__head {
		width: 154px;
		padding: 16px 12px 48% 12px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #f4ede5;
	}

	.product__body {
		flex-grow: 1;
		width: 173px;

		h4 {
			color: #000;
			font-family: Geist;
			font-size: 20px;
			font-style: normal;
			font-weight: 600;
			line-height: 120%; /* 24px */
			margin-bottom: 8px;
		}

		p {
			color: #151412;
			font-family: Geist;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 132%; /* 21.12px */
			margin-bottom: 16px;
		}
	}
}

.banner {
	padding: 165px 0 10px;

	.banner__inner {
		overflow: hidden;
		border-radius: 12px;
		display: flex;
		align-items: stretch;

		.banner__text {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 50%;
			padding: 40px;
			background: #e7ded9;

			p.note {
				flex-grow: 1;
				color: var(--BLACK, #151412);
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
			}

			h3 {
				color: var(--BLACK, #151412);
				font-family: Geist;
				font-size: 28px;
				font-style: normal;
				font-weight: 500;
				line-height: 130%; /* 36.4px */
				margin-bottom: 16px;
			}

			p {
				max-width: 446px;
				color: var(--BLACK, #151412);
				/* Desktop/Paragraphe */
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%; /* 23.76px */
				margin-bottom: 16px;
			}

			.banner__action {
				margin-top: 32px;

				.btn {
					background-color: #151412;
					color: #fefefe;
				}
			}
		}

		.banner__image {
			width: 50%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			padding-bottom: 38%;
		}
	}
}

@media (max-width: 835px) {
	.banner {
		padding: 40px 10px;

		.banner__inner {
			flex-direction: column-reverse;

			.banner__image,
			.banner__text {
				width: 100%;
			}

			.banner__text {
				padding: 10px;

				p {
					font-size: 15px;
				}

				h3 {
					font-size: 24px;
				}
			}
			.banner__image {
				padding-bottom: 75%;
			}
		}
	}
}