@font-face {
	font-family: TT Fors;
	src: url('./fonts/TTFors-Bold.woff2')format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: TT Fors;
	src: url('./fonts/TTFors-Black.woff2')format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: TT Fors;
	src: url('./fonts/TTFors-Medium.woff2')format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Caveat;
	src: url('./fonts/Caveat-Regular.woff2')format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}



:root {
	--bg: #f1e6dd;
	--text: #432d29;
	--muted: #54250f;
	--orange: #ff5c00;
	--green: #175e54
}

*,
:before,
:after {
	box-sizing: border-box
}

body {
	background: var(--bg);
	margin: 0
}

.shokoxsmf-main {
	color: var(--text);
	flex-direction: column;
	gap: 64px;
	padding: 24px 0 40px;
	font-family: TT Fors, sans-serif;
	display: flex
}

.container {
	z-index: 2;
	width: min(1120px, 90%);
	margin: 0 auto;
	position: relative
}

.section {
	border-radius: 50px;
	margin: 0 32px;
	position: relative;
	overflow: hidden
}

.section--hero {
	background: linear-gradient(135deg, #c4e1dc 0%, #dff0ef 58%, #c4e3e0 100%);
	min-height: 644px;
	padding: 64px 0;
	display: flex;
	align-items: center;
}

.section--hero:after {
	content: "";
	background: url('./img/hero-bg.webp') bottom/cover no-repeat;
	position: absolute;
	inset: 0
}

.hero__brand {
	align-items: center;
	gap: 16px;
	margin-bottom: 64px;
	display: flex;
	max-width: 600px;
}

.hero__brand>span {
	font-size: 24px;
	font-weight: 700
}

.brand__item--shoko {
	width: 290px;
}

.brand__item--smf {
	width: 347px
}

.hero__content {
	z-index: 3;
	grid-template-columns: 3fr 2fr;
	gap: 64px;
	display: grid;
	position: relative
}

.hero__text {
	flex-direction: column;
	gap: 16px;
	display: flex
}

.hero__title,
.section__title {
	text-transform: uppercase;
	margin: 0;
	font-weight: bold;
	line-height: 1.05
}

.hero__title {
	color: var(--green);
	font-size: 40px
}

.section__title {
	color: var(--orange);
	font-size: 40px
}

.hero__description {
	padding-bottom: 32px;
}

.hero__description,
.section__lead {
	color: var(--muted);
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4
}

.hero__button {
	width: 300px;
	margin-top: 8px
}

.cta-link {
	text-transform: uppercase;
	letter-spacing: .03em;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	display: inline-flex
}

.cta-link--primary {
	color: #fff;
	background: var(--orange)
}

.cup-card {
	width: 100%;
	height: 100%;
	position: relative
}

.cup-card--hero:before {
	content: "";
	z-index: 2;
	background: url('./img/hero-cap.webp') 50%/contain no-repeat;
	width: 600px;
	height: 600px;
	position: absolute;
	top: -70%;
	right: -50%
}

.cup-card--hero:after {
	content: "";
	z-index: 1;
	background: url('./img/hero-img.webp') 50%/contain no-repeat;
	width: 500px;
	height: 100%;
	position: absolute;
	bottom: -50%;
	left: -30%
}

.section--light,
.section--collection,
.section--cups,
.section--menu {
	padding: 56px 0
}

.section--light {
	background: #faf8f2
}

.section--collection {
	background: linear-gradient(#fff4d8, #fee7b3)
}

.section--cups {
	background: linear-gradient(#e4f4ce, #cfeeb4)
}

.section--menu {
	background: linear-gradient(#f8f0e5, #f9dfc7)
}

.universe__content {
	flex-direction: column;
	align-items: center;
	gap: 32px;
	display: flex;
	position: relative
}

.universe__brand {
	margin-bottom: 0
}

.universe__text {
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	display: flex
}

.section__lead--center {
	max-width: 50%
}

.universe {
	height: 633px;
	display: flex;
	align-items: center;
}

.universe-img-1:before,
.universe-img-2:before {
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	width: 400px;
	height: 400px;
	position: absolute;
	top: 0
}

.universe-img-1:before {
	background-image: url('./img/universe-img-1.webp?2');
	left: -5%
}

.universe-img-2:before {
	background-image: url('./img/universe-img-2.webp?2');
	right: -8%
}

.collection {
	background: linear-gradient(135deg, #c4e1dc 0%, #dff0ef 58%, #c4e3e0 100%)
}

.collection:after {
	content: "";
	background: url('./img/collection-bg.webp') bottom/cover no-repeat;
	position: absolute;
	inset: 0
}

.collection__content,
.limited-cups__content {
	z-index: 3;
	flex-direction: column;
	gap: 16px;
	display: flex;
	position: relative
}


.collection__lead,
.limited-cups__lead {
	max-width: 50%
}

.limited-cups {
	background: linear-gradient(135deg, #c4e1dc 0%, #dff0ef 58%, #c4e3e0 100%)
}

.limited-cups:after {
	content: "";
	background: url('./img/limited-cups-bg.webp') bottom/cover no-repeat;
	position: absolute;
	inset: 0
}

.limited-cups__content {
	min-height: 624px
}

.limited-cups__grid {
	grid-template-columns: repeat(3, 1fr);
	justify-content: end;
	align-items: end;
	gap: 16px;
	display: grid;
	position: relative
}

.limited-cup-card {
	min-height: 500px;
	position: relative
}

.limited-cup-card:before {
	content: "";
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: contain;
	width: 200%;
	height: 200%;
	position: absolute;
	bottom: 0;
	left: 0
}

.cup-card--1:before {
	background-image: url('./img/cups-1.webp');
	bottom: -28px
}

.cup-card--1::after,
.cup-card--2::after,
.cup-card--3::after {
	width: 100%;
	height: 100%;
	position: absolute;
	font-size: 16px;
	top: 100%;
	left: 40%;
}

.cup-card--1::after {
	content: '200мл'
}

.cup-card--2::after {
	content: '300мл'
}

.cup-card--3::after {
	content: '500мл'
}

.cup-card--2:before {
	background-image: url('./img/cups-2.webp')
}

.cup-card--3:before {
	background-image: url('./img/cups-3.webp');
	width: 130%;
	height: 130%
}

.kids-menu {
	padding: 64px 0;
}

.kids-menu__content {
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 24px;
	display: grid
}

.kids-menu__text {
	flex-direction: column;
	gap: 16px;
	display: flex
}

.kids-menu__title,
.catalog__title {
	max-width: 66%;
	font-size: 38px
}

.kids-menu__lead-last {
	margin-bottom: 24px
}

.kids-menu__decor-wrap {
	justify-content: flex-start;
	display: flex
}

.kids-menu__decor {
	object-fit: contain;
	width: auto;
	height: 96px
}

.kids-menu__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.kids-menu__item {
	object-fit: contain;
	width: 100%;
	height: 100%;
	transition: transform .3s, filter .3s;
	transform: translateY(0)scale(1)
}

.kids-menu__item:hover {
	filter: drop-shadow(0 10px 20px #cfc5c233);
	transform: translateY(-6px)scale(1.05)
}


.catalog {
	padding: 0 0 64px 0;
}

.catalog__title {
	color: #720E18;
}

.catalog__content {
	display: flex;
	flex-direction: column;
	gap: 64px;
	align-content: center;
	justify-content: center;
}

.catalog__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 32px;
}




@media (width<=900px) {

	.shokoxsmf-main {
		gap: 32px;
	}

	.section {
		border-radius: 24px;
		margin: 0 12px
	}

	.hero__content,
	.kids-menu__content {
		grid-template-columns: 1fr
	}

	.hero__title,
	.section__title,
	.catalog__title,
	.kids-menu__title {
		font-size: 32px;
		text-align: center;
	}

	.section__lead--center,
	.collection__lead,
	.limited-cups__lead {
		max-width: 100%
	}

	.collection__content,
	.limited-cups__content {
		min-height: auto
	}



	.limited-cups__grid {
		grid-template-columns: 1fr;
		gap: 8px
	}

	.hero__description,
	.collection__lead,
	.limited-cups__lead,
	.section__lead {
		text-align: center;
	}

	.brand__item--shoko {
		width: 120px;
	}

	.brand__item--smf {
		width: 120px;
	}

	.hero__brand>span {
		font-size: 12px;
	}

	.universe {
		height: auto;
	}

	.section--light {
		padding: 32px 0;
	}

	.universe-img-1,
	.universe-img-2 {
		display: flex;
		position: relative;
		height: 200px;
		width: 100%;
	}

	.universe-img-1:before {
		left: 0;
		bottom: 0;
	}

	.universe-img-2:before {
		left: 43%;
		top: -50%;
	}

	.universe-img-1:before {
		width: 300px;
		height: 300px;
	}

	.universe-img-2:before {
		width: 250px;
		height: 250px;
	}

	.kids-menu {
		padding: 32px 0;
	}

	.kids-menu__title {
		max-width: 100%;
	}

	.limited-cup-card {
		min-height: 100px;
		height: 100%;
	}

	.limited-cup-card:before {}


	.cup-card--1 {
		order: 3
	}

	.cup-card--2 {
		order: 2
	}

	.cup-card--3 {
		order: 1;
		min-height: 225px;
	}

	.cup-card--1:before {
		left: 0;
		bottom: 0;
	}

	.cup-card--2:before {
		left: -50%;
	}

	.cup-card--3:before {
		left: 20%;
		height: 100%;
	}

	.cup-card--1::after {
		left: 70%;
	}

	.cup-card--2::after {
		left: 20%;
	}

	.cup-card--3::after {
		left: 70%;
	}

	.catalog__title {
		max-width: 100%;
	}


	.limited-cups:after {

		background: url('./img/limited-cups-bg.webp') left/cover no-repeat;

	}

}


.collection__content {
	z-index: 3;
	flex-direction: column;
	gap: 16px;
	display: flex;
	position: relative
}

.collection__lead {
	max-width: 70%
}

.collection__items {
	box-sizing: border-box;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	padding: 4% 0 0;
	display: grid;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

@media screen and (min-width:1440px) {
	.collection__items {
		width: 1300px;
	}
}

@media screen and (min-width:1800px) {
	.collection__items {
		width: 1800px;
	}
}

.collection__item {
	z-index: 1;
	aspect-ratio: 178/377;
	will-change: transform;
	width: 100%;
	min-width: 0;
	height: auto;
	transition: transform .3s, filter .3s;
	position: relative;
	transform: translateY(0)scale(1)
}

.collection__item span {
	content: "";
	font-family: 'CorsicaLX';
	font-size: 14px;
	line-height: 1.15;
	position: absolute
}

/* @media (hover:hover) and (pointer:fine) {
	.collection__item:hover {
		filter: drop-shadow(0 .6vw 1.2vw #cfc5c233);
		transform: translateY(-.35vw)scale(1.05)
	}
} */

.collection__item:after,
.collection__item:before {
	content: "";
	pointer-events: none;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute
}

.collection__item:after {
	z-index: 2;
	width: 100%;
	height: 100%;
	inset: 0
}

.collection--1 {
	margin-top: 0
}

.collection--1 span {
	top: 8.98876%;
	left: 49.9326%
}

.collection--1:after {
	background-image: url(./img/coll-1.png)
}

.collection--1:before {
	z-index: 3;
	background-image: url(./img/coll-img-1.png);
	width: 120%;
	height: 120%;
	top: -4.49438%;
	left: -30.9663%
}

.collection--2 {
	margin-top: 32px
}

.collection--2 span {
	top: 8.98876%;
	left: 46.9326%
}

.collection--2:after {
	background-image: url(./img/coll-2.png)
}

.collection--2:before {
	z-index: 3;
	background-image: url(./img/coll-img-2.png);
	width: 120%;
	height: 120%;
	top: -8.98876%;
	left: -32.9663%
}

.collection--3 {
	margin-top: -32px
}

.collection--3 span {
	top: 8.98876%;
	left: 57.4157%
}

.collection--3:after {
	background-image: url(./img/coll-3.png)
}

.collection--3:before {
	z-index: 3;
	background-image: url(./img/coll-img-3.png);
	width: 120%;
	height: 120%;
	top: -8.98876%;
	left: -23.9775%
}

.collection--4 {
	margin-top: 16px
}

.collection--4 span {
	top: 8.98876%;
	left: 13.4831%
}

.collection--4:after {
	background-image: url(./img/coll-4.png)
}

.collection--4:before {
	z-index: 3;
	background-image: url(./img/coll-img-4.png);
	width: 110%;
	height: 110%;
	top: -4.49438%;
	left: 0%
}

.collection--5 {
	margin-top: 48px
}

.collection--5 span {
	top: 8.98876%;
	left: 17.9775%
}

.collection--5:after {
	background-image: url(./img/coll-5.png)
}

.collection--5:before {
	z-index: 3;
	background-image: url(./img/coll-img-5.png);
	width: 120%;
	height: 120%;
	top: -7.49438%;
	left: -7%;
}

.collection--6 {
	margin-top: -32px
}

.collection--6 span {
	top: 8.98876%;
	left: 13.4831%
}

.collection--6:after {
	background-image: url(./img/coll-6.png)
}

.collection--6:before {
	z-index: 3;
	background-image: url(./img/coll-img-6.png);
	width: 120%;
	height: 120%;
	top: -8.98876%;
	left: 0%
}

.collection--7 {
	margin-top: 16px
}

.collection--7 span {
	top: 8.98876%;
	left: 17.9775%
}

.collection--7:after {
	background-image: url(./img/coll-7.png)
}

.collection--7:before {
	z-index: 3;
	background-image: url(./img/coll-img-7.png);
	width: 120%;
	height: 120%;
	top: -10%;
	left: 0%
}

.collection--8 {
	margin-top: -8px
}

.collection--8 span {
	top: 8.98876%;
	left: 13.4831%
}

.collection--8:after {
	background-image: url(./img/coll-8.png)
}

.collection--8:before {
	z-index: 3;
	background-image: url(./img/coll-img-8.png);
	width: 120%;
	height: 120%;
	top: -8.98876%;
	left: 0%
}

.collection--9 {
	margin-top: 16px
}

.collection--9 span {
	top: 8.98876%;
	left: 19.9663%
}

.collection--9:after {
	background-image: url(./img/coll-9.png)
}

.collection--9:before {
	z-index: 3;
	background-image: url(./img/coll-img-9.png);
	width: 100%;
	height: 100%;
	top: -3%;
	left: 5%
}

@media (width<=1200px) {
	.collection__items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1%;
		padding-top: 2%;
		position: static;
		top: auto;
		left: auto;
		transform: none
	}

	.collection__content {
		min-height: auto
	}
}

@media (width<=900px) {
	.collection__lead {
		max-width: 100%
	}

	.collection__content {
		min-height: auto
	}

	.collection__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		padding-top: 1.5%;
		position: static;
		transform: none
	}

	.collection__item {
		aspect-ratio: 200/377
	}

	.collection__item span {
		font-size: 12px;
	}

	.cup-card {
		height: 300px;
	}

	.cup-card--hero:before {
		width: 400px;
		height: 400px;
		top: -20%;
		left: 16%;
	}

	.cup-card--hero:after {
		width: 300px;
		left: 0;
		bottom: -30%;
	}

	.hero__text {
		align-items: center;
	}
}

@media (width<=600px) {
	.collection__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5%;
		padding-top: 32px;
		row-gap: 32px;
	}

	.collection--1,
	.collection--2,
	.collection--3,
	.collection--4,
	.collection--5,
	.collection--6,
	.collection--7,
	.collection--8,
	.collection--9 {
		margin-top: 0;
	}


	.collection--8:before {
		width: 110%;
		height: 110%;
	}

	.collection--5:before {
		width: 110%;
		height: 110%;
		top: -4.49438%;
		left: 0%;
	}

}

@media (width<=480px) {
	.collection__item {
		aspect-ratio: 220/377
	}
}

.collection-grid {
	height: auto;
	position: relative;
}

@media screen and (max-width: 600px) {
	.collection-grid {
		min-height: clamp(200px, 70vw, 360px);
	}
}


@media screen and (max-width: 1023px) {
	.collection-grid {
		height: auto;
		min-height: clamp(220px, 55vw, 420px);
	}
}



@media screen and (min-width: 1024px) and (max-width: 1439px) {
	.collection-grid {
		height: auto;
		min-height: 380px;
		max-height: 70vh;
		/* или clamp(360px, 50vh, 560px) */
	}
}

@media screen and (min-width: 1440px) {
	.collection-grid {
		height: clamp(380px, 42vh, 560px);
	}
}

@media screen and (min-width: 1800px) {
	.collection-grid {
		height: clamp(420px, 48vh, 640px);
	}
}

@media screen and (min-width: 1024px) {
	.hero__button-mobile {
		display: none !important;
	}
}

@media screen and (max-width: 1023px) {
	.hero__button-desc {
		display: none !important;
	}
}