@charset "UTF-8";

.p-main {
	--main-color: #9ec317;
	--sub-color: #3b4717;
	--accent-color: #b58954;
	--feature-color: #0b76a0;
}

.p-border-y-main {
	border-color: var(--main-color);
}

.p-border-b-main {
	border-color: var(--main-color);
}

.p-text-accent {
	color: var(--accent-color);
}

.p-text-accent--main {
	--fill-color: var(--main-color);
	--marker-color: var(--main-color);
	color: var(--main-color)
}

.p-text-accent--feature {
	--fill-color: var(--feature-color);
	--marker-color: var(--feature-color);
	color: var(--feature-color)
}

.p-text-accent--green {
	--fill-color: #d5e483;
	--marker-color: #d5e483;
	color: #339933;
}

.p-text-accent--orange {
	--fill-color: #f9cb9e;
	--marker-color: #f9cb9e;
	color: #e96232;
}

.p-text-accent--blue {
	--fill-color: #c3dcef;
	--marker-color: #c3dcef;
	color: #005675;
}

.p-text-accent--fill {
	color: unset;
	background: var(--fill-color);
}

.p-text-accent--fill {
	background: var(--fill-color);
	border: 1px solid var(--fill-color);
	color: #fff;
}

.p-text-accent--outline {
	background: #fff;
	border: 1px solid var(--fill-color);
	color: var(--fill-color);
}

.p-text-accent--round {
	border-radius: 100vmax;
}

.p-text-accent--marker {
	color: unset;
	text-decoration: underline;
	text-decoration-thickness: 0.5em;
	text-decoration-color: var(--marker-color);
	text-underline-offset: -0.2em;
	text-decoration-skip-ink: none; 
}

.p-bg-blue {
	background: var(--feature-color);
}

.p-bg-blur {
	position: relative;
	z-index: 0;
}

.p-bg-blur::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	margin: auto;
	height: 100%;
	aspect-ratio: 1 / 1;
	background-image: radial-gradient(rgba(158, 195, 23, 0.2), rgba(255, 255, 255, 0) 60%);
	content: "";
}

.p-bg-blur--left::before {
	top: -40%;
	right: unset;
	margin: 0;
}

.p-bg-blur--right::before {
	top: -40%;
	left: unset;
	margin: 0;
}

@media screen and (max-width: 767px) {
	.p-bg-blur--left::before {
		left: -15%;
	}

	.p-bg-blur--right::before {
		right: -15%;
	}
}
@media screen and (min-width: 768px) {
	.p-bg-blur--left::before {
		left: -15%;
	}

	.p-bg-blur--right::before {
		right: -15%;
	}
}
.p-button {
	position: relative;
	display: flex;
	column-gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.5em;
	text-align: center;
	cursor: pointer;
	transition: all 0.4s ease;
}

.p-button--primary {
	--primary-button-color: var(--accent-color);
	--primary-button-hover-color: #fff;
	--primary-button-hover-text-color: var(--accent-color);
	color: #fff;
	background: var(--primary-button-color);
	border: 1px solid var(--primary-button-color);
}

@media (any-hover: hover) {
	.p-button--primary:hover {
		color: var(--primary-button-hover-text-color);
		background: var(--primary-button-hover-color);
	}
}

.p-button--secondary {
	--secondary-button-color: #000;
	--secondary-button-hover-color: #fff;
	--secondary-button-hover-text-color: #000;
	color: var(--secondary-button-color);
	background: #fff;
	border: 1px solid var(--secondary-button-color);
}

@media (any-hover: hover) {
	.p-button--secondary:hover {
		color: var(--secondary-button-hover-text-color);
		background: var(--secondary-button-hover-color);
	}
}

.p-button--round {
	border-radius: 100vmax;
}

.p-button--arrow-b::after {
	font-family: "nextIcon";
	font-size: 1em;
	content: "\e91a";
}

.p-button--arrow-r::after {
	font-family: "nextIcon";
	font-size: 1em;
	content: "\e91c";
}

.p-button--cart {
	--primary-button-color: #a42020;
	--primary-button-hover-color: #fff;
	--primary-button-hover-text-color: #a42020;
}

.p-button--cart::before {
	font-family: "nextIcon";
	content: '\e935';
}

.p-mv {
}

@media screen and (max-width: 767px) {
	.p-mv {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		aspect-ratio: 750 / 1180;
		background: url("/client_info/HARMONICK/view/userweb/ext/catalog-gift/halmek/images/first_view_sp.jpg") center / cover no-repeat;
	}
}

@media screen and (min-width: 768px) {
	.p-mv {
		padding-block: 2rem;
		aspect-ratio: 1920 / 640;
		background: url("/client_info/HARMONICK/view/userweb/ext/catalog-gift/halmek/images/first_view.jpg") center / cover no-repeat;
	}
}

.p-mv-list {
	display: flex;
}

.p-mv-list__item {
	color: #3b4717;
	background: #fff;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.p-mv-list {
		flex-direction: column;
		row-gap: 1rem;
		width: 70%;
		margin-inline: auto;
	}

	.p-mv-list__item {
		padding-block: 0.5rem;
		border-radius: 100vmax;
		box-shadow: 6px 6px 0 var(--main-color);
	}
}

@media screen and (min-width: 768px) {
	.p-mv-list {
		column-gap: 1rem;
		justify-content: center;
	}

	.p-mv-list__item {
		aspect-ratio: 1 / 1;
		display: grid;
		place-content: center;
		width: 12rem;
		padding: 2rem 1rem;
		border-radius: 50%;
		box-shadow: 8px 8px 0 var(--main-color);
	}
}

.p-sec {
	display: flex;
	flex-direction: column;
	margin-inline: auto;
}

.p-sec--ivory {
	background: #f9f6ed;
}

.p-sec--lime {
	background: #f8fbef;
}

@media screen and (max-width: 767px) {
	.p-sec {
		padding: 2rem 1rem;
		row-gap: 2rem;
	}
}

@media screen and (min-width: 768px) {
	.p-sec {
		row-gap: 2rem;
		width: 960px;
		max-width: 100%;
		padding: 2rem 3rem;
	}

	.p-sec--wide {
		width: 100%;
		padding-inline: calc(50% - 480px);
	}
}

.p-feature-sec__headline {
	background: var(--feature-color);
	color: #fff;
	text-align: center;
}

.p-feature-sec__body {
	display: flex;
	flex-direction: column;
	background: #f9f6ed;
}

@media screen and (max-width: 767px) {
	.p-feature-sec__headline {
		padding-block: 1rem;
		font-size: 1.25rem;
	}
	.p-feature-sec__body {
		padding: 2rem 1rem;
		row-gap: 2rem;
	}
}

@media screen and (min-width: 768px) {
	.p-feature-sec__headline {
		padding-block: 2rem;
		font-size: 2rem;
	}

	.p-feature-sec__body {
		row-gap: 4rem;
		padding: 4rem  calc(50% - 480px);
	}
}

.p-feature {
	display: flex;
}

@media screen and (max-width: 767px) {
	.p-feature {
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
	}

	.p-feature__headline {
		padding-left: 1rem;
		border-left: 8px solid var(--feature-color);
	}

	.p-feature__text {
		display: contents;
	}
}

@media screen and (min-width: 768px) {
	.p-feature {
		justify-content: space-between;
		align-items: center;
		column-gap: 4rem;
	}

	.p-feature--reverse {
		flex-direction: row-reverse;
	}

	.p-feature__text {
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
		flex: 1;
		padding-block: 1rem;
		padding-left: 1.25rem;
		border-left: 12px solid var(--feature-color);
	}

	.p-feature__text--reverse {
		padding-left: 0;
		border-left: none;
		padding-right: 1.25rem;
		border-right: 12px solid var(--feature-color);
	}
}

.p-scene {
	position: relative;
	z-index: 0;
	background: var(--scene-color);
}

.p-scene--green {
	--scene-color: #e2f0c2;
}

.p-scene--orange {
	--scene-color: #fdebda;
}

.p-scene--blue {
	--scene-color: #e7f1f9;
}

@media screen and (max-width: 767px) {
	.p-scene {
		padding: 2rem 1rem 4rem;
		clip-path: polygon(100% 0, 100% 95%, 50% 100%, 0 95%, 0 0);
	}
}

@media screen and (min-width: 768px) {
	.p-scene {
		padding: 4rem calc(50% - 480px) 8rem;
		clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
	}
}

.p-scene-list {
	display: flex;
	flex-direction: column;
	row-gap: 0.25rem;
}

.p-scene-list__item::before {
	content: "-";
}

@media screen and (max-width: 767px) {
	.p-pick-up-splide__pagination {
		position: static !important;
		margin-top: 2rem !important;
		column-gap: 2rem;
	}
	
	.p-pick-up-splide__pagination li {
		flex: 0 !important;
		width: fit-content;
	}

	.p-pick-up-splide__pagination__page::after {
		width: unset !important;
		height: 0.75rem !important;
		margin-inline: auto;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		transform: scaleY(100%) !important;
	}
}

.weight {
	font-weight: 500;
}