/**
 * Ruby Fixes — макет страницы товара (Woodmart).
 *
 * 1. Ограничение высоты фото галереи.
 * 2. Сужение колонки галереи + расширение краткого описания.
 * 3. Липкая правая колонка (цена/кнопки) на десктопе.
 *
 * Переменные можно переопределить локально, не трогая правила ниже.
 */

:root {
	--ruby-gallery-max-h: 650px;   /* максимальная высота фото товара (≈ +16% к 560px) */
	--ruby-gallery-width: 47%;     /* доля ширины колонки галереи на десктопе (≈ +12% к 42%) */
	--ruby-sticky-offset: 120px;   /* отступ сверху для «липкой» колонки */
}

/* ------------------------------------------------------------------ */
/* 1. Ограничиваем высоту изображения галереи                          */
/* ------------------------------------------------------------------ */
.single-product-page .product-images .woocommerce-product-gallery__image img,
.single-product-page .product-images .wd-single-image img,
.single-product-page .product-images .wd-carousel-item img {
	max-height: var(--ruby-gallery-max-h);
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

/* Контейнер слайда галереи — центрируем фото по горизонтали */
.single-product-page .product-images .woocommerce-product-gallery__image,
.single-product-page .product-images .wd-single-image {
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* 2 + 3. Десктопная сетка: узкая галерея, широкое описание, sticky     */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
	.single-product-page .product-image-summary-inner > .product-images {
		flex: 0 0 var(--ruby-gallery-width);
		max-width: var(--ruby-gallery-width);
	}

	.single-product-page .product-image-summary-inner > .summary.entry-summary {
		flex: 0 0 calc(100% - var(--ruby-gallery-width));
		max-width: calc(100% - var(--ruby-gallery-width));
	}

	/* Правая колонка следует за скроллом, пока высокая галерея ещё видна */
	.single-product-page .product-image-summary-inner > .summary.entry-summary {
		position: -webkit-sticky;
		position: sticky;
		top: var(--ruby-sticky-offset);
		align-self: flex-start;
	}
}

/* ================================================================== */
/* Блок отзывов (Customer Reviews for WooCommerce) — минимализм        */
/* Приводим к лёгкому виду сайта: без «глянцевых» жёлтых шкал,          */
/* серых боксов и инсет-теней; акценты — в фирменном цвете темы.        */
/* Цвета берём из переменных Woodmart, чтобы совпадать с сайтом.        */
/* ================================================================== */

/* Сводка: убираем серый бокс, оставляем тонкую рамку */
#reviews .cr-summaryBox-wrap {
	background-color: transparent;
	border: 1px solid var(--wd-form-brd-color, rgba(0, 0, 0, 0.08));
	border-radius: var(--wd-brd-radius, 4px);
	padding: 16px 20px;
}

/* Крупная средняя оценка — спокойнее и тоньше */
#reviews .cr-summaryBox-wrap .cr-average-rating {
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wd-title-color, #242424);
}

#reviews .cr-summaryBox-wrap .cr-total-rating-count {
	font-size: 13px;
	line-height: 1.4;
	color: var(--wd-text-color, #777);
}

/* Гистограмма: плоская тонкая дорожка без теней */
#reviews .ivole-meter {
	height: 8px;
	background: rgba(0, 0, 0, 0.06);
	box-shadow: none;
	border-radius: 4px;
}

/* Полоса заполнения — плоская, в фирменном цвете */
#reviews .ivole-meter .ivole-meter-bar {
	background: var(--wd-primary-color, #d99aa3);
	background-image: none;
	box-shadow: none;
	border-radius: 4px;
}

#reviews .ivole-meter .ivole-meter-bar:before {
	display: none;
}

/* Подписи строк гистограммы — в общий тон текста */
#reviews .cr-histogramTable tr.ivole-histogramRow .ivole-histogram-a,
#reviews .cr-histogramTable tr.ivole-histogramRow .cr-histogram-a {
	color: var(--wd-text-color, #777);
}

/* Поле поиска отзывов — как обычные формы сайта */
#reviews.cr-reviews-ajax-reviews .cr-ajax-search {
	margin: 18px 0;
}

#reviews.cr-reviews-ajax-reviews .cr-input-text,
#reviews .cr-ajax-search input[type="text"] {
	border: 1px solid var(--wd-form-brd-color, rgba(0, 0, 0, 0.1));
	border-color: var(--wd-form-brd-color, rgba(0, 0, 0, 0.1));
	border-radius: var(--wd-brd-radius, 4px);
	background-color: var(--wd-form-bg, #fff);
	box-shadow: none;
	height: var(--wd-form-height, 42px);
}

#reviews.cr-reviews-ajax-reviews .cr-input-text:focus,
#reviews .cr-ajax-search input[type="text"]:focus {
	border-color: var(--wd-form-brd-color-focus, rgba(0, 0, 0, 0.15));
	box-shadow: none;
}

/* Строка «N відгуків / сортування» — без серой плашки */
#reviews.cr-reviews-ajax-reviews .cr-count-row {
	background-color: transparent;
	border-bottom: 1px solid var(--wd-form-brd-color, rgba(0, 0, 0, 0.08));
	padding: 8px 0;
	margin: 16px 0;
}

/* Кнопка «Додати відгук» — в нативном стиле кнопок сайта (как «Додати в кошик»). */
/* Селектор с .cr-reviews-ajax-reviews повторяет специфичность правила плагина,   */
/* иначе дефолтная «серая» кнопка плагина перебивает наши стили.                  */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 5px 20px;
	min-height: var(--btn-height, 42px);
	border: 0 solid transparent;
	border-radius: var(--btn-accented-brd-radius, var(--wd-brd-radius, 0));
	color: var(--btn-accented-color, #fff);
	background: var(--btn-accented-bgcolor, var(--wd-primary-color, #d99aa3));
	box-shadow: var(--btn-accented-box-shadow, none);
	letter-spacing: normal;
	text-transform: var(--btn-accented-transform, var(--btn-transform, uppercase));
	font-weight: var(--btn-accented-font-weight, var(--btn-font-weight, 600));
	font-family: var(--btn-accented-font-family, var(--btn-font-family, inherit));
	font-style: var(--btn-accented-font-style, var(--btn-font-style, normal));
	line-height: 1.2;
	transition: background-color 0.25s ease, color 0.25s ease;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review:hover {
	color: var(--btn-accented-color-hover, var(--btn-accented-color, #fff));
	background: var(--btn-accented-bgcolor-hover, var(--wd-primary-color, #d99aa3));
}