/* ==================== PAGE WITH SIDEBAR + «О нас» (templates/page-sidebar.html, page /about/) ==================== */

/* main.catalog-page.page-sidebar > __head (h1 + breadcrumbs) + __body (aside.catalog-sidebar + post-content.page-sidebar__content).
   Content of «О нас» (page /about/):
   group.about-intro (grid: group.__text «My toy» + text | group.__form «Закажите звонок» + Fluent Form 3)
   → gallery.is-style-photo-slider.about-gallery (main photo + thumbnails, markup — webmaster_photo_gallery_html(), product.css)
   → group.about-details (requisites). Sizes — --about-*. Fluent Form fields share the dialog rules (order-form.css). */

.page-sidebar .page-sidebar__content{
	font-size: var(--about-text-size);
	line-height: var(--about-text-line);
	color: var(--color-black);
}

.page-sidebar .page-sidebar__content > *{
	margin: 0 0 var(--about-block-gap);
}

.page-sidebar .page-sidebar__content > :last-child{
	margin-bottom: 0;
}

.page-sidebar .page-sidebar__content h2{
	margin: 0 0 var(--about-title-gap);
	font-size: var(--about-title-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black);
}

/* ---------- Text + «Закажите звонок» ---------- */

.page-sidebar .about-intro{
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--about-form-width);
	align-items: start;
	gap: var(--about-intro-gap);
}

.about-intro .about-intro__text > *{
	margin: 0 0 1em;
}

.about-intro .about-intro__text > h2{
	margin-bottom: var(--about-title-gap);
}

.about-intro .about-intro__text > :last-child{
	margin-bottom: 0;
}

.about-intro .about-intro__form{
	box-sizing: border-box;
	margin: 0;
	padding: var(--about-form-pad);
	border-radius: 4px;
	background: var(--about-form-bg);
}

.about-intro .about-intro__form .about-intro__form-title{
	margin: 0 0 20px;
	font-size: var(--about-form-title-size);
	line-height: 1.3;
	text-align: center;
}

.about-intro .about-intro__form .fluentform .ff-el-form-control{
	border-color: #fff;
	background: #fff;
}

/* ---------- Gallery: sizes of the shared product gallery → about variables ---------- */

.about-gallery.product-gallery{
	--product-photo-width: var(--about-photo-width);
	--product-photo-ratio: var(--about-photo-ratio);
	--product-thumb-width: var(--about-thumb-width);
	--product-thumb-ratio: var(--about-thumb-ratio);
	--product-thumb-gap: var(--about-thumb-gap);
	--product-thumbs-gap: var(--about-thumbs-gap);
	--product-thumbs-pad: var(--about-thumbs-pad);
	--product-thumbs-max: var(--about-thumbs-max);
	--product-arrow-size: var(--about-arrow-size);
}

.about-gallery .product-gallery__main-image{
	object-fit: cover;
}

.about-gallery .product-gallery__arrow::before{
	width: 6px;
	height: 6px;
}

/* product.css turns the thumbnails into a row ≤781px — the mockup 768 keeps them in a column on the right. */
@media (max-width: 781px){
	.about-gallery.product-gallery{
		flex-direction: row;
	}

	.about-gallery.product-gallery .product-gallery__main{
		flex: 0 1 var(--product-photo-width);
	}

	.about-gallery.product-gallery .product-gallery__thumbs{
		flex: 0 0 var(--product-thumb-width);
		padding: var(--product-thumbs-pad) 0;
	}

	.about-gallery.product-gallery .product-gallery__list{
		flex-direction: column;
		max-height: var(--product-thumbs-max);
	}

	.about-gallery.product-gallery .product-gallery__item{
		flex: none;
	}

	.about-gallery.product-gallery .product-gallery__arrow--prev{
		top: 0;
		bottom: auto;
		left: 50%;
		transform: translateX(-50%);
	}

	.about-gallery.product-gallery .product-gallery__arrow--next{
		top: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* ≤600px (mockup 320): one photo, no thumbnails, arrows at the bottom corners of the photo. */
@media (max-width: 600px){
	.page-sidebar .about-intro{
		grid-template-columns: minmax(0, 1fr);
	}

	.about-gallery.product-gallery{
		position: relative;
		display: block;
	}

	.about-gallery.product-gallery .product-gallery__thumbs{
		position: static;
		padding: 0;
	}

	.about-gallery.product-gallery .product-gallery__list{
		display: none;
	}

	.about-gallery.product-gallery .product-gallery__arrow--prev,
	.about-gallery.product-gallery .product-gallery__arrow--next{
		top: auto;
		bottom: var(--about-arrow-offset);
		transform: rotate(-90deg);
	}

	.about-gallery.product-gallery .product-gallery__arrow--prev{
		left: var(--about-arrow-offset);
	}

	.about-gallery.product-gallery .product-gallery__arrow--next{
		left: auto;
		right: var(--about-arrow-offset);
	}
}

/* ---------- Requisites ---------- */

.page-sidebar .about-details{
	font-size: var(--about-details-size);
	line-height: 1.3;
	color: var(--catalog-ink);
}

.page-sidebar .about-details > *{
	margin: 0 0 1.3em;
}

.page-sidebar .about-details > :last-child{
	margin-bottom: 0;
}