/*
 * Картинки товара: скруглённые углы, никаких рамок и подложек.
 *
 * Сама картинка уже нарисована со скруглением и прозрачными углами, поэтому фон под ней обязан
 * быть прозрачным - иначе из-под скругления торчат белые уголки.
 */

.akem-product-media {
	max-width: 520px;
	margin-block-end: var(--akem-space-5);
}

.akem-product-media__image {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 18px;
	background: none;
	/* Тот же объём, что у плиток каталога: мягкая тень под скруглёнными углами. Именно filter,
	   а не box-shadow - у картинки прозрачные углы, и box-shadow обвёл бы прямоугольник. */
	filter: drop-shadow(0 8px 20px rgb(0 0 0 / 16%));
}

/* Сетка каталога: плитка это карточка целиком, без обрезки в квадрат и без обводок. */
.woocommerce ul.products li.product img,
.ct-woo-card-image img,
.ct-media-container img {
	border: 0;
	border-radius: 18px;
	background: none;
	object-fit: contain;
}

.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .ct-image-container {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Контейнер плитки Blocksy держит 1:1 и оставляет пустоту под карточкой 10:7. Пропорция
   задаётся его же переменной, поэтому перебиваем и её, и само свойство. */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .ct-image-container {
	--ratio: 10/7;
	aspect-ratio: 10 / 7;
}

/* Цена под плиткой: название и фасовки скрыты, поэтому цена оставалась висеть далеко внизу. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .ct-woo-card-price {
	margin-block-start: 8px;
	margin-block-end: 0;
}

/* Цена должна читаться как подпись к своей карточке, а не висеть между рядами: сама она прижата
   к картинке, а ряды разведены шире. */
/* The grid's own spacing lives in grid.css. A second row-gap here fought it and won by specificity,
   which is how the cards ended up 64px apart while the file describing the grid said 24. */

/* Страница товара: слева картинка, справа данные. Обёртка Blocksy - обычный блок, поэтому
   колонки задаются здесь. На узком экране всё возвращается в одну колонку. */
@media (min-width: 900px) {
	.woocommerce div.product .product-entry-wrapper {
		display: grid;
		grid-template-columns: 520px minmax(0, 1fr);
		column-gap: var(--akem-space-6);
		align-items: start;
	}

	.woocommerce div.product .product-entry-wrapper > .akem-product-media {
		grid-column: 1;
		margin-block-end: 0;
	}

	.woocommerce div.product .product-entry-wrapper > .summary {
		grid-column: 2;
		margin: 0;
	}
}

/* Заголовок "Compounds" над сеткой. Blocksy печатает его блоком .hero-section, штатного фильтра
   у блока нет, поэтому он убирается стилем и только на архиве товаров - на других страницах
   заголовки остаются. */
body.post-type-archive-product .hero-section,
body.woocommerce-shop .hero-section {
	display: none;
}

/* Пустой блок меты не должен оставлять пробел, когда печатать нечего. */
.woocommerce div.product .product_meta:empty {
	display: none;
}

/* The reserved media slot on a product page.
   The brief: every gallery slot stays genuinely blank - no bottle, no silhouette, no watermark, no
   placeholder text. So the space is held and left empty, in the same reserved surface the cards use,
   and it disappears by itself the moment a real image is attached. */
.akem-media-well {
	aspect-ratio: 1 / 1;
	width: 100%;
	background: var(--akem-well);
	border-radius: var(--akem-radius-card);
}

@media (min-width: 690px) {
	.product-entry-wrapper:has(.akem-media-well) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--akem-space-5);
		align-items: start;
	}
}