/**
 * Product Blocks — Related Products & Complete the Look
 * Extracted from theme/style.css. Theme rules have been commented out.
 */

/* ── Headings ─────────────────────────────────────────────────────────── */

.related-product h2,
.complete-the-look h2 {
	text-align: center;
	color: var(--black);
	font-size: 2.5rem;
	font-weight: 400;
	margin: 0 0 60px;
}

/* ── Section padding ─────────────────────────────────────────────────── */

.single-product .related-product,
.single-product .complete-the-look {
	padding: 60px 0 0;
}

/* ── Product item layout (non-Slick) ─────────────────────────────────── */

.single-product .related-product ul.products li.product,
.single-product .complete-the-look ul.products li.product {
	overflow: hidden;
	margin: 0 0 20px 2.094%;
	width: 23.429%;
}

.single-product .related-product ul.products li.product.last,
.single-product .complete-the-look ul.products li.product.last {
	margin: 0 0 20px 0%;
}

/* ── Product item layout (Slick) ─────────────────────────────────────── */

.single-product .related-product ul.products.slick-initialized,
.single-product .complete-the-look ul.products.slick-initialized {
	margin: 0 -15px;
}

.single-product .related-product ul.products.slick-initialized li.product,
.single-product .complete-the-look ul.products.slick-initialized li.product {
	margin: 0;
	clear: none;
	padding: 0 15px;
}

/* ── Product title ───────────────────────────────────────────────────── */

.single-product .related-product ul.products li.product h2.woocommerce-loop-product__title,
.single-product .complete-the-look ul.products li.product h2.woocommerce-loop-product__title {
	padding: 0 0 10px;
	font-size: 1rem;
	text-align: center;
	line-height: 1.5;
	height: 32px;
	overflow-y: hidden;
	font-weight: 400;
}

/* ── Product image ───────────────────────────────────────────────────── */

.single-product .related-product ul.products li.product .product-grid-image-container a img,
.single-product .complete-the-look ul.products li.product .product-grid-image-container a img {
	margin: 0;
}

.related-product ul.products li.product .product-grid-image-container,
.complete-the-look ul.products li.product .product-grid-image-container {
	position: relative;
}

/* ── Slick arrows ────────────────────────────────────────────────────── */

.single-product .related-product ul.products.slick-initialized button.slick-arrow,
.single-product .complete-the-look ul.products.slick-initialized button.slick-arrow {
	background-color: #fff;
	width: 40px;
	height: 80px;
	margin-top: -90px;
	opacity: 0.4;
	z-index: 2;
}

.single-product .related-product ul.products.slick-initialized button.slick-arrow:hover,
.single-product .complete-the-look ul.products.slick-initialized button.slick-arrow:hover {
	opacity: 1;
}

/* RTL arrow icons */
[dir='rtl'] .related-product ul.products.slick-initialized button.slick-arrow.slick-next:before,
[dir='rtl'] .complete-the-look ul.products.slick-initialized button.slick-arrow.slick-next:before {
	content: url( ../../../../themes/zipnet/assets/images/icons/arrow-left.svg );
	position: relative;
	left: -5px;
}

[dir='rtl'] .related-product ul.products.slick-initialized button.slick-arrow.slick-next,
[dir='rtl'] .complete-the-look ul.products.slick-initialized button.slick-arrow.slick-next {
	border-radius: 0 50px 50px 0 !important;
	left: 15px;
}

[dir='rtl'] .related-product ul.products.slick-initialized button.slick-arrow.slick-prev:before,
[dir='rtl'] .complete-the-look ul.products.slick-initialized button.slick-arrow.slick-prev:before {
	content: url( ../../../../themes/zipnet/assets/images/icons/arrow-right.svg );
	position: relative;
	right: -5px;
}

[dir='rtl'] .related-product ul.products.slick-initialized button.slick-arrow.slick-prev,
[dir='rtl'] .complete-the-look ul.products.slick-initialized button.slick-arrow.slick-prev {
	border-radius: 50px 0 0 50px !important;
	right: 15px;
}

/* ── Responsive: 1024px ──────────────────────────────────────────────── */

@media screen and (max-width: 1024px) {
	.single-product .related-product,
	.single-product .complete-the-look {
		padding: 0 0 60px;
	}
}

/* ── Responsive: 782px ───────────────────────────────────────────────── */

@media screen and (max-width: 782px) {
	.single-product .related-product,
	.single-product .complete-the-look {
		padding: 0 0 60px;
	}

	.related-product .related.products h2,
	.single-product .related-product h2,
	.single-product .complete-the-look h2 {
		font-size: 2rem;
		margin: 0 0 30px;
	}
}

/* ── Responsive: 480px ───────────────────────────────────────────────── */

@media screen and (max-width: 480px) {
	.related-product .related.products h2 {
		font-size: 1.4285rem;
	}
}