/* Shared slider grid for homepage best sellers + PDP related products */
/* CSS Variables for shared styling - ensures consistency between .best-selling-things and .related-products */
:root {
	--product-grid-container-width: min(100%, 1440px);
	--product-grid-padding-top: clamp(24px, 3vw, 64px);
	--product-grid-padding-sides: clamp(16px, 2vw, 24px);
	--product-grid-padding-bottom: clamp(16px, 3vw, 48px);
	--product-grid-padding-top-related: clamp(32px, 4vw, 72px);
	--product-grid-gap: clamp(16px, 2vw, 32px);
	--product-grid-title-font-family: var(--font-family-nunito, 'Nunito', sans-serif);
	--product-grid-title-font-size: clamp(16px, 3.33vw, 48px);
	--product-grid-title-font-weight: 700;
	--product-grid-title-color: #000000;
	--product-grid-title-letter-spacing: 0.04em;
	--product-grid-track-gap: clamp(14px, 1.5vw, 24px);
	--product-grid-track-padding: clamp(16px, 2vw, 32px);
	--product-grid-card-gap: clamp(8px, 1vw, 12px);
	--product-grid-card-width-mobile: clamp(210px, 60vw, 295px);
	--product-grid-card-width-tablet: clamp(220px, 26vw, 260px);
	--product-grid-card-width-desktop: clamp(210px, 20.49vw, 295px);
	--product-grid-card-height-desktop: clamp(291px, 28.4vw, 409px);
	--product-grid-image-height-mobile: clamp(180px, 60vw, 298px);
	--product-grid-image-height-desktop: clamp(212px, 20.69vw, 298px);
	--product-grid-image-border-radius: 20px;
	--product-grid-image-bg: #ffffff;
	--product-grid-image-shadow: 0 14px 30px rgba(170, 184, 210, 0.24);
	--product-grid-product-name-font-family: var(--font-family-nunito, 'Nunito', sans-serif);
	--product-grid-product-name-font-weight: 700;
	--product-grid-product-name-font-size: clamp(14px, 1.5vw, 20px);
	--product-grid-product-name-color: #000000;
	--product-grid-rating-gap: 8px;
	--product-grid-rating-star-gap: 2px;
	--product-grid-rating-star-size: clamp(16px, 1.2vw, 25px);
	--product-grid-rating-text-font-family: var(--font-family-nunito_sans, 'Nunito Sans', sans-serif);
	--product-grid-rating-text-font-size: clamp(11px, 1.1vw, 14px);
	--product-grid-rating-text-color: #666666;
	--product-grid-price-gap: 8px;
	--product-grid-price-font-family: var(--font-family-nunito_sans, 'Nunito Sans', sans-serif);
	--product-grid-price-font-size: clamp(16px, 2vw, 20px);
	--product-grid-price-font-weight: 700;
	--product-grid-price-color: #000000;
	--product-grid-old-price-font-size: clamp(14px, 1.8vw, 18px);
	--product-grid-old-price-font-weight: 400;
	--product-grid-old-price-color: #999999;
	--product-grid-pagination-gap: clamp(6px, 0.7vw, 10px);
	--product-grid-pagination-padding-top: 8px;
	--product-grid-pagination-padding-top-desktop: clamp(16px, 1.5vw, 24px);
	--product-grid-pagination-dot-size: clamp(6px, 0.7vw, 10px);
	--product-grid-pagination-dot-bg: #333333;
	--product-grid-pagination-dot-opacity: 0.3;
	--product-grid-pagination-dot-active-opacity: 1;
	--product-grid-pagination-dot-active-scale: 1.4;
	--product-grid-rating-container-min-width-desktop: clamp(120px, 11.11vw, 160px);
	--product-grid-price-container-width-desktop: clamp(114px, 11.18vw, 161px);
}

/* Base styles for both .best-selling-things and .related-products */
/* Also handles .best-selling-things.related-products when both classes are present */
.best-selling-things,
.related-products,
.best-selling-things.related-products {
	width: var(--product-grid-container-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

/* Section title styling - shared between both sections */
.best-selling-things .our-best-sellers,
.related-products .our-best-sellers,
.best-selling-things.related-products .our-best-sellers {
	font-family: var(--product-grid-title-font-family);
	font-size: var(--product-grid-title-font-size);
	font-weight: var(--product-grid-title-font-weight);
	color: var(--product-grid-title-color);
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	letter-spacing: var(--product-grid-title-letter-spacing);
}

/* Product track container - shared styling */
.best-selling-things .frame-1-3,
.related-products .frame-1-3,
.best-selling-things.related-products .frame-1-3 {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--product-grid-track-gap);
	padding: 0 var(--product-grid-track-padding);
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Hide scrollbar for track container */
.best-selling-things .frame-1-3::-webkit-scrollbar,
.related-products .frame-1-3::-webkit-scrollbar,
.best-selling-things.related-products .frame-1-3::-webkit-scrollbar {
	display: none;
}

/* Product card containers - shared styling */
.best-selling-things .frame-8,
.best-selling-things .frame-8-1,
.related-products .frame-8,
.related-products .frame-8-1,
.best-selling-things.related-products .frame-8,
.best-selling-things.related-products .frame-8-1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--product-grid-card-gap);
	flex: 0 0 var(--product-grid-card-width-mobile);
	max-width: var(--product-grid-card-width-mobile);
	scroll-snap-align: start;
	text-decoration: none;
}

/* Product image container - shared styling */
.best-selling-things .image,
.related-products .image,
.best-selling-things.related-products .image {
	width: 100%;
	border-radius: var(--product-grid-image-border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Product image - shared styling */
.best-selling-things .image img,
.related-products .image img,
.best-selling-things.related-products .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Force square thumbnails for best sellers while keeping responsive sizing */
.best-selling-things .image {
	aspect-ratio: 1 / 1;
	height: auto;
}
.best-selling-things .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Product name/title - shared styling */
.best-selling-things .luvlingo,
.related-products .luvlingo,
.best-selling-things.related-products .luvlingo {
	width: 100%;
	font-family: var(--product-grid-product-name-font-family);
	font-weight: var(--product-grid-product-name-font-weight);
	font-size: var(--product-grid-product-name-font-size);
	color: var(--product-grid-product-name-color);
	margin: 0;
	text-align: left;
}

/* Rating container - shared styling */
.best-selling-things .rating-container,
.related-products .rating-container,
.best-selling-things.related-products .rating-container {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--product-grid-rating-gap);
}

/* Rating stars container - shared styling */
.best-selling-things .rating-container .star,
.related-products .rating-container .star,
.best-selling-things.related-products .rating-container .star {
	display: inline-flex;
	align-items: center;
	gap: var(--product-grid-rating-star-gap);
}

/* Rating star images - using same method as reviews section (img/star-1-4.svg) */
.best-selling-things .rating-container .star .review-star,
.related-products .rating-container .star .review-star,
.best-selling-things.related-products .rating-container .star .review-star {
	width: var(--product-grid-rating-star-size, 14px);
	height: var(--product-grid-rating-star-size, 14px);
	display: inline-block;
	flex-shrink: 0;
	object-fit: contain;
	margin: 0;
}

/* Filled star (full rating) - same styling as reviews */
.best-selling-things .rating-container .star .review-star--filled,
.related-products .rating-container .star .review-star--filled,
.best-selling-things.related-products .rating-container .star .review-star--filled {
	opacity: 1;
	filter: brightness(1);
}

/* Half star - same styling as reviews */
.best-selling-things .rating-container .star .review-star--half,
.related-products .rating-container .star .review-star--half,
.best-selling-things.related-products .rating-container .star .review-star--half {
	opacity: 0.6;
	filter: brightness(0.8);
}

/* Empty star - same styling as reviews */
.best-selling-things .rating-container .star .review-star--empty,
.related-products .rating-container .star .review-star--empty,
.best-selling-things.related-products .rating-container .star .review-star--empty {
	opacity: 0.3;
	filter: brightness(0.5) grayscale(0.3);
}

/* Rating text - shared styling */
.best-selling-things .rating-text,
.related-products .rating-text,
.best-selling-things.related-products .rating-text {
	font-family: var(--product-grid-rating-text-font-family);
	font-size: var(--product-grid-rating-text-font-size);
	color: var(--product-grid-rating-text-color);
	margin: 0;
}

/* Price container - shared styling */
.best-selling-things .rupees,
.best-selling-things .rupees-1,
.related-products .rupees,
.related-products .rupees-1,
.best-selling-things.related-products .rupees,
.best-selling-things.related-products .rupees-1 {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--product-grid-price-gap);
}

/* Current price - shared styling */
.best-selling-things .price,
.best-selling-things .price-1,
.related-products .price,
.related-products .price-1,
.best-selling-things.related-products .price,
.best-selling-things.related-products .price-1 {
	font-family: var(--product-grid-price-font-family);
	font-size: var(--product-grid-price-font-size);
	font-weight: var(--product-grid-price-font-weight);
	color: var(--product-grid-price-color);
	margin: 0;
}

/* Old/strikethrough price - shared styling */
.best-selling-things .old-price,
.related-products .old-price,
.best-selling-things.related-products .old-price {
	font-family: var(--product-grid-price-font-family);
	font-size: var(--product-grid-old-price-font-size);
	font-weight: var(--product-grid-old-price-font-weight);
	color: var(--product-grid-old-price-color);
	text-decoration: line-through;
	margin: 0;
}

/* Pagination dots container - shared styling */
.best-selling-things .pagination-dots,
.related-products .pagination-dots,
.best-selling-things.related-products .pagination-dots {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--product-grid-pagination-gap);
	padding-top: var(--product-grid-pagination-padding-top);
}

/* Pagination dot - shared styling */
.best-selling-things .pagination-dots .dot,
.related-products .pagination-dots .dot,
.best-selling-things.related-products .pagination-dots .dot {
	width: var(--product-grid-pagination-dot-size);
	height: var(--product-grid-pagination-dot-size);
	border-radius: 50%;
	background: var(--product-grid-pagination-dot-bg);
	display: block;
	opacity: var(--product-grid-pagination-dot-opacity);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Active pagination dot - shared styling */
.best-selling-things .pagination-dots .dot.active,
.related-products .pagination-dots .dot.active,
.best-selling-things.related-products .pagination-dots .dot.active {
	opacity: var(--product-grid-pagination-dot-active-opacity);
	transform: scale(var(--product-grid-pagination-dot-active-scale));
}

/* Tablet breakpoint - shared responsive styling */
@media (min-width: 768px) {
	.best-selling-things .frame-1-3,
	.related-products .frame-1-3,
	.best-selling-things.related-products .frame-1-3 {
		scroll-snap-type: none; /* Allow free-flow grid on larger screens while JS handles snapping. */
	}

	.best-selling-things .frame-8,
	.best-selling-things .frame-8-1,
	.related-products .frame-8,
	.related-products .frame-8-1,
	.best-selling-things.related-products .frame-8,
	.best-selling-things.related-products .frame-8-1 {
		flex: 0 0 var(--product-grid-card-width-tablet);
		max-width: var(--product-grid-card-width-tablet);
	}
}

/* Desktop breakpoint - shared responsive styling */
@media (min-width: 1024px) {
	.best-selling-things,
	.related-products,
	.best-selling-things.related-products {
		height: auto;
	}

	.best-selling-things .frame-1-3,
	.related-products .frame-1-3,
	.best-selling-things.related-products .frame-1-3 {
		overflow-x: auto; /* Enable horizontal scrolling on desktop */
		overflow-y: visible; /* Allow vertical overflow to prevent content clipping */
		padding: 0;
	}

	.best-selling-things .frame-8,
	.best-selling-things .frame-8-1,
	.related-products .frame-8,
	.related-products .frame-8-1,
	.best-selling-things.related-products .frame-8,
	.best-selling-things.related-products .frame-8-1 {
		flex: 0 0 var(--product-grid-card-width-desktop);
		max-width: var(--product-grid-card-width-desktop);
	}

	.best-selling-things .image,
	.related-products .image,
	.best-selling-things.related-products .image {
		box-shadow: none;
	}

	.best-selling-things .image img,
	.related-products .image img,
	.best-selling-things.related-products .image img {
		object-fit: contain;
	}

	.best-selling-things .rating-container,
	.related-products .rating-container,
	.best-selling-things.related-products .rating-container {
		min-width: var(--product-grid-rating-container-min-width-desktop);
	}

	.best-selling-things .pagination-dots,
	.related-products .pagination-dots,
	.best-selling-things.related-products .pagination-dots {
		padding-top: var(--product-grid-pagination-padding-top-desktop);
	}
}