/**
 * Best Seller Product for You Block
 * 
 * Full-width section with promo image on left and product slider on right
 *
 * @package Kloira
 * @since 1.0.0
 */

/* ==========================================================================
   Section Container - Full Width
   ========================================================================== */

.best-seller-block {
	position: relative;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	padding: 100px 0;
	background: #F5F6FA;
	overflow: visible;
}

.best-seller-block__inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	gap: 25px;
}

/* ==========================================================================
   Left Side: Promo Section
   ========================================================================== */

.best-seller-block__promo {
	position: relative;
	flex-shrink: 0;
	width: 500px;
	height: 500px;
	overflow: hidden;
}

.best-seller-block__promo-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.best-seller-block__promo-content {
	position: absolute;
	top: 50px;
	left: 50px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	max-width: 380px;
}

.best-seller-block__title {
	margin: 0;
	font-family: 'DM Serif Display', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 44px;
	line-height: 50px;
	color: #FFFFFF;
}

/* Explore All Button */
.best-seller-block__button {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 16px 32px;
	gap: 12px;
	background: #FFFFFF;
	border: 1px solid #FF5100;
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.best-seller-block__button span {
	font-family: 'Roboto Flex', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	color: #111111;
	transition: color 0.3s ease;
}

.best-seller-block__button svg {
	width: 10px;
	height: 10px;
	color: #111111;
	transition: color 0.3s ease;
}

.best-seller-block__button:hover {
	background: #FF5100;
	border-color: #FF5100;
	text-decoration: none;
}

.best-seller-block__button:hover span,
.best-seller-block__button:hover svg {
	color: #FFFFFF;
}

/* ==========================================================================
   Right Side: Product Slider
   ========================================================================== */

.best-seller-block__slider-wrapper {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	overflow: visible;
	min-width: 0; /* Allow flex item to shrink below content size */
}

.best-seller-block__slider-container {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.best-seller-block__slider-track {
	display: flex;
	flex-direction: row;
	gap: 24px;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Product cards within slider */
.best-seller-block__slider-track .ksq-product-card,
.best-seller-block__slider-track .ksq-watch-product-card {
	flex-shrink: 0;
	width: 342px;
}

.best-seller-block__slider-track .ksq-product-card__image {
	width: 342px;
	height: 342px;
}

/* ==========================================================================
   Navigation Arrows
   Positioned at vertical center of product card image (342px height / 2 = 171px from top)
   ========================================================================== */

.best-seller-block__nav {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1.5px solid #888888;
	cursor: pointer;
	transition: all 0.2s ease;
	color: #888888;
}

.best-seller-block__nav:hover {
	border-color: #111111;
	color: #111111;
}

.best-seller-block__nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.best-seller-block__nav svg {
	width: 14px;
	height: 12px;
}

/* Left arrow: at the left edge of the slider, centered on product image */
.best-seller-block__nav--prev {
	left: 0;
	top: 185px; /* Center of 342px product image + offset from flex alignment */
	transform: translate(-50%, -50%);
}

/* Right arrow: fully visible with 10px margin from right, centered on product image */
.best-seller-block__nav--next {
	right: 10px;
	top: 185px; /* Center of 342px product image + offset from flex alignment */
	transform: translateY(-50%);
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 1540px) {
	.best-seller-block__promo {
		width: 400px;
		height: 450px;
	}
	
	.best-seller-block__promo-content {
		top: 40px;
		left: 40px;
		gap: 40px;
	}
	
	.best-seller-block__title {
		font-size: 38px;
		line-height: 46px;
	}
	
	.best-seller-block__slider-track .ksq-product-card,
	.best-seller-block__slider-track .ksq-watch-product-card {
		width: 300px;
	}
	
	.best-seller-block__slider-track .ksq-product-card__image {
		width: 300px;
		height: 300px;
	}
	
	/* Adjust arrow position for 300px card image */
	.best-seller-block__nav--prev,
	.best-seller-block__nav--next {
		top: 164px; /* Center of 300px product image + offset */
	}
}

@media (max-width: 1200px) {
	.best-seller-block {
		padding: 80px 0;
	}
	
	.best-seller-block__inner {
		flex-direction: column;
		align-items: center;
		padding: 0 20px;
	}
	
	.best-seller-block__promo {
		width: 100%;
		max-width: 600px;
		height: 400px;
	}
	
	.best-seller-block__slider-wrapper {
		width: 100%;
		max-width: 1200px;
	}
	
	.best-seller-block__nav--prev {
		left: 10px;
		transform: translateY(-50%);
	}
	
	.best-seller-block__nav--next {
		right: 10px;
		transform: translateY(-50%);
	}
}

@media (max-width: 1024px) {
	.best-seller-block {
		padding: 60px 0;
	}
	
	.best-seller-block__title {
		font-size: 32px;
		line-height: 40px;
	}
	
	.best-seller-block__nav {
		width: 44px;
		height: 44px;
	}
	
	.best-seller-block__nav svg {
		width: 12px;
		height: 10px;
	}
	
	.best-seller-block__slider-track .ksq-product-card,
	.best-seller-block__slider-track .ksq-watch-product-card {
		width: 280px;
	}
	
	.best-seller-block__slider-track .ksq-product-card__image {
		width: 280px;
		height: 280px;
	}
	
	/* Adjust arrow position for 280px card image */
	.best-seller-block__nav--prev,
	.best-seller-block__nav--next {
		top: 154px; /* Center of 280px product image + offset */
	}
}

@media (max-width: 768px) {
	.best-seller-block {
		padding: 50px 0;
	}
	
	.best-seller-block__inner {
		padding: 0 15px;
		gap: 30px;
	}
	
	.best-seller-block__promo {
		height: 320px;
	}
	
	.best-seller-block__promo-content {
		top: 30px;
		left: 30px;
		gap: 30px;
		max-width: 280px;
	}
	
	.best-seller-block__title {
		font-size: 28px;
		line-height: 34px;
	}
	
	.best-seller-block__button {
		padding: 12px 24px;
		gap: 10px;
	}
	
	.best-seller-block__button span {
		font-size: 16px;
		line-height: 20px;
	}
	
	.best-seller-block__slider-track {
		gap: 16px;
	}
	
	.best-seller-block__slider-track .ksq-product-card,
	.best-seller-block__slider-track .ksq-watch-product-card {
		width: 260px;
	}
	
	.best-seller-block__slider-track .ksq-product-card__image {
		width: 260px;
		height: 260px;
	}
	
	/* Adjust arrow position for 260px card image */
	.best-seller-block__nav--prev,
	.best-seller-block__nav--next {
		top: 144px; /* Center of 260px product image + offset */
	}
}

@media (max-width: 576px) {
	.best-seller-block {
		padding: 40px 0;
	}
	
	/* Remove inner padding - track handles the 20px margin */
	.best-seller-block__inner {
		padding: 0 !important;
	}
	
	.best-seller-block__promo {
		height: 280px;
	}
	
	.best-seller-block__promo-content {
		top: 20px;
		left: 20px;
		gap: 25px;
	}
	
	.best-seller-block__title {
		font-size: 24px;
		line-height: 30px;
	}
	
	/* Hide navigation arrows on mobile - enable touch swipe */
	.best-seller-block__nav {
		display: none;
	}
	
	.best-seller-block__slider-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	
	.best-seller-block__slider-container::-webkit-scrollbar {
		display: none;
	}
	
	.best-seller-block__slider-track {
		padding: 0 20px;
		gap: 12px;
	}
	
	/* Figma specs: Card 200px width, Image 200x200px */
	.best-seller-block__slider-track .ksq-product-card,
	.best-seller-block__slider-track .ksq-watch-product-card {
		width: 200px !important;
		min-width: 200px !important;
		gap: 12px !important;
	}
	
	.best-seller-block__slider-track .ksq-product-card__image {
		width: 200px !important;
		height: 200px !important;
		border-radius: 8px;
	}
	
	/* Bestseller badge - Figma: 78x20px, #444444 background */
	.best-seller-block__slider-track .ksq-product-card__badge-bestseller {
		padding: 4px 8px;
		gap: 4px;
		height: 20px;
		font-size: 10px;
		line-height: 12px;
		font-weight: 400;
		border-radius: 100px;
		background: #444444;
		color: #FFFFFF;
		top: 10px;
		left: 10px;
	}
	
	.best-seller-block__slider-track .ksq-product-card__badge-bestseller svg {
		width: 12px;
		height: 12px;
	}
	
	.best-seller-block__slider-track .ksq-product-card__wishlist {
		width: 24px;
		height: 24px;
		top: 10px;
		right: 10px;
	}
	
	.best-seller-block__slider-track .ksq-product-card__wishlist svg {
		width: 14.4px;
		height: 14.4px;
	}
	
	/* Cart button - Figma: top: 156px */
	.best-seller-block__slider-track .ksq-product-card__mobile-cart {
		display: flex !important;
		position: absolute !important;
		top: 156px !important; /* 200px image - 32px button - 12px margin */
		bottom: auto !important;
		right: 12px !important;
		width: 32px !important;
		height: 32px !important;
		border-radius: 42px;
	}
	
	.best-seller-block__slider-track .ksq-product-card__mobile-cart svg {
		width: 16px;
		height: 16px;
	}
	
	.best-seller-block__slider-track .ksq-product-card__buy-now {
		display: none !important;
	}
	
	/* Content - 12px gap */
	.best-seller-block__slider-track .ksq-product-card__content {
		gap: 12px !important;
	}
	
	/* Info - 6px gap */
	.best-seller-block__slider-track .ksq-product-card__info {
		gap: 6px !important;
	}
	
	/* Stars - 14x14px */
	.best-seller-block__slider-track .ksq-product-card__star {
		width: 14px !important;
		height: 14px !important;
		color: #FFA033 !important;
	}
	
	/* Review text - 12px font */
	.best-seller-block__slider-track .ksq-product-card__review-text {
		font-size: 12px !important;
		line-height: 14px !important;
	}
	
	/* Title - 14px font */
	.best-seller-block__slider-track .ksq-product-card__title {
		font-size: 14px !important;
		line-height: 16px !important;
		font-weight: 500;
	}
	
	/* Prices - Figma: row direction, 12px gap, nowrap */
	.best-seller-block__slider-track .ksq-product-card__prices {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		padding: 0 !important;
		gap: 12px !important;
		width: 100% !important;
		max-width: 200px !important;
	}
	
	.best-seller-block__slider-track .ksq-product-card__price-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		padding: 0 !important;
		gap: 6px !important;
		flex: none !important;
	}
	
	/* Current price - 16px font */
	.best-seller-block__slider-track .ksq-product-card__price-current,
	.best-seller-block__slider-track .ksq-product-card__price-current .woocommerce-Price-amount,
	.best-seller-block__slider-track .ksq-product-card__price-current bdi {
		font-size: 16px !important;
		line-height: 19px !important;
	}
	
	/* Regular price - 16px font */
	.best-seller-block__slider-track .ksq-product-card__price-regular,
	.best-seller-block__slider-track .ksq-product-card__price-regular .woocommerce-Price-amount,
	.best-seller-block__slider-track .ksq-product-card__price-regular bdi {
		font-size: 16px !important;
		line-height: 19px !important;
	}
	
	/* Discount badge - Figma: 53x18px */
	.best-seller-block__slider-track .ksq-product-card__discount {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 3px 8px !important;
		gap: 8px !important;
		height: 18px !important;
		font-size: 10px !important;
		line-height: 12px !important;
		border-radius: 60px;
		flex: none !important;
		white-space: nowrap !important;
	}
}