/* ==================== PRODUCT PAGE: /product/<товар>/ (mytoy_new.pen → «Карточка товара (new)») ==================== */

/* Каркас — как у каталога (main.catalog-page: крошки + сайдбар + __main), в __main:
     .product-page__area (2 колонки: .product-gallery | .product-page__info) + .product-tabs (секции «Описание», «Оплата и доставка»).
   __info: h1 (Playfair) → .product-specs (характеристики) → .product-page__prices (цена + старая) → order-form «Заказать».
   1920: колонки 1:1, gap 40; 768: те же 2 колонки уже; ≤600: всё колонкой. Размеры — --product-* в style.css. */

.product-page .product-page__main > *{
	margin: 0;
}

.product-page .product-page__area{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: var(--product-area-gap);
}

.product-page .product-page__area > *{
	margin: 0;
}

.product-page .product-page__info{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--product-info-gap);
	min-width: 0;
}

.product-page .product-page__info > *{
	margin: 0;
}

.product-page .product-page__title{
	font-family: var(--font-heading);
	font-size: var(--product-title-size);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text);
}

/* ---------- Галерея (блок webmaster/product-gallery): главное фото + ряд превью ---------- */

.product-gallery{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	margin: 0;
}

.product-gallery .product-gallery__main{
	height: var(--product-photo-height);
	margin: 0;
	border-radius: var(--radius-xl);
	background: var(--color-surface);
	overflow: hidden;
}

.product-gallery .product-gallery__main-link,
.product-gallery .product-gallery__main-image{
	display: block;
	width: 100%;
	height: 100%;
}

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

.product-gallery .product-gallery__main-link.has-lightbox{
	cursor: zoom-in;
}

.product-gallery .product-gallery__thumbs{
	position: static;
}

.product-gallery .product-gallery__list{
	display: flex;
	gap: var(--product-thumb-gap);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.product-gallery .product-gallery__list::-webkit-scrollbar{
	display: none;
}

.product-gallery .product-gallery__item{
	flex: 0 0 calc((100% - 3 * var(--product-thumb-gap)) / 4);
	margin: 0;
	scroll-snap-align: start;
}

.product-gallery .product-gallery__thumb{
	display: block;
	height: var(--product-thumb-height);
	box-sizing: border-box;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	overflow: hidden;
	opacity: .7;
	transition: opacity .2s ease, border-color .2s ease;
}

.product-gallery .product-gallery__thumb:hover,
.product-gallery .product-gallery__thumb.is-active{
	border-color: var(--color-accent);
	opacity: 1;
}

.product-gallery .product-gallery__thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* стрелки «соседнее фото» — по краям главного фото */
.product-gallery .product-gallery__arrow{
	position: absolute;
	top: calc(var(--product-photo-height) / 2);
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .9);
	box-shadow: var(--card-shadow);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .2s ease;
}

.product-gallery .product-gallery__arrow[hidden]{
	display: none;
}

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

.product-gallery .product-gallery__arrow--prev{
	left: 12px;
}

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

.product-gallery .product-gallery__arrow--next{
	right: 12px;
}

.product-gallery .product-gallery__arrow:hover{
	background: var(--color-accent);
}

.product-gallery .product-gallery__arrow:hover::before{
	border-color: #fff;
}

/* ---------- Характеристики (блок webmaster/product-specs) ---------- */

.product-specs{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin: 0;
}

.product-specs .product-specs__row{
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--product-spec-size);
	line-height: 1.4;
}

.product-specs .product-specs__label{
	color: var(--color-muted);
}

.product-specs .product-specs__value{
	margin: 0;
	color: var(--color-text);
	font-weight: 500;
	text-align: right;
}

/* ---------- Цена + «Заказать» ---------- */

.product-page .product-page__prices{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
}

.product-page .product-page__prices > *{
	margin: 0;
}

.product-page .product-page__price{
	font-size: var(--product-price-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-accent);
}

.product-page .product-page__old-price{
	font-size: var(--product-old-price-size);
	color: var(--color-muted);
	text-decoration: line-through;
}

/* «Заказать» = блок webmaster/order-form: пилюля по ширине текста */
.product-page .product-page__order{
	--order-btn-size: var(--btn-size);
}

.product-page .product-page__order .order-form__open-wrap{
	width: auto;
}

/* ---------- «Описание», «Оплата и доставка» (блок webmaster/product-tabs) — секции с линией сверху ---------- */

.product-tabs{
	display: flex;
	flex-direction: column;
	margin: var(--product-tabs-top) 0 0 !important;
}

.product-tabs .product-tabs__panel{
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: var(--product-section-pad) 0 0;
	border-top: 1px solid var(--color-border);
}

.product-tabs .product-tabs__panel + .product-tabs__panel{
	margin-top: var(--product-section-pad);
}

.product-tabs .product-tabs__heading{
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--product-heading-size);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text);
}

.product-tabs .product-tabs__content{
	font-size: var(--catalog-text-size);
	line-height: 1.6;
	color: var(--color-text-2);
}

.product-tabs .product-tabs__content > :first-child{
	margin-top: 0;
}

.product-tabs .product-tabs__content > :last-child{
	margin-bottom: 0;
}

/* ---------- ≤600: всё колонкой (макет 320) ---------- */

@media (max-width: 600px){
	.product-page .product-page__area{
		grid-template-columns: minmax(0, 1fr);
	}
}