/**
 * Product Carousels Styles
 * Figma-matched styles for "You May Also Like" and "Recently Viewed Items"
 * Native CSS scroll-snap carousel (no Owl Carousel dependency).
 *
 * Figma reference:
 *   Desktop: node 25341:53937
 *   Mobile:  node 26677:41637
 */

/* ===== Section containers ===== */
.single-product .related.products,
.single-product :is(.recently-viewed-products, #recently-viewed-section) {
	padding: 40px 0;
	max-width: var(--theme-normal-container-max-width, 1384px);
	margin-left: auto;
	margin-right: auto;
}

/* ===== Section heading: Playfair Display 20px, left-aligned ===== */
.single-product .related.products > h2,
.single-product .related.products > .ct-module-title,
.single-product :is(.recently-viewed-products, #recently-viewed-section) > h2,
.single-product :is(.recently-viewed-products, #recently-viewed-section) > .ct-module-title {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: #4a4a4a;
	text-align: left;
	margin: 0 0 24px;
	display: block;
}

/* ===== Carousel track: native scroll-snap ===== */
.single-product .related.products .products,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .products {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-bottom: 4px;
	align-items: stretch;
}

.single-product .related.products .products::-webkit-scrollbar,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .products::-webkit-scrollbar {
	display: none;
}

/* ===== Product card ===== */
.single-product .related.products .products > .product,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .products > .product {
	flex: 0 0 calc((100% - 48px) / 4);
	min-width: 268px;
	max-width: 365.5px;
	scroll-snap-align: start;
	background: #ffffff;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	align-self: stretch;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ===== Image: 336/240 landscape aspect ratio ===== */
.single-product .related.products .product > figure,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product > figure {
	margin: 0;
	position: relative;
	width: 100%;
	aspect-ratio: 336 / 240;
	overflow: hidden;
	display: block;
}

.single-product .related.products .product .ct-media-container,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .ct-media-container {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	overflow: hidden;
	display: block;
}

.single-product .related.products .product .ct-media-container img,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== Card content area: 16px horizontal padding ===== */
.single-product .related.products .product > :not(figure):not(.gtm4wp_productdata):not(.klaviyo-star-rating-widget),
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product > :not(figure):not(.gtm4wp_productdata):not(.klaviyo-star-rating-widget) {
	padding-left: 16px;
	padding-right: 16px;
}

.single-product .related.products .product > .woocommerce-loop-product__title,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product > .woocommerce-loop-product__title {
	padding-top: 16px;
}

.single-product .related.products .product > .ct-woo-card-actions,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product > .ct-woo-card-actions {
	padding-bottom: 16px;
	margin-top: auto !important;
}

/* ===== Hide vendor "by NATUREPEDIC" line (not in Figma) ===== */
.single-product .related.products .product .vendor-data,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .vendor-data {
	display: none !important;
}

/* ===== Card title: Playfair Display 18px ===== */
.single-product .related.products .product .woocommerce-loop-product__title,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .woocommerce-loop-product__title {
	font-family: 'Playfair Display', serif;
	font-size: 18px;
	font-weight: 400;
	color: #4a4a4a;
	line-height: 1.3;
	margin: 0 0 4px;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.single-product .related.products .product .woocommerce-loop-product__title a,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .woocommerce-loop-product__title a {
	color: inherit;
	text-decoration: none;
	word-break: normal;
	overflow-wrap: normal;
}

@media (max-width: 767px) {
	.single-product .related.products .product .woocommerce-loop-product__title,
	.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .woocommerce-loop-product__title {
		font-size: 15px;
	}
}

/* ===== Purity Rating: inline (dots + label horizontally) ===== */
.single-product .related.products .product .purity-data,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-data {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 4px 0;
}

.single-product .related.products .product .purity-rating-tip,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-rating-tip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	order: 1;
}

/* Render 3 purity dots via box-shadow trick for pixel-perfect circles.
 * The element is one 10×10 circle (--purity-d1); two box-shadow offsets
 * draw the second and third circles to the right. Always 3 dots regardless
 * of how many .fa-circle spans the template injects. */
.single-product .related.products .product .purity-rating-tip,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-rating-tip {
	--purity-d1: #d9d9d9;
	--purity-d2: #d9d9d9;
	--purity-d3: #d9d9d9;
	display: inline-block !important;
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background: var(--purity-d1) !important;
	background-image: none !important;
	box-shadow: 17px 0 0 0 var(--purity-d2), 34px 0 0 0 var(--purity-d3) !important;
	margin-right: 34px; /* reserve space for the two shadow circles */
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	border: none !important;
	vertical-align: middle;
}

/* Hide the snippet's actual circle spans (handles both markup variants:
 * `<span class="fa fa-circle">` on local, `<span class="circle">` on staging) */
.single-product .related.products .product .purity-rating-tip .fa-circle,
.single-product .related.products .product .purity-rating-tip .circle,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-rating-tip .fa-circle,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-rating-tip .circle {
	display: none !important;
}

/* Hide the snippet's own label — handles both `<p>Purity Ratings</p>` (local)
 * and `<span class="label">Purity Ratings</span>` (staging). The label is
 * re-rendered via ::after on .purity-data below so we get correct order. */
.single-product .related.products .product .purity-data > p,
.single-product .related.products .product .purity-data > span.label,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-data > p,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-data > span.label {
	display: none !important;
}

.single-product .related.products .product .purity-rating-tip[data-template="rating-1"],
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-rating-tip[data-template="rating-1"] {
	--purity-d1: #2b9947;
}

.single-product .related.products .product .purity-rating-tip[data-template="rating-2"],
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-rating-tip[data-template="rating-2"] {
	--purity-d1: #2b9947;
	--purity-d2: #2b9947;
}

.single-product .related.products .product .purity-rating-tip[data-template="rating-3"],
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-rating-tip[data-template="rating-3"] {
	--purity-d1: #2b9947;
	--purity-d2: #2b9947;
	--purity-d3: #2b9947;
}

/* "Purity Rating" label inserted via ::after on the parent .purity-data
 * so it sits inline AFTER the dots (order:99 forces it past any other items) */
.single-product .related.products .product .purity-data::after,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-data::after {
	content: 'Purity Rating';
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	color: #939598;
	white-space: nowrap;
	order: 99;
}

.single-product .related.products .product .purity-data .purity-rating-tip,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-data .purity-rating-tip {
	order: 1;
}

/* Hide the popup tooltip content within the card */
.single-product .related.products .product .purity-rating-tip-content,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .purity-rating-tip-content {
	display: none !important;
}

/* ===== Price: strikethrough (gray) inline with red sale price ===== */
.single-product .related.products .product .price,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-family: 'Barlow', sans-serif;
	font-size: 16px;
	color: #4a4a4a;
	margin: 4px 0 0;
}

/* Regular price (no sale): default 16px dark */
.single-product .related.products .product .price .regular-price,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price .regular-price {
	color: #4a4a4a;
	font-weight: 500;
	font-size: 16px;
}

.single-product .related.products .product .price .regular-price .amount,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price .regular-price .amount {
	font-size: 16px;
	color: #4a4a4a;
}

/* Strikethrough: ONLY when wrapped in <del> (sale prices) */
.single-product .related.products .product .price del,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price del {
	color: #4a4a4a;
	font-weight: 400;
	font-size: 14px;
	text-decoration: line-through;
	opacity: 1;
}

.single-product .related.products .product .price del .amount,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price del .amount {
	font-size: 14px;
	color: #4a4a4a;
	font-weight: 400;
}

/* Sale price — red */
.single-product .related.products .product .price .sale-price,
.single-product .related.products .product .price .sale-price strong,
.single-product .related.products .product .price ins,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price .sale-price,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price .sale-price strong,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price ins {
	color: #ef4444 !important;
	text-decoration: none;
	font-weight: 500;
	font-size: 16px;
}

.single-product .related.products .product .price .sale-price .amount,
.single-product .related.products .product .price ins .amount,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price .sale-price .amount,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .price ins .amount {
	color: #ef4444 !important;
	font-size: 16px;
}

/* ===== CTA button: green pill ===== */
/* margin-top: auto is set above (line ~119) to push button to card bottom */

.single-product .related.products .product .ct-woo-card-actions .button,
.single-product .related.products .product .ct-woo-card-actions .added_to_cart,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .ct-woo-card-actions .button,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .ct-woo-card-actions .added_to_cart {
	background-color: #2b9947 !important;
	color: #ffffff !important;
	border-color: #2b9947 !important;
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-transform: capitalize;
	border-radius: 6px;
	padding: 0 24px;
	height: 40px;
	line-height: 40px;
	width: 100%;
	text-align: center;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

.single-product .related.products .product .ct-woo-card-actions .button:hover,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .ct-woo-card-actions .button:hover {
	background-color: #248040 !important;
	border-color: #248040 !important;
}

@media (max-width: 767px) {
	.single-product .related.products .product .ct-woo-card-actions .button,
	.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .ct-woo-card-actions .button {
		font-size: 12px;
		padding: 0 4px;
		letter-spacing: 0;
	}
}

/* ===== SALE badge ===== */
.single-product .related.products .product .onsale,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: #e53e3e;
	color: #ffffff;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 2px;
	text-transform: uppercase;
}

/* ===== Wishlist heart: white circle, bottom-right of image ===== */
.single-product .related.products .product .ct-wishlist-button,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .ct-wishlist-button {
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 2;
	width: 28px;
	height: 28px;
	background: #ffffff;
	border-radius: 9999px;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.single-product .related.products .product .ct-wishlist-button svg,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .product .ct-wishlist-button svg {
	width: 14px;
	height: 14px;
}

/* ===== Dot pagination ===== */
.carousel-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding: 0;
}

.carousel-dots .dot {
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: #d9d9d9;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.carousel-dots .dot:hover {
	background: #b0b0b0;
}

.carousel-dots .dot.active {
	width: 32px;
	height: 8px;
	background: #2b9947;
}

/* ===== Recently viewed loading indicator ===== */
.recently-viewed-loading {
	text-align: center;
	padding: 20px;
	color: #999;
	font-size: 14px;
}

.recently-viewed-loading .loading-spinner {
	width: 24px;
	height: 24px;
	border: 2px solid #e0e0e0;
	border-top-color: #2b9947;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin: 0 auto 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.recently-viewed-loading.fade-out {
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* ===== Responsive: desktop 4 cards, mobile/tablet 2 cards ===== */
@media (max-width: 999px) {
	.single-product .related.products,
	.single-product :is(.recently-viewed-products, #recently-viewed-section) {
		padding: 32px 24px;
	}

	.single-product .related.products .products > .product,
	.single-product :is(.recently-viewed-products, #recently-viewed-section) .products > .product {
		flex: 0 0 calc((100% - 16px) / 2);
		min-width: 0;
		max-width: none;
	}
}

@media (max-width: 767px) {
	.single-product .related.products,
	.single-product :is(.recently-viewed-products, #recently-viewed-section) {
		padding: 24px 16px;
	}

	.single-product .related.products > h2,
	.single-product .related.products > .ct-module-title,
	.single-product :is(.recently-viewed-products, #recently-viewed-section) > h2,
	.single-product :is(.recently-viewed-products, #recently-viewed-section) > .ct-module-title {
		font-size: 18px;
	}

	.single-product .related.products .products > .product,
	.single-product :is(.recently-viewed-products, #recently-viewed-section) .products > .product {
		flex: 0 0 calc((100% - 12px) / 2);
	}
}

/* ===== Hide Owl Carousel nav arrows ===== */
.single-product .related.products .owl-nav,
.single-product :is(.recently-viewed-products, #recently-viewed-section) .owl-nav {
	display: none !important;
}