@charset "UTF-8";

.p-main {
	--text-color: #3c3c3c;
	--base-color: #f6f2f0;
	--main-color: #efe9e4;
	--accent-color: #ad2d33;

	color: var(--text-color);
}

.p-mv {
	position: relative;
	background: var(--main-color);
}

.p-mv__heading {
	border-bottom: 2px dashed var(--accent-color);
}

.p-mv__button {
	display: flex;
	column-gap: 0.5rem;
	align-items: center;
	justify-content: center;
	line-height: 2.8;
	color: #fff;
	background: var(--accent-color);
	border: 1px solid var(--accent-color);
	border-radius: 100vmax;
	transition: all 0.4s ease;
}

.p-mv__button::after {
	font-family: nextIcon;
}

.p-mv__img {
	height: auto;
}

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

	.p-mv__button {
		order: 1;
	}

	.p-mv__button::after {
		content: "\e91a";
	}

	.p-mv__img {
		position: relative;
		left: -2rem;
		width: 100vw;
		max-width: none;
	}
}

@media screen and (min-width: 768px) {
	.p-mv {
		aspect-ratio: 240 / 91;
		padding: 4rem calc(50% - 480px);
	}

	.p-mv__img {
		position: absolute;
		inset-block: 0;
		right: 0;
		margin-block: auto;
	}

	.p-mv__button::after {
		content: "\e91c";
	}
}

.p-marker {
	text-decoration: underline;
	text-decoration-thickness: 0.75em;
	text-decoration-color: var(--main-color);
	text-underline-offset: -0.4em;
	text-decoration-skip-ink: none;
}

.p-marker--white {
	text-decoration-color: #fff;
}

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

.p-heading-separator {
	display: flex;
	align-items: center;
}

.p-heading-separator::before,
.p-heading-separator::after {
	flex: 1;
	content: "";
	border-top: 1px dashed;
}

@media screen and (max-width: 767px) {
	.p-heading-separator {
		column-gap: 2rem;
	}
}

@media screen and (min-width: 768px) {
	.p-heading-separator {
		column-gap: 4rem;
	}
}

.p-bg {
	background: #fff;
}

.p-bg--accent {
	background: var(--base-color);
}

.p-variation-list {
	display: grid;
	gap: 1rem;
}

.p-variation-list__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
}

@media screen and (max-width: 767px) {
	.p-variation-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 768px) {
	.p-variation-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.p-howto-list {
	display: grid;
}

.p-howto-list__item {
	position: relative;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	align-items: center;
}

.p-howto-list__expansion {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	aspect-ratio: 1 / 1;
	padding: 0.75rem;
	line-height: 1;
	color: currentcolor;
	background: #dcdcdc;
	border: none;
	border-radius: 50%;
}

@media screen and (max-width: 767px) {
	.p-howto-list {
		grid-template-columns: repeat(1, 1fr);
		gap: 2rem;
	}

	.p-howto-list__item {
		gap: 1rem;
	}
}

@media screen and (min-width: 768px) {
	.p-howto-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

.p-product-list {
	display: grid;
}

.p-product-list__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	row-gap: 1rem;
}

.p-product-list__thumb {
	transition: all .4s ease;
}

.p-product-list__button {
	display: flex;
	column-gap: 0.25rem;
	align-items: center;
	justify-content: center;
	line-height: 2.8;
	transition: all 0.4s ease;
}

.p-product-list__button::after {
	font-family: nextIcon;
	content: "\e91c";
}

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

.p-product-list__button--secondary {
	color: var(--accent-color);
	background: #fff;
	border: 1px solid var(--accent-color);
}

@media screen and (any-hover: hover) {
	.p-product-list__thumb:hover {
		opacity: 0.75;
	}

	.p-product-list__button:hover {
		opacity: 0.75;
	}
}

@media screen and (max-width: 767px) {
	.p-product-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem 1rem;
	}
}

@media screen and (min-width: 768px) {
	.p-product-list {
		grid-template-columns: repeat(4, 1fr);
		gap: 3rem 2rem;
	}
}

[data-toggle-trigger] {
	cursor: pointer;
}

.p-product-list__item[data-toggle-state="inactive"] {
	display: none;
}

.p-dialog {
	padding: 2rem 1rem 1rem;
	border: none;
}

.p-dialog__close {
	position: absolute;
	top: 0;
	right: 0;
	color: currentcolor;
	background: none;
	border: none;
}