#searchBox {
	position-anchor: --searchBox;
	position-area: bottom span-right;
	position: static;
	background-color: var(--color-white);
	flex-direction: column;
	padding: 1.5rem;
	margin-top: 0.6rem;
	width: 100cqw;
	border-radius: 1rem;
	box-shadow: 0px 0px 0.9rem 0px var(--color-black-25);
	text-align: start;

	@media (max-width: 1420px) {
		width: calc(100vw - 2rem);
		margin-left: calc(50% - 50vw + 1rem);
		margin-right: 1rem;
	}
	@media (max-width: 500px) {
		padding: 1rem;
	}

	.SearchBox_Block {
		display: flex;
		flex-direction: column;
		row-gap: 1.5rem;

		ul {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}

		.items {
			display: flex;
			flex-direction: column;

			row-gap: 1.75rem;
		}
		#searchBox ul {
			list-style: none;
		}
		.item__block-cats {
			text-align: start;
			display: inline-flex;
			column-gap: 0.625rem;

			span {
				color: var(--color-dark-gray);
				font-weight: 600;
			}
		}
		.item-product {
			width: 100%;
			display: grid;
			grid-template-columns: 4fr 1fr;
			column-gap: 1rem;

			@media (max-width: 814px) {
				display: flex;
				flex-direction: column;
			}
		}
		.item-cat a {
			display: flex;
			column-gap: 0.625rem;
			align-items: center;
		}
		.item__products__block {
			display: grid;
			grid-template-columns: 40px 1fr;
			column-gap: 0.625rem;
			align-items: start;
			min-width: 0;
		}

		.items img {
			width: 3rem;
			height: 3rem;
			object-fit: cover;
			flex-shrink: 0;
		}

		.item__title {
			text-wrap: wrap;
			line-height: 1.5;
			text-align: start;
		}
		.search-button {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1.5rem;
		}

		.search-suggestions a {
			display: flex;
			column-gap: 0.625rem;
		}

		.recent-name {
			color: var(--color-dark-gray);

			&:hover {
				color: var(--black);
			}
		}

		.item__title-block {
			display: flex;
			flex-direction: column;
			row-gap: 0.2rem;
		}

		.search-suggestions {
			display: flex;
			flex-direction: column;
			row-gap: 1.25rem;
		}

		.item__products-price {
			text-align: end;
			font-weight: 600;

			@media (max-width: 814px) {
				margin-left: calc(40px + 0.625rem);
				margin-top: 0.4rem;
				text-align: start;
			}
		}
		.item__products-code,
		.item__name-cat {
			color: var(--color-dark-gray);
			font-size: 0.875rem;
		}

		.cats-item a {
			display: flex;
		}

		.search-all {
			background-color: var(--color-gray);
			border-radius: 1rem;
			padding: 0.8rem 1.5rem;
		}

		.search-all:hover {
			background-color: var(--color-gray-light);
		}
		.icon {
			color: var(--color-dark-gray);
		}

		@media (max-width: 820px) {
			#searchBox ul {
				display: flex;
				flex-direction: column;
				row-gap: 1rem;
			}
		}
	}
}