/* ==================== HOME (mytoy_new.pen → «1920 - Главная (new)») ==================== */

/* Главная = Страница (ID 37), секции — паттерны webmaster/*:
   hero-slider (slider.css) → advantages (advantages.css) → home-categories → popular-products → home-services
   → home-about → home-subscribe. Секции идут встык: фон чередуется (белый / --color-surface), отступы — внутри секции.
   .home-section: на всю ширину (фон), содержимое — колонка до --container-width. Размеры — --home-* в style.css. */

.wp-block-post-content.wp-block-post-content > .home-section,
.wp-block-post-content.wp-block-post-content > .hero-slides{
	margin-block: 0;
}

.home-section{
	display: flex;
	flex-direction: column;
	gap: var(--home-head-gap);
	box-sizing: border-box;
	padding: var(--section-pad) var(--page-gutter);
}

.home-section.home-section > *{
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
}

.home-section--surface{
	background: var(--color-surface);
}

/* ---------- заголовок секции: по центру (заголовок + подзаголовок) или в строку («Смотреть все →» справа) ---------- */

.home-section .home-section__head{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.home-section .home-section__head > *{
	margin: 0;
}

.home-section .home-section__head--row{
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
}

.home-section .home-section__title{
	font-size: var(--h2-size);
	line-height: 1.25;
	color: var(--color-text);
}

.home-section .home-section__desc{
	font-size: var(--home-desc-size);
	color: var(--color-text-2);
}

.home-section .home-section__all{
	flex-shrink: 0;
	font-size: var(--home-link-size);
	font-weight: 500;
}

.home-section .home-section__all a{
	color: var(--color-accent);
	text-decoration: none;
}

.home-section .home-section__all a:hover{
	color: var(--color-accent-hover);
	text-decoration: underline;
}

/* ==================== Категории: лента кругов (блок webmaster/category-tiles) ==================== */

/* .category-tiles.product-carousel > ul.category-tiles__list > li > a.category-tile (span.__image > img + span.__name).
   Видно --cats-visible разделов, остальные — прокруткой (scroll-snap); стрелки — product-carousel.js,
   показываются, только когда разделы не помещаются (.has-overflow). ≤600: плитки 2 в ряд, фото фоном. */

.category-tiles{
	position: relative;
}

.category-tiles .category-tiles__list{
	display: flex;
	gap: var(--cats-gap);
	margin: 0;
	padding: 4px 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.category-tiles .category-tiles__list::-webkit-scrollbar{
	display: none;
}

.category-tiles .category-tiles__item{
	flex: 0 0 max(var(--cats-circle), (100% - (var(--cats-visible) - 1) * var(--cats-gap)) / var(--cats-visible));
	margin: 0;
	scroll-snap-align: start;
}

.category-tiles .category-tile{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--color-text);
	text-align: center;
	text-decoration: none;
}

.category-tiles .category-tile__image{
	display: block;
	width: var(--cats-circle);
	height: var(--cats-circle);
	border-radius: var(--radius-full);
	background: var(--color-border);
	overflow: hidden;
	box-shadow: 0 0 0 0 var(--color-accent);
	transition: box-shadow .2s ease;
}

.category-tiles .category-tile__image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.category-tiles .category-tile:hover .category-tile__image{
	box-shadow: 0 0 0 4px var(--color-accent);
}

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

.category-tiles .category-tile__name{
	font-size: var(--cats-name-size);
	font-weight: 600;
	line-height: 1.3;
	transition: color .2s ease;
}

.category-tiles .category-tile:hover .category-tile__name{
	color: var(--color-accent);
}

/* стрелки: по центру кругов, у краёв ленты */
.category-tiles .product-carousel__arrow{
	display: none;
	position: absolute;
	top: calc(4px + var(--cats-circle) / 2);
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-bg);
	box-shadow: var(--card-shadow);
	cursor: pointer;
	transform: translateY(-50%);
}

.category-tiles.has-overflow .product-carousel__arrow{
	display: block;
}

.category-tiles .product-carousel__arrow::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border: 0;
	border-top: 2px solid var(--color-text);
	border-right: 2px solid var(--color-text);
	transform: translate(-65%, -50%) rotate(45deg);
}

.category-tiles .product-carousel__arrow--prev::before{
	transform: translate(-35%, -50%) rotate(-135deg);
}

.category-tiles .product-carousel__arrow:hover{
	background: var(--color-accent);
}

.category-tiles .product-carousel__arrow:hover::before{
	border-color: #fff;
}

.category-tiles .product-carousel__arrow--prev{
	left: -8px;
}

.category-tiles .product-carousel__arrow--next{
	right: -8px;
}

/* 320 по макету: плитки 2 в ряд, высота 100, фото фоном, подпись белым снизу слева */
@media (max-width: 600px){
	.category-tiles .category-tiles__list{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 0;
		overflow: visible;
	}

	.category-tiles.has-overflow .product-carousel__arrow{
		display: none;
	}

	.category-tiles .category-tile{
		position: relative;
		justify-content: flex-end;
		align-items: flex-start;
		height: 100px;
		padding: 12px;
		box-sizing: border-box;
		border-radius: var(--radius-xl);
		overflow: hidden;
		color: #fff;
		text-align: left;
	}

	.category-tiles .category-tile__image{
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}

	.category-tiles .category-tile::after{
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(0deg, rgba(26, 26, 26, .65) 0%, rgba(26, 26, 26, 0) 70%);
	}

	.category-tiles .category-tile__name{
		position: relative;
		z-index: 2;
	}

	.category-tiles .category-tile:hover .category-tile__name{
		color: #fff;
	}
}

/* ==================== Популярные товары: 4 карточки (карточка — catalog.css) ==================== */

.popular-products .product-grid__list{
	grid-template-columns: repeat(var(--popular-cols), minmax(0, 1fr));
}

/* 768 по макету — 3 карточки в ряд: четвёртую прячем, чтобы не висела одна */
@media (max-width: 1200px) and (min-width: 601px){
	.popular-products .product-grid__list > li:nth-child(n+4){
		display: none;
	}
}

/* ==================== Наши услуги: 4 карточки (карточка — catalog.css / services.css) ==================== */

.home-services .home-services__grid{
	--service-columns: var(--home-services-cols);
}

/* ==================== О компании: фото | метка + заголовок + текст + кнопка ==================== */

.home-about{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: var(--about-home-gap);
}

.home-about.home-about > *{
	max-width: none;
}

/* колонка в 2 × 880 — по ширине контейнера */
.home-about{
	padding-left: max(var(--page-gutter), (100% - var(--container-width)) / 2);
	padding-right: max(var(--page-gutter), (100% - var(--container-width)) / 2);
}

.home-about .home-about__image{
	height: var(--about-home-image);
	margin: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.home-about .home-about__image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-about .home-about__content{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.home-about .home-about__content > *{
	margin: 0;
}

.home-about .home-about__tag{
	color: var(--color-accent);
	font-size: var(--about-home-tag-size);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.home-about .home-about__title{
	font-size: var(--about-home-title-size);
	line-height: 1.3;
	color: var(--color-text);
}

.home-about .home-about__text{
	font-size: var(--home-desc-size);
	line-height: 1.6;
	color: var(--color-text-2);
}

/* 768/320 по макету: колонка — метка, заголовок, текст, фото, кнопка */
@media (max-width: 1200px){
	.home-about{
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--about-home-stack-gap);
	}

	.home-about .home-about__content{
		display: contents;
	}

	.home-about .home-about__image{
		order: 4;
	}

	.home-about .home-about__more{
		order: 5;
	}
}

/* ==================== Подписка (пока только оформление, без отправки) ==================== */

.home-subscribe{
	align-items: center;
	gap: var(--subscribe-gap);
	padding-top: var(--subscribe-pad);
	padding-bottom: var(--subscribe-pad);
	background: var(--gradient-accent);
	color: #fff;
	text-align: center;
}

.home-subscribe .home-subscribe__title{
	font-size: var(--h2-size);
	line-height: 1.25;
	color: #fff;
}

.home-subscribe .home-subscribe__desc{
	font-size: var(--home-desc-size);
	color: rgba(255, 255, 255, .8);
}

.home-subscribe .home-subscribe__form{
	display: flex;
	flex-direction: var(--subscribe-form-direction);
	align-items: stretch;
	justify-content: center;
	gap: var(--subscribe-form-gap);
	max-width: var(--subscribe-form-width);
}

.home-subscribe .home-subscribe__form > *{
	margin: 0;
}

.home-subscribe .home-subscribe__input{
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--subscribe-field-height);
	padding: 0 20px;
	border-radius: var(--subscribe-radius);
	background: rgba(255, 255, 255, .2);
	color: rgba(255, 255, 255, .67);
	font-size: var(--subscribe-field-size);
	text-align: left;
}

.home-subscribe .home-subscribe__submit{
	flex-shrink: 0;
}

.home-subscribe .home-subscribe__submit .wp-block-button,
.home-subscribe .home-subscribe__submit .wp-block-button__link{
	width: 100%;
}

.home-subscribe .home-subscribe__submit .wp-block-button__link{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--subscribe-field-height);
	padding: 0 28px;
	border-radius: var(--subscribe-radius);
	background: var(--color-bg);
	color: var(--color-accent);
	font-size: var(--subscribe-field-size);
	font-weight: 600;
	cursor: default;
}

.home-subscribe .home-subscribe__submit .wp-block-button__link:hover{
	background: var(--color-bg);
	color: var(--color-accent-hover);
}