/*
 * Стилі для якорів у картках товарів.
 * Завантажується після main.css.
 */

body.single-product #product-software {
	scroll-margin-top: 205px;
}

body.single-product #product-specifications {
	scroll-margin-top: 205px;
}

body.single-product
div.product
.wpwp-top-section
.wpwp-product-main-galleries-wrap
.product-section-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: calc(100% - 79px);
	margin-top: 10px;
	margin-left: 75px;
	box-sizing: border-box;
}

body.single-product
div.product
.wpwp-top-section
.wpwp-product-main-galleries-wrap
.product-section-links[hidden] {
	display: none;
}

body.single-product
div.product
.wpwp-top-section
.wpwp-product-main-galleries-wrap
.product-section-links
.product-section-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	min-height: 60px;
	padding: 12px 16px;
	border: 1px solid var(--border-default);
	border-radius: 4px;
	color: var(--text-primary);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	background-color: transparent;
	box-sizing: border-box;
	transition:
		border-color 0.3s ease,
		color 0.3s ease,
		background-color 0.3s ease;
}

body.single-product
div.product
.wpwp-top-section
.wpwp-product-main-galleries-wrap
.product-section-links
.product-section-link[hidden] {
	display: none;
}

body.single-product
div.product
.wpwp-top-section
.wpwp-product-main-galleries-wrap
.product-section-links
.product-section-link:hover,
body.single-product
div.product
.wpwp-top-section
.wpwp-product-main-galleries-wrap
.product-section-links
.product-section-link:focus-visible {
	border-color: var(--accent-primary);
	color: var(--accent-primary);
	background-color: rgba(243, 202, 67, 0.04);
}

body.single-product
div.product
.wpwp-top-section
.wpwp-product-main-galleries-wrap
.product-section-links
.product-section-link-title {
	min-width: 0;
	overflow-wrap: anywhere;
}

body.single-product
div.product
.wpwp-top-section
.wpwp-product-main-galleries-wrap
.product-section-links
.product-section-link-icon {
	position: relative;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	margin-left: 12px;
	border: 1px solid rgba(243, 202, 67, 0.35);
	border-radius: 50%;
	box-sizing: border-box;
}

body.single-product
div.product
.wpwp-top-section
.wpwp-product-main-galleries-wrap
.product-section-links
.product-section-link-icon::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--accent-primary);
	border-bottom: 2px solid var(--accent-primary);
	transform: translate(-50%, -65%) rotate(45deg);
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	body.single-product
	div.product
	.wpwp-top-section
	.wpwp-product-main-galleries-wrap
	.product-section-links {
		width: 100%;
		margin-left: 0;
	}
}

@media (max-width: 576px) {
	body.single-product
	div.product
	.wpwp-top-section
	.wpwp-product-main-galleries-wrap
	.product-section-links {
		grid-template-columns: 1fr;
		width: 100%;
		margin-left: 0;
	}
}

/*
 * Центрування блоку на головній.
 *  Категорія товарів з фото на жовтому фоні
 */

/*
 * Центрування всього блока категорій на головній:
 * список категорій + зображення.
 */
@media screen and (min-width: 1025px) {
	body.home
	.product-categories-list-block
	.product-categories-list-wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 335px;
		align-items: center;
		gap: 80px;
		width: 100%;
		max-width: 840px;
		margin-right: auto;
		margin-left: auto;
	}

	body.home
	.product-categories-list-block
	.categories-list-col {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 0;
	}

	body.home
	.product-categories-list-block
	.categories-list-col
	.product-category-link {
		width: fit-content;
		max-width: 100%;
	}

	body.home
	.product-categories-list-block
	.categories-preview-col {
		position: static;
		top: auto;
		right: auto;
		width: 335px;
		transform: none;
	}
}

body.home
.product-categories-list-block
.product-categories-list-wrapper
.categories-preview-col
.category-preview-item
.img-wrap
img {
	height: 332px;
}