/* ==================== CATALOG: product grid + card ==================== */

/* query.product-grid > ul.product-grid__list > li > .product-card
   (post-featured-image.product-card__image + post-title.product-card__title + button.product-card__price).
   Desktop: 3 columns; ≤1200px: 2; ≤600px: 1. Price text/link come from Block Bindings «webmaster/product».
   The service card (.service-grid/.service-card, patterns/service-grid.php) shares these rules; its differences — services.css. */

.product-grid .product-grid__list,
.service-grid .service-grid__list{
	display: grid;
	grid-template-columns: repeat(var(--catalog-columns), minmax(0, 1fr));
	gap: var(--catalog-gap-y) var(--catalog-gap-x);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-grid .product-grid__list > li,
.service-grid .service-grid__list > li{
	display: flex;
	margin: 0;
}

.product-grid .product-card,
.service-grid .service-card{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
}

.product-grid .product-card__image,
.service-grid .service-card__image{
	margin: 0;
	aspect-ratio: var(--catalog-card-ratio);
	background: var(--catalog-image-bg);
	overflow: hidden;
}

.product-grid .product-card__image a,
.product-grid .product-card__image img,
.service-grid .service-card__image a,
.service-grid .service-card__image img{
	display: block;
	width: 100%;
	height: 100%;
}

.product-grid .product-card__image img,
.service-grid .service-card__image img{
	object-fit: cover;
	transition: transform .3s ease;
}

.product-grid .product-card__image a:hover img,
.service-grid .service-card__image a:hover img{
	transform: scale(1.04);
}

.product-grid .product-card__title,
.service-grid .service-card__title{
	margin: var(--catalog-card-title-gap) 0 var(--catalog-card-title-gap);
	font-family: inherit;
	font-size: var(--catalog-card-title-size);
	font-weight: 400;
	line-height: var(--catalog-card-title-line);
	color: var(--color-black);
}

.product-grid .product-card__title a,
.service-grid .service-card__title a{
	color: inherit;
	text-decoration: none;
}

.product-grid .product-card__title a:hover,
.service-grid .service-card__title a:hover{
	color: var(--catalog-accent);
}

/* Button sits at the bottom so prices line up across a row. */
.product-grid .product-card__buy,
.service-grid .service-card__actions{
	margin: auto 0 0;
}

.product-grid .product-card__price,
.service-grid .service-card__more{
	width: 100%;
}

.product-grid .product-card__price .wp-block-button__link,
.service-grid .service-card__more .wp-block-button__link{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--catalog-card-btn-height);
	padding: 0 12px;
	border-radius: var(--catalog-btn-radius);
	background: var(--catalog-accent);
	color: #fff;
	font-size: var(--catalog-card-btn-size);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s ease;
}

.product-grid .product-card__price .wp-block-button__link:hover,
.service-grid .service-card__more .wp-block-button__link:hover{
	background: var(--catalog-accent-hover);
}

/* ==================== CATALOG PAGE: /catalog/, /catalog/<раздел>/ ==================== */

/* main.catalog-page > __head (h1 + breadcrumbs) + __body (aside.catalog-sidebar + __main: description, grid, pagination).
   Desktop: sidebar 270 + grid. ≤1200px: sections become a horizontal row of chips above the grid. */

.catalog-page{
	max-width: var(--container-width);
	margin: 0 auto;
	padding: var(--catalog-page-top) 15px var(--catalog-page-bottom);
}

.catalog-page .catalog-page__head{
	display: flex;
	flex-direction: column;
	gap: var(--catalog-head-gap);
	margin: 0 0 var(--catalog-body-top);
}

.catalog-page .catalog-page__title{
	margin: 0;
	font-size: var(--catalog-title-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black);
}

.catalog-page .catalog-page__body{
	display: flex;
	align-items: flex-start;
	gap: var(--catalog-body-gap);
	margin: 0;
}

.catalog-page .catalog-page__main{
	flex: 1;
	min-width: 0;
	margin: 0;
}

.catalog-page .catalog-page__description{
	margin: 0 0 var(--catalog-gap-y);
	font-size: var(--catalog-text-size);
}

.catalog-page .catalog-page__empty{
	margin: 0;
	font-size: var(--catalog-text-size);
}

/* ---------- Breadcrumbs (block webmaster/breadcrumbs) ---------- */

.breadcrumbs{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	margin: 0;
	font-size: var(--catalog-crumbs-size);
	line-height: 1.4;
}

.breadcrumbs .breadcrumbs__link{
	color: var(--catalog-muted);
	text-decoration: none;
}

.breadcrumbs .breadcrumbs__link:hover{
	color: var(--catalog-accent);
}

.breadcrumbs .breadcrumbs__current{
	color: var(--catalog-ink);
}

.breadcrumbs .breadcrumbs__sep::before{
	content: "-";
	color: var(--catalog-muted);
}

/* ---------- Sidebar: «Товары» (product_cat) + «Услуги» (service_cat), both core/categories ---------- */

/* parts/catalog-sidebar.html: .catalog-switch (tabs «Товары | Услуги», only ≤1200px) + two .catalog-sidebar__box. */

.catalog-page .catalog-sidebar{
	flex: 0 0 var(--catalog-sidebar-width);
	width: var(--catalog-sidebar-width);
	margin: 0;
}

.catalog-sidebar .catalog-sidebar__box{
	margin: 0;
}

.catalog-sidebar .catalog-sidebar__box--services{
	margin-top: var(--catalog-sidebar-box-gap);
}

.catalog-sidebar .catalog-switch{
	display: none;
}

.catalog-sidebar .catalog-sidebar__title{
	margin: 0;
	font-size: var(--catalog-sidebar-title-size);
	line-height: 1.2;
}

.catalog-sidebar .catalog-sidebar__title a{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: var(--catalog-sidebar-row);
	padding: 0 16px;
	background: var(--catalog-accent);
	color: #fff;
	text-decoration: none;
}

.catalog-sidebar .catalog-sidebar__box--services .catalog-sidebar__title a{
	background: var(--catalog-services-accent);
}

.catalog-sidebar .catalog-sidebar__list,
.catalog-sidebar .catalog-sidebar__list .children{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* flex: wp_list_categories leaves a newline after each link, which would add an empty line box. */
.catalog-sidebar .catalog-sidebar__list li{
	display: flex;
	flex-direction: column;
	margin: 0;
}

.catalog-sidebar .catalog-sidebar__list a{
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: var(--catalog-sidebar-row);
	margin-top: -1px;
	padding: 18px 40px 18px 16px;
	border: 1px solid var(--catalog-border);
	color: var(--color-black);
	font-size: var(--catalog-sidebar-size);
	line-height: 1.3;
	text-decoration: none;
	transition: color .2s ease;
}

.catalog-sidebar .catalog-sidebar__list a:hover,
.catalog-sidebar .catalog-sidebar__list .current-cat > a{
	color: var(--catalog-accent);
}

.catalog-sidebar .catalog-sidebar__list .current-cat > a{
	font-weight: 600;
}

.catalog-sidebar .catalog-sidebar__box--services .catalog-sidebar__list a:hover,
.catalog-sidebar .catalog-sidebar__box--services .catalog-sidebar__list .current-cat > a{
	color: var(--catalog-services-accent);
}

/* Chevron on sections that have subsections; subsections open on the current branch. */
.catalog-sidebar .catalog-sidebar__list li:has(> .children) > a::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
}

.catalog-sidebar .catalog-sidebar__list .children{
	display: none;
}

.catalog-sidebar .catalog-sidebar__list .current-cat > .children,
.catalog-sidebar .catalog-sidebar__list .current-cat-parent > .children,
.catalog-sidebar .catalog-sidebar__list .current-cat-ancestor > .children{
	display: block;
}

.catalog-sidebar .catalog-sidebar__list .children a{
	padding-left: 32px;
	font-size: var(--catalog-sidebar-sub-size);
}

/* ---------- Pagination (core/query-pagination) ---------- */

.catalog-pagination.catalog-pagination{
	gap: 10px;
	align-items: center;
	margin: var(--catalog-pagination-top) 0 0;
	font-size: var(--catalog-crumbs-size);
}

.catalog-pagination .wp-block-query-pagination-numbers{
	display: flex;
	gap: 10px;
}

.catalog-pagination .page-numbers{
	min-width: 16px;
	color: var(--color-black);
	text-align: center;
	text-decoration: none;
}

.catalog-pagination .page-numbers.current,
.catalog-pagination a.page-numbers:hover{
	color: var(--color-accent);
}

/* Prev/next: round accent buttons with a chevron, text kept for screen readers only. */
.catalog-pagination .wp-block-query-pagination-previous,
.catalog-pagination .wp-block-query-pagination-next{
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--catalog-pagination-arrow);
	height: var(--catalog-pagination-arrow);
	margin: 0 6px;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	font-size: 0;
	text-decoration: none;
}

/* Core prints «/» — replaced by a drawn chevron like in the mockup. */
.catalog-pagination .wp-block-query-pagination-previous-arrow,
.catalog-pagination .wp-block-query-pagination-next-arrow{
	display: block;
	width: 8px;
	height: 8px;
	margin: 0;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	font-size: 0;
	transform: translateX(-2px) rotate(45deg);
}

.catalog-pagination .wp-block-query-pagination-previous-arrow{
	transform: translateX(2px) rotate(-135deg);
}

/* ---------- ≤1200px: tabs «Товары | Услуги» + sections of the current catalog as a row of chips ---------- */

@media (max-width: 1200px){
	.catalog-sidebar .catalog-switch{
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		margin: 0 0 var(--catalog-switch-gap);
	}

	.catalog-switch .wp-block-button{
		flex: 1 1 0;
		margin: 0;
	}

	.catalog-switch .wp-block-button__link{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: var(--catalog-switch-height);
		padding: 0 12px;
		border-radius: 0;
		background: var(--catalog-accent);
		color: #fff;
		font-size: var(--catalog-switch-size);
		font-weight: 400;
		text-decoration: none;
	}

	.catalog-switch .catalog-switch__services .wp-block-button__link{
		background: var(--catalog-services-accent);
	}

	/* Only the chips of the catalog being viewed: services pages — «Услуги», the rest — «Товары». */
	body:is(.post-type-archive-service, .tax-service_cat, .single-service) .catalog-sidebar__box--products,
	body:not(.post-type-archive-service, .tax-service_cat, .single-service) .catalog-sidebar__box--services{
		display: none;
	}

	.catalog-sidebar .catalog-sidebar__box--services{
		margin-top: 0;
	}

	.catalog-page .catalog-page__body{
		flex-direction: column;
		align-items: stretch;
	}

	.catalog-page .catalog-sidebar{
		flex: none;
		width: 100%;
	}

	.catalog-sidebar .catalog-sidebar__title{
		display: none;
	}

	.catalog-sidebar .catalog-sidebar__list{
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.catalog-sidebar .catalog-sidebar__list::-webkit-scrollbar{
		display: none;
	}

	.catalog-sidebar .catalog-sidebar__list a{
		min-height: 0;
		margin: 0;
		padding: 8px 16px;
		border-radius: 20px;
		white-space: nowrap;
	}

	.catalog-sidebar .catalog-sidebar__list .current-cat > a{
		border-color: var(--catalog-accent);
		background: var(--catalog-accent);
		color: #fff;
	}

	.catalog-sidebar .catalog-sidebar__box--services .catalog-sidebar__list .current-cat > a{
		border-color: var(--catalog-services-accent);
		background: var(--catalog-services-accent);
		color: #fff;
	}

	.catalog-sidebar .catalog-sidebar__list li:has(> .children) > a::after,
	.catalog-sidebar .catalog-sidebar__list .children{
		display: none;
	}
}

/* ==================== HOME: section tiles (block webmaster/category-tiles) ==================== */

/* .home-categories > .category-tiles > ul.category-tiles__grid > li > a.category-tile (img + __name) + «Посмотреть все».
   Desktop mosaic on a 12-column grid: 1st tile 7 cols × 2 rows, 2nd–3rd 5 cols, the rest 4 cols.
   ≤1200px: 2 columns (1st tile full width); ≤600px: one column. */

.home-categories{
	max-width: var(--home-cats-width);
	margin-left: auto;
	margin-right: auto;
	padding: 0 15px;
}

.category-tiles .category-tiles__grid{
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: var(--home-cats-row) var(--home-cats-row);
	grid-auto-rows: var(--home-cats-row-2);
	gap: var(--home-cats-row-gap) var(--home-cats-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.category-tiles .category-tiles__item{
	grid-column: span 4;
	margin: 0;
}

.category-tiles .category-tiles__item:nth-child(1){
	grid-column: span 7;
	grid-row: span 2;
}

.category-tiles .category-tiles__item:nth-child(2),
.category-tiles .category-tiles__item:nth-child(3){
	grid-column: span 5;
}

.category-tiles .category-tile{
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	background: var(--catalog-image-bg);
	color: #fff;
	text-decoration: none;
}

.category-tiles .category-tile__image{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.category-tiles .category-tile:hover .category-tile__image{
	transform: scale(1.05);
}

.category-tiles .category-tile__name{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: var(--home-cats-label-height);
	padding: 10px var(--home-cats-label-pad);
	background: rgba(0, 0, 0, .7);
	font-size: var(--home-cats-label-size);
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background .2s ease;
}

.category-tiles .category-tile:hover .category-tile__name{
	background: rgba(0, 0, 0, .85);
}

/* Small tiles of the 2nd row: centered caption, as in the mockup. */
.category-tiles .category-tiles__item:nth-child(n+4) .category-tile__name{
	justify-content: center;
	text-align: center;
}

.home-categories .home-categories__more,
.home-services .home-services__more,
.home-news .home-news__more{
	justify-content: center;
	margin: var(--home-cats-more-top) 0 0;
}

.home-categories .home-categories__all .wp-block-button__link,
.home-services .home-services__all .wp-block-button__link,
.home-news .home-news__all .wp-block-button__link{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--home-more-width);
	min-height: var(--home-more-height);
	padding: 0 24px;
	border-radius: var(--catalog-btn-radius);
	background: var(--catalog-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease;
}

.home-categories .home-categories__all .wp-block-button__link:hover,
.home-services .home-services__all .wp-block-button__link:hover,
.home-news .home-news__all .wp-block-button__link:hover{
	background: var(--catalog-accent-hover);
}

@media (max-width: 1200px){
	.category-tiles .category-tiles__grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: var(--home-cats-row);
	}

	.category-tiles .category-tiles__item,
	.category-tiles .category-tiles__item:nth-child(2),
	.category-tiles .category-tiles__item:nth-child(3){
		grid-column: span 1;
	}

	.category-tiles .category-tiles__item:nth-child(1),
	.category-tiles .category-tiles__item:nth-child(even):last-child{
		grid-column: span 2;
		grid-row: span 1;
	}
}

@media (max-width: 600px){
	.category-tiles .category-tiles__grid{
		grid-template-columns: minmax(0, 1fr);
	}

	.category-tiles .category-tiles__item:nth-child(1),
	.category-tiles .category-tiles__item:nth-child(even):last-child{
		grid-column: span 1;
	}

	.home-categories .home-categories__all,
	.home-services .home-services__all,
	.home-news .home-news__all{
		width: 100%;
	}

	.category-tiles .category-tile__name{
		justify-content: center;
		text-align: center;
	}
}

/* ==================== HOME: «Популярные товары» (query .product-grid.product-carousel) ==================== */

/* Same cards as the catalog, but one row with horizontal scroll-snap; arrows are added by assets/product-carousel.js.
   Desktop: 4 cards, arrows outside; ≤1300px: arrows over the photo edges. Columns — --carousel-cols. */

.popular-products{
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding: 0 15px;
}

.popular-products .popular-products__title{
	margin: 0 0 var(--home-title-gap);
	font-size: var(--catalog-title-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black);
}

.product-carousel{
	--catalog-card-btn-height: var(--carousel-btn-height);
	position: relative;
	container-type: inline-size;
}

.product-grid.product-carousel .product-grid__list{
	display: flex;
	gap: var(--catalog-gap-x);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.product-grid.product-carousel .product-grid__list::-webkit-scrollbar{
	display: none;
}

.product-grid.product-carousel .product-grid__list > li{
	flex: 0 0 calc((100% - (var(--carousel-cols) - 1) * var(--catalog-gap-x)) / var(--carousel-cols));
	scroll-snap-align: start;
}

.product-carousel .product-carousel__arrow{
	position: absolute;
	/* vertical centre of the card photo: card width × 294/270 ÷ 2 */
	top: calc((100cqw - (var(--carousel-cols) - 1) * var(--catalog-gap-x)) / var(--carousel-cols) * 294 / 270 / 2);
	z-index: 2;
	width: var(--carousel-arrow-size);
	height: var(--carousel-arrow-size);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transform: translateY(-50%);
}

.product-carousel .product-carousel__arrow::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--carousel-chevron);
	height: var(--carousel-chevron);
	border-top: 2px solid var(--color-black);
	border-left: 2px solid var(--color-black);
	transform: translate(-25%, -50%) rotate(-45deg);
}

.product-carousel .product-carousel__arrow--next::before{
	transform: translate(-75%, -50%) rotate(135deg);
}

.product-carousel .product-carousel__arrow--prev{
	left: calc(-1 * var(--carousel-arrow-offset));
}

.product-carousel .product-carousel__arrow--next{
	right: calc(-1 * var(--carousel-arrow-offset));
}

@media (max-width: 1300px){
	.product-carousel .product-carousel__arrow{
		background: rgba(255, 255, 255, .8);
		border-radius: 50%;
	}

	.product-carousel .product-carousel__arrow--prev{
		left: 4px;
	}

	.product-carousel .product-carousel__arrow--next{
		right: 4px;
	}
}