@charset "utf-8";

.l-content .m-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 40px;
	clear: both;
	max-width: 1440px;
}

.l-content .content {
	background-color: #e8f2f7;
	padding: 0 0 40px 0;
}

.l-content *,
.l-content *::before,
.l-content *::after {
	box-sizing: border-box;
}

.l-content .f-section {
	background-color: #FFFFFF;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
}

.l-content .f-line {
	height: 1px;
	border: 2px dashed #004bb1;
	max-width: 1600px;
	margin: 40px auto 70px;
}

.l-content .f-header {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 16px;
	margin-bottom: 15px;
}

.l-content .f-header .m-btn-reset {
	background: transparent;
	border: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	position: relative;
	bottom: 14px;
	font-size: 16px;
	color: #004bb1;
}

.l-content .f-header .m-btn-reset:hover {
	opacity: 0.8;
	cursor: pointer;
}

.l-content .f-header-block {
	display: flex;
	width: 100%;
	align-items: flex-end;
	gap: 10px;
}

.l-content [data-filter-group="brands"] .f-header-title {
	min-width: 0;
}

.l-content [data-filter-group="brands"] .f-header-title img {
	max-width: 100%;
	height: auto;
}

.l-content .f-options {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.l-content .f-option {
	position: relative;
	display: block;
	min-width: 0;
	margin: 0;
	cursor: pointer;
}

.l-content .f-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.l-content .f-option__card {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 15px;
	outline: 1px solid #dddddd;
	transition: background-color .15s, outline-color .15s, transform .2s ease;
	background-color: #FFF;
	border-radius: 15px;
}

.l-content .f-option__image {
	display: block;
	line-height: 1;
	margin: 0;
}

.l-content .f-option__icon {
	max-width: 100%;
	flex-shrink: 0;
	fill: #000;
	transition: fill .2s ease;
}

.l-content .f-option:hover .f-option__icon,
.l-content .f-option__input:checked + .f-option__card .f-option__icon {
	fill: #004bb1;
}

.l-content .f-option--product .f-option__icon {
	color: #000;
	transition: fill .2s ease, color .2s ease;
}

.l-content .f-option--product:hover .f-option__icon,
.l-content .f-option--product .f-option__input:checked + .f-option__card .f-option__icon {
	color: #004bb1;
}

.l-content .f-option--process .f-option__name,
.l-content .f-option__category {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	text-align: center;
}

.l-content .f-options--brands {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	margin: 0 auto;
}

.l-content .f-option--brand {
	flex: 0 0 calc((100% - 60px) / 7);
	min-width: 0;
}

.l-content .f-option--brand .f-option__card {
	padding: 10px;
}

.l-content .f-option__input:checked + .f-option__card,
.l-content .f-option__input:hover + .f-option__card {
	outline: 3px solid #004bb1;
}

.l-content .f-option__input:checked + .f-option__card .f-option__name,
.l-content .f-option__input:checked + .f-option__card .f-option__category,
.l-content .f-option__input:hover + .f-option__card .f-option__name,
.l-content .f-option__input:hover + .f-option__card .f-option__category {
	color: #004bb1;
}

.l-content .f-option__input:checked + .f-option__card::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #004bb1;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M10.97%204.97a.75.75%200%200%201%201.07%201.05l-3.99%204.99a.75.75%200%200%201-1.08.02L4.324%208.384a.75.75%200%201%201%201.06-1.06l2.094%202.093%203.473-4.425z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
}

.l-content .f-option__input:focus-visible + .f-option__card,
.l-content .m-btn-reset:focus-visible {
	outline: 3px solid #005bac;
	outline-offset: 4px;
}

.l-content .f-filter-status {
	margin: 30px 0 0 0;
	font-size: 14px;
	color: #000;
}

.l-content .p-section {
	padding: 30px;
	margin: 60px auto 0;
	background: #d9f0ff;
	max-width: 1600px;
}

.l-content .p-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 48px;
}

.l-content .p-search {
	position: relative;
	min-width: 0;
}

.l-content .p-search__input {
	display: block;
	width: 100%;
	height: 45px;
	padding: 6px 40px 6px 36px;
	border: 3px solid #004098;
	border-radius: 3px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 18px 18px;
	color: #111;
	font: inherit;
	font-size: 16px;
	appearance: none;
}

.l-content .p-search__input:not(:placeholder-shown) {
	padding-left: 10px;
	background-image: none;
}

.l-content .p-search__input::-webkit-search-cancel-button {
	appearance: none;
}

.l-content .p-search__input:placeholder-shown ~ .p-search__clear {
	display: none;
}

.l-content .p-search__clear {
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	height: 45px;
	padding: 0;
	border: 0;
	background: transparent;
	background-color: #004098;
	color: #FFF;
	font-size: 23px;
	cursor: pointer;
}

.l-content .p-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	background-color: #FFFFFF;
	padding: 5px;
}

.l-content .p-pagination__button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-width: 32px;
	min-height: 36px;
	padding: 3px 5px;
	border: 0;
	border-radius: 4px;
	background: #fff;
	color: #0169c6;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.l-content .p-pagination__button.is-current {
	background: #749dcf;
	color: #fff;
	border-color: #749dcf;
}

.l-content .p-pagination__button:disabled {
	opacity: .35;
	cursor: default;
}

.l-content .p-search__input:focus-visible,
.l-content .p-search__clear:focus-visible,
.l-content .p-pagination__button:focus-visible {
	outline: 2px solid #005bac;
	outline-offset: 2px;
}

.l-content .p-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.l-content .p-card {
	min-width: 0;
	background-color: #ffffff;
	color: #333333;
	border: 1px solid #dedede;
	padding: 20px 10px;
	text-align: center;
}

.l-content .p-card:hover {
	opacity: 0.9;
	cursor: pointer;
	border: 1px solid #ff730a;
}

.l-content .p-card:hover a {
	color: #ff730a;
}

.l-content .p-card__name {
	width: 100%;
	min-height: 105px;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 20px;
}

.l-content .p-card__name > a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-height: 1.5;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	font-weight: bold;
	font-size: 18px;
}

.l-content .p-card__pc {
	display: block;
	min-height: 24px;
	line-height: 24px;
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	color: #b1b1b1;
}

.l-content .p-card__image {
	display: block;
	margin-bottom: 20px;
}

.l-content .p-card__delivery {
	display: block;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: bold;
}

.l-content .p-card__delivery-note {
	font-size: 12px;
}

.l-content .p-card__delivery img {
	vertical-align: middle;
	margin-right: 10px;
}

.l-content .p-card__price-label {
	font-size: 16px;
	line-height: 18px;
}

.l-content .p-card__price {
	color: #dd0000;
	font-weight: bold;
	font-size: 24px;
	margin: 10px 0 15px 0;
	min-height: 46px;
}

.l-content .p-card__piece {
	color: #000;
	font-size: 12px;
	font-weight: 400;
	line-height: 12px;
}

.l-content .p-card__tags {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.l-content .p-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	margin: 0;
	padding: 4px 3px;
	border: 1px solid #bdbdbd;
	border-radius: 30px;
	color: #000000;
	font-size: 10px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.l-content .p-card__tags > .p-tag:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.l-content .p-tag--food_safety {
	background: #FFF1D6;
	color: #B66A00;
	border-color: #F3D39A;
}

.l-content .p-tag--environment {
	background: #E4F4E8;
	color: #287A45;
	border-color: #B8DEC2;
}

.l-content .p-tag--materials {
	background: #E6F0FA;
	color: #004098;
	border-color: #BCD3EA;
}

.l-content .p-card[hidden],
.l-content .p-pagination[hidden],
.l-content .p-empty[hidden] {
	display: none !important;
}

.l-content .p-pagination__ellipsis {
	align-self: center;
	padding: 0 3px;
	color: #777;
}

.l-content .p-pagination-status {
	margin: -24px 0 20px;
	color: #000;
	font-size: 14px;
}

.l-content .p-pagination.p-pagination--bottom {
	margin: 30px auto 0;
	width: 380px;
	max-width: 100%;
}

.l-content .p-empty {
	padding: 40px 16px;
	text-align: center;
	color: #000;
	background: #f7f7f7;
}

.l-content .f-options .f-option > .f-option__card {
	transform: translateY(0);
}

.l-content .f-options .f-option:hover > .f-option__card {
	transform: translateY(-4px);
}

.l-content .m-container > .f-section {
	min-width: 0;
	margin-top: 0;
}

.l-content .m-container > [data-filter-group="brands"],
.l-content .m-container > .f-filter-status {
	grid-column: 1 / -1;
}

.l-content [data-filter-group="processing"],
.l-content [data-filter-group="products"] {
	display: grid;
	grid-template-rows: auto 1fr;
}

.l-content [data-filter-group="processing"] .f-header,
.l-content [data-filter-group="products"] .f-header {
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
}

.l-content [data-filter-group="processing"] .f-header-block,
.l-content [data-filter-group="products"] .f-header-block {
	min-height: 64px;
	min-width: 0;
}

.l-content [data-filter-group="processing"] .f-header-title,
.l-content [data-filter-group="products"] .f-header-title {
	min-width: 0;
}

.l-content [data-filter-group="processing"] .f-header-title img,
.l-content [data-filter-group="products"] .f-header-title img {
	max-width: 100%;
	height: auto;
}

.l-content [data-filter-group="processing"] .m-btn-reset,
.l-content [data-filter-group="products"] .m-btn-reset {
	justify-self: end;
	bottom: 8px;
}

.l-content .f-options--processing,
.l-content .f-options--products {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

.l-content .f-options--processing .f-option__card,
.l-content .f-options--products .f-option__card {
	background-color: #f9f9f9;
	padding: 12px 8px;
}

/* Keep both filter groups' SVG icons at the same height. */
.l-content .f-options--processing .f-option__icon,
.l-content .f-options--products .f-option__icon {
	width: 100%;
	height: 100px;
	max-height: 100px;
	object-fit: contain;
}

/* Match the original upper heading column without changing those sections. */
.l-content [data-filter-group="brands"] .f-header-block {
	min-width: 0;
}

@media (min-width: 1025px) {
	.l-content [data-filter-group="brands"] {
		container-type: inline-size;
	}

	.l-content [data-filter-group="brands"] .f-header {
		width: calc((100% - 60px) / 2);
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.l-content [data-filter-group="brands"] .m-btn-reset {
		justify-self: end;
		transform: translateX(calc(50cqw + 30px));
	}
}

@media (max-width: 1600px) {
	.l-content .content {
		padding: 0 20px 40px 20px;
	}
}

@media (max-width: 1400px) {
	.l-content .p-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 1200px) {
	.l-content .p-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.l-content .f-header .m-btn-reset {
		bottom: 9px;
	}
}

@media (max-width: 1024px) {
	.l-content .m-container {
		display: block;
	}

	.l-content [data-filter-group="processing"],
	.l-content [data-filter-group="products"] {
		display: block;
	}

	.l-content [data-filter-group="processing"] .f-header,
	.l-content [data-filter-group="products"] .f-header {
		grid-template-columns: 1fr auto;
		gap: 16px;
	}

	.l-content [data-filter-group="processing"] .f-header-block,
	.l-content [data-filter-group="products"] .f-header-block {
		min-height: 0;
	}

	.l-content [data-filter-group="processing"] .m-btn-reset,
	.l-content [data-filter-group="products"] .m-btn-reset {
		bottom: 7px;
	}

	.l-content .f-options--processing,
	.l-content .f-options--products {
		gap: 14px;
	}

	.l-content .f-options--processing .f-option__card,
	.l-content .f-options--products .f-option__card {
		padding: 12px 15px 15px;
	}

	.l-content .p-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.l-content .f-header .m-btn-reset {
		bottom: 7px;
		font-size: 14px;
	}

	.l-content .f-option--brand {
		flex-basis: calc((100% - 50px) / 6);
	}

	.l-content .f-line {
		margin: 20px auto 40px;
	}

	.l-content .m-container > .f-section + .f-section {
		margin-top: 40px;
	}
}

@media (max-width: 768px) {
	.l-content .p-pagination-status {
		margin-top: -12px;
	}

	.l-content .f-section {
		padding: 22px 14px;
	}

	.l-content .f-header,
	.l-content [data-filter-group="processing"] .f-header,
	.l-content [data-filter-group="products"] .f-header {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.l-content .m-btn-reset {
		justify-self: end;
		min-height: 44px;
	}

	.l-content .f-options {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.l-content .f-option--brand {
		flex-basis: calc((100% - 40px) / 5);
	}

	.l-content .p-toolbar {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		margin-bottom: 28px;
	}

	.l-content .p-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.l-content .p-section {
		padding: 20px;
	}

	.l-content .f-header-block {
		align-items: flex-start;
		flex-direction: column;
	}

	.l-content .p-pagination__button {
		gap: 5px;
		min-width: 26px;
		min-height: 26px;
	}
}

@media (max-width: 576px) {
	.l-content .f-option--brand {
		flex-basis: calc((100% - 30px) / 4);
	}

	.l-content .p-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.l-content .f-header .m-btn-reset {
		font-size: 12px;
	}

	.l-content .f-options--processing .f-option__icon,
	.l-content .f-options--products .f-option__icon {
		max-height: 45px;
	}

	.l-content .f-option--process .f-option__name,
	.l-content .f-option__category {
		font-size: 12px;
		line-height: 14px;
	}

	.l-content .f-options--brands {
		gap: 8px;
		justify-content: center;
	}

	.l-content .m-container > .f-section + .f-section {
		margin-top: 20px;
	}

	.l-content .f-line {
		border: 1px dashed #004bb1;
		margin: 25px auto 30px;
	}

	.l-content .f-header,
	.l-content [data-filter-group="processing"] .f-header,
	.l-content [data-filter-group="products"] .f-header {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 8px;
	}

	.l-content .f-header > .f-header-block {
		grid-column: 1;
		grid-row: 1;
	}

	.l-content .f-header > .m-btn-reset {
		grid-column: 1;
		grid-row: 2;
		justify-self: end;
		bottom: 0;
		min-height: auto;
		margin-bottom: 10px;
	}

	.l-content .m-btn-reset svg {
		width: 12px;
		height: 12px;
		flex-shrink: 0;
	}

	.l-content .p-card__name {
		min-height: auto;
	}

	.l-content .f-option__card {
		border-radius: 8px;
	}

	.l-content .f-options--processing .f-option__card,
	.l-content .f-options--products .f-option__card {
		padding: 8px 10px 10px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.l-content .f-options .f-option > .f-option__card {
		transition: none;
	}
}

/* Keep clickable controls and their contents consistent with shared site CSS. */
.l-content a[href],
.l-content a[href] *,
.l-content button:enabled,
.l-content button:enabled *,
.l-content .f-option,
.l-content .f-option *,
.l-content .p-card[data-clickable="area"],
.l-content .p-card[data-clickable="area"] * {
	cursor: pointer !important;
}

.l-content button:disabled,
.l-content button:disabled * {
	cursor: default !important;
}