/**
 * Global Watch Product Card Styles
 *
 * This stylesheet contains the global styles for watch product cards.
 * These styles are shared across all product displays:
 * - Sliders (4 per row)
 * - Collection/Category pages (grid layout)
 * - Featured products
 * - Similar products
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ==========================================================================
   Global Product Card
   ========================================================================== */

.ksq-product-card {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	max-width: 342px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* In grid layouts, allow cards to fill available space */
.only-collection__products .ksq-product-card,
.ksq-product-grid .ksq-product-card {
	width: 100%;
	max-width: 100%;
}

.ksq-product-card__link {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-decoration: none !important;
	color: inherit;
}

.ksq-product-card__link:hover,
.ksq-product-card__link:focus,
.ksq-product-card__link:active,
.ksq-product-card__link:visited {
	text-decoration: none !important;
	color: inherit;
}

.ksq-product-card__link *,
.ksq-product-card__link:hover * {
	text-decoration: none !important;
}

.ksq-product-card__title,
.ksq-product-card__review-text,
.ksq-product-card__price-current,
.ksq-product-card__discount {
	text-decoration: none !important;
}

.ksq-product-card__price-regular {
	text-decoration: line-through !important;
}

/* ==========================================================================
   Card Image Container
   ========================================================================== */

.ksq-product-card__image {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	background: #000000;
	border-radius: 16px;
	overflow: hidden;
}

/* Ensure image doesn't block buttons */
.ksq-product-card__image img {
	pointer-events: none;
}

/* Bottom gradient overlay */
.ksq-product-card__image::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 105px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 1.26%, #000000 57.14%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 100ms ease-out;
	z-index: 2;
}

/* Blinking/Shimmer light sweep effect */
.ksq-product-card__image::before {
	content: '';
	position: absolute;
	top: -20px;
	left: -250px;
	width: 210px;
	height: 382px;
	background: rgba(255, 255, 255, 0.2);
	filter: blur(40px);
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	transition: opacity 100ms ease-out;
}

.ksq-product-card:hover .ksq-product-card__image::before {
	opacity: 1;
	animation: ksqShimmerSweep 1.5s ease-in-out infinite;
}

@keyframes ksqShimmerSweep {
	0% {
		left: -250px;
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		left: calc(100% + 50px);
		opacity: 0;
	}
}

.ksq-product-card:hover .ksq-product-card__image::after {
	opacity: 1;
}

.ksq-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 100ms ease-out;
}

.ksq-product-card:hover .ksq-product-card__image img {
	transform: scale(1.05);
}

/* ==========================================================================
   Bestseller Badge
   ========================================================================== */

.ksq-product-card__badge-bestseller {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 16px;
	gap: 8px;
	height: 32px;
	background: #444444;
	border-radius: 100px;
	font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: #FFFFFF;
	z-index: 5;
	box-sizing: border-box;
}

.ksq-product-card__badge-bestseller svg {
	flex-shrink: 0;
}

/* ==========================================================================
   Wishlist Button
   ========================================================================== */

.ksq-product-card__wishlist {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: none;
	border-radius: 50%;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: all 100ms ease-out;
	z-index: 5;
	color: #111111;
}

.ksq-product-card__wishlist:hover {
	transform: scale(1.1);
	box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.16);
}

.ksq-product-card__wishlist svg {
	width: 24px;
	height: 24px;
	transition: all 100ms ease-out;
}

/* Active wishlist state - filled heart */
.ksq-product-card__wishlist.is-active {
	background: #FF5100;
	color: #FFFFFF;
}

.ksq-product-card__wishlist.is-active svg {
	fill: #FFFFFF;
}

.ksq-product-card__wishlist.is-active svg path {
	stroke: #FFFFFF;
	fill: #FFFFFF;
}

.ksq-product-card__wishlist.is-active:hover {
	background: #E54900;
}

/* ==========================================================================
   Mobile Add to Cart Icon Button
   Hidden on desktop, visible on mobile - positioned bottom-right of image
   ========================================================================== */

.ksq-product-card__mobile-cart {
	display: none; /* Hidden on desktop */
	position: absolute !important;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	background: #FF5100;
	border: none;
	border-radius: 42px;
	cursor: pointer !important;
	transition: all 0.2s ease;
	z-index: 100 !important;
	color: #FFFFFF;
	/* Allow button to receive clicks even when inside anchor */
	pointer-events: auto !important;
}

/* Increase clickable area without changing visual size */
.ksq-product-card__mobile-cart::before {
	content: '';
	position: absolute;
	top: -10px;
	right: -10px;
	bottom: -10px;
	left: -10px;
	border-radius: 50%;
	pointer-events: auto !important;
}

.ksq-product-card__mobile-cart:hover,
.ksq-product-card__mobile-cart:active {
	background: #E54900;
	transform: scale(1.05);
}

.ksq-product-card__mobile-cart svg {
	/* Do not alter SVG size - use original from SVG library */
}

/* Loading state */
.ksq-product-card__mobile-cart.is-loading {
	pointer-events: none;
}

.ksq-product-card__mobile-cart.is-loading svg {
	display: none;
}

.ksq-product-card__mobile-cart.is-loading::after {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: mobileCartSpin 0.8s linear infinite;
}

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

/* Added state - green (after clicking add to cart) */
.ksq-product-card__mobile-cart.is-added {
	background: #22c55e;
}

.ksq-product-card__mobile-cart.is-added:hover {
	background: #16a34a;
}

/* In cart state - green (product already in cart on page load) */
.ksq-product-card__mobile-cart.is-in-cart {
	background: #22c55e;
}

.ksq-product-card__mobile-cart.is-in-cart:hover,
.ksq-product-card__mobile-cart.is-in-cart:active {
	background: #16a34a;
}

/* ==========================================================================
   Buy Now Button (appears on hover)
   ========================================================================== */

.ksq-product-card__buy-now {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(80px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 302px;
	height: 48px;
	background: #FF5100;
	border-radius: 12px;
	font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 21px;
	color: #FFFFFF;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	border: none;
	cursor: pointer;
	transition: transform 100ms ease-out, opacity 100ms ease-out;
}

.ksq-product-card:hover .ksq-product-card__buy-now {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.ksq-product-card__buy-now:hover {
	background: #E54900;
}

.ksq-product-card__buy-now svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* ==========================================================================
   Card Content (Below Image)
   ========================================================================== */

.ksq-product-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	gap: 16px;
	width: 100%;
}

/* Brand + Title wrapper */
.ksq-product-card__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	gap: 8px;
	width: 100%;
}

/* Reviews Row */
.ksq-product-card__reviews {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: 8px;
}

.ksq-product-card__stars {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
}

.ksq-product-card__star {
	width: 18px;
	height: 18px;
	color: #E0E0E0; /* Empty star color */
	flex-shrink: 0;
}

.ksq-product-card__star.filled {
	color: #FFA033; /* Gold filled star color */
}

.ksq-product-card__star.half {
	color: #FFA033;
	/* Half star using clip-path */
	clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.ksq-product-card__review-text {
	font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #444444;
}

/* Product Title - 2 lines max */
.ksq-product-card__title {
	margin: 0;
	width: 100%;
	font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	color: #222222;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   Prices Row
   ========================================================================== */

.ksq-product-card__prices {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: 16px;
}

.ksq-product-card__price-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: 8px;
}

/* Current price */
.ksq-product-card__price-current,
.ksq-product-card__price-current .woocommerce-Price-amount,
.ksq-product-card__price-current bdi {
	font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 23px;
	color: #FF5100;
	text-decoration: none !important;
}

/* Regular/strikethrough price */
.ksq-product-card__price-regular,
.ksq-product-card__price-regular .woocommerce-Price-amount,
.ksq-product-card__price-regular bdi {
	font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 23px;
	color: #888888;
	text-decoration: line-through !important;
}

/* Discount Badge */
.ksq-product-card__discount {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 4px 12px;
	gap: 8px;
	background: rgba(255, 160, 51, 0.12);
	border: 1px solid rgba(255, 160, 51, 0.8);
	border-radius: 60px;
	font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	color: #4E2104;
}

/* ==========================================================================
   Product Slider Layout
   ========================================================================== */

.ksq-product-slider {
	position: relative;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	padding: 0;
	background: #FFFFFF;
	overflow: visible;
}

.ksq-product-slider__container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 0 !important;
	box-sizing: border-box;
}

.ksq-product-slider__title {
	margin: 0;
	align-self: stretch;
	font-family: 'DM Serif Display', Georgia, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 35px;
	line-height: normal;
	text-align: center;
	color: #111111;
}

.ksq-product-slider__wrapper {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

.ksq-product-slider__track-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	overflow: hidden;
}

.ksq-product-slider__track {
	display: flex;
	gap: 24px;
	transition: transform 0.4s ease;
}

/* Center products when fewer than visible count */
.ksq-product-slider__track.ksq-product-slider__track--centered {
	justify-content: center;
}

/* Navigation Arrows */
.ksq-product-slider__nav {
	position: absolute;
	top: 146px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1.5px solid #888888;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 10;
	color: #888888;
}

.ksq-product-slider__nav:hover {
	border-color: #111111;
	color: #111111;
}

.ksq-product-slider__nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ksq-product-slider__nav--prev {
	left: -25px;
}

.ksq-product-slider__nav--next {
	right: -25px;
}

/* ==========================================================================
   Product Grid Layout (for collection/category pages)
   ========================================================================== */

.ksq-product-grid {
	position: relative;
	width: 100%;
	padding: 0;
	background: #FFFFFF;
}

.ksq-product-grid__container {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.ksq-product-grid__title {
	margin: 0 0 50px;
	font-family: 'DM Serif Display', Georgia, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 44px;
	line-height: normal;
	text-align: center;
	color: #111111;
}

.ksq-product-grid__items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	justify-items: center;
}

.ksq-product-grid__items[data-columns="3"] {
	grid-template-columns: repeat(3, 1fr);
}

.ksq-product-grid__items[data-columns="2"] {
	grid-template-columns: repeat(2, 1fr);
}

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

/* Below 1540px */
@media (max-width: 1540px) {
	.ksq-product-slider__container {
		padding: 0 50px !important;
	}
	
	.ksq-product-slider__nav--prev {
		left: 0;
	}
	
	.ksq-product-slider__nav--next {
		right: 0;
	}
	
	.ksq-product-slider__nav {
		top: 50%;
		transform: translateY(-50%);
	}
	
	/* Cards in slider */
	.ksq-product-slider .ksq-product-card {
		width: calc((100% - 72px) / 4);
		min-width: 280px;
	}
	
	.ksq-product-slider .ksq-product-card__image {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}
}

/* Tablet landscape */
@media (max-width: 1200px) {
	.ksq-product-slider {
		margin-left: 0;
		width: 100%;
	}
	
	.ksq-product-slider__container {
		padding: 0 40px !important;
	}
	
	.ksq-product-slider__title {
		font-size: 30px;
	}
	
	.ksq-product-slider .ksq-product-card {
		width: calc((100% - 48px) / 3);
		min-width: 280px;
	}
	
	.ksq-product-slider .ksq-product-card__image {
		height: auto;
		aspect-ratio: 1;
	}
	
	.ksq-product-slider__track {
		gap: 24px;
	}
	
	.ksq-product-slider__nav {
		display: none;
	}
	
	.ksq-product-slider__track-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0; /* Remove container padding - track handles the 20px */
	}
	
	.ksq-product-slider__track-container::-webkit-scrollbar {
		display: none;
	}
	
	.ksq-product-slider__track {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	/* Grid layout */
	.ksq-product-grid__items {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.ksq-product-grid__items[data-columns="4"] {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tablet portrait */
@media (max-width: 991px) {
	.ksq-product-slider {
		margin-left: 0;
		width: 100%;
	}
	
	.ksq-product-slider__container {
		padding: 0 !important; /* Remove container padding - track handles the 20px */
	}
	
	.ksq-product-slider__title {
		font-size: 28px;
	}
	
	.ksq-product-slider .ksq-product-card {
		width: 280px;
		min-width: 280px;
	}
	
	.ksq-product-slider .ksq-product-card__image {
		height: 280px;
	}
	
	.ksq-product-card__badge-bestseller {
		padding: 6px 12px;
		font-size: 12px;
	}
	
	.ksq-product-card__wishlist {
		width: 36px;
		height: 36px;
	}
	
	.ksq-product-card__wishlist svg {
		width: 20px;
		height: 20px;
	}
	
	.ksq-product-card__content {
		gap: 12px;
	}
	
	.ksq-product-card__info {
		gap: 6px;
	}
	
	.ksq-product-card__review-text {
		font-size: 14px;
	}
	
	.ksq-product-card__star {
		width: 16px;
		height: 16px;
	}
	
	.ksq-product-card__title {
		font-size: 16px;
	}
	
	.ksq-product-card__prices {
		gap: 12px;
	}
	
	.ksq-product-card__price-current,
	.ksq-product-card__price-current .woocommerce-Price-amount,
	.ksq-product-card__price-current bdi,
	.ksq-product-card__price-regular,
	.ksq-product-card__price-regular .woocommerce-Price-amount,
	.ksq-product-card__price-regular bdi {
		font-size: 18px;
	}
	
	.ksq-product-card__buy-now {
		width: calc(100% - 32px);
	}
	
	.ksq-product-slider__track {
		padding-left: 0;
	}
	
	/* Grid layout */
	.ksq-product-grid__items {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	
	.ksq-product-grid__items[data-columns="4"],
	.ksq-product-grid__items[data-columns="3"] {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.ksq-product-grid .ksq-product-card {
		width: 100%;
	}
	
	.ksq-product-grid .ksq-product-card__image {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}
}

/* Mobile */
@media (max-width: 600px) {
	.ksq-product-slider {
		margin-left: 0;
		width: 100%;
	}
	
	.ksq-product-slider__title {
		font-size: 24px;
	}
	
	.ksq-product-slider .ksq-product-card {
		width: 260px;
		min-width: 260px;
	}
	
	.ksq-product-slider .ksq-product-card__image {
		height: 260px;
	}
	
	.ksq-product-card__prices {
		flex-wrap: wrap;
		gap: 8px;
	}
	
	/* Grid layout - 2 columns on mobile */
	.ksq-product-grid__items {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	
	.ksq-product-grid__items[data-columns="4"],
	.ksq-product-grid__items[data-columns="3"],
	.ksq-product-grid__items[data-columns="2"] {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.ksq-product-grid .ksq-product-card {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}
	
	.ksq-product-grid .ksq-product-card__image {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}
	
	/* ==========================================================================
	   Mobile Product Card - Figma Specs (162px reference width)
	   ========================================================================== */
	
	/* Card layout - 12px gap between image and content */
	.ksq-product-card {
		gap: 12px;
	}
	
	.ksq-product-card__link {
		gap: 12px;
	}
	
	/* Image container - square with 8px border radius */
	.ksq-product-card__image {
		border-radius: 8px;
	}
	
	/* Wishlist button - 24x24px, 10px from edges */
	.ksq-product-card__wishlist {
		width: 24px;
		height: 24px;
		top: 10px;
		right: 10px;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
	}
	
	.ksq-product-card__wishlist svg {
		width: 14.4px;
		height: 14.4px;
	}
	
	/* Bestseller badge - Figma specs */
	.ksq-product-card__badge-bestseller {
		padding: 4px 8px;
		gap: 4px;
		height: 18px;
		top: 10px;
		left: 10px;
		font-size: 8px;
		line-height: 9px;
		border-radius: 100px;
	}
	
	.ksq-product-card__badge-bestseller svg {
		width: 10px;
		height: 10px;
	}
	
	/* Content section - 8px gap between elements */
	.ksq-product-card__content {
		gap: 8px;
	}
	
	/* Info section (reviews + title) - 4px gap */
	.ksq-product-card__info {
		gap: 4px;
	}
	
	/* Reviews row - 4px gap */
	.ksq-product-card__reviews {
		gap: 4px;
	}
	
	/* Stars - 11x11px */
	.ksq-product-card__star {
		width: 11px;
		height: 11px;
	}
	
	/* Reviews text - 10px font, 12px line-height, color #444444 */
	.ksq-product-card__review-text {
		font-size: 10px;
		line-height: 12px;
		color: #444444;
	}
	
	/* Title - 12px font, 14px line-height, weight 500, color #222222 */
	.ksq-product-card__title {
		font-size: 12px;
		line-height: 14px;
		font-weight: 500;
		color: #222222;
	}
	
	/* Prices row - 10px gap */
	.ksq-product-card__prices {
		gap: 10px;
		flex-wrap: nowrap;
	}
	
	.ksq-product-card__price-row {
		gap: 4px;
	}
	
	/* Current price - 12px font, weight 600, color #FF5100 */
	.ksq-product-card__price-current,
	.ksq-product-card__price-current .woocommerce-Price-amount,
	.ksq-product-card__price-current bdi {
		font-size: 12px;
		line-height: 14px;
		font-weight: 600;
		color: #FF5100;
	}
	
	/* Regular price - 12px font, weight 400, color #888888 */
	.ksq-product-card__price-regular,
	.ksq-product-card__price-regular .woocommerce-Price-amount,
	.ksq-product-card__price-regular bdi {
		font-size: 12px;
		line-height: 14px;
		font-weight: 400;
		color: #888888;
	}
	
	/* Discount badge - padding 3px 8px, 8px font, border-radius 60px */
	.ksq-product-card__discount {
		padding: 3px 8px;
		font-size: 8px;
		line-height: 9px;
		border-radius: 60px;
		background: rgba(255, 160, 51, 0.12);
		border: 1px solid rgba(255, 160, 51, 0.8);
		color: #4E2104;
	}
	
	/* Hide desktop Buy Now button on mobile */
	.ksq-product-card__buy-now {
		display: none !important;
	}
	
	/* Show mobile Add to Cart icon button */
	/* Button is OUTSIDE the anchor, positioned relative to article */
	/* Image is square (1:1), so image height = card width */
	/* Card width = (viewport - 2*padding - gap) / 2 */
	/* At 768px: padding=16px each side (32px total), horizontal gap=12px */
	/* Card width = (100vw - 32px - 12px) / 2 = (100vw - 44px) / 2 */
	/* Button top = card width - 10px margin - 32px button height */
	.ksq-product-card__mobile-cart {
		display: flex;
		right: 10px;
		bottom: auto;
		top: calc((100vw - 44px) / 2 - 42px);
	}
}

/* Small Mobile - under 480px - adjust cart button for smaller padding */
@media (max-width: 480px) {
	/* At 480px: padding=12px each side (24px total), horizontal gap=12px */
	/* Card width = (100vw - 24px - 12px) / 2 = (100vw - 36px) / 2 */
	.ksq-product-card__mobile-cart {
		top: calc((100vw - 36px) / 2 - 42px);
	}
}

/* Small Mobile - under 380px */
@media (max-width: 380px) {
	/* Keep Figma specs consistent - no changes from 600px breakpoint */
}

/* ==========================================================================
   Legacy Class Aliases (for backward compatibility)
   Map old ksq-similar-products classes to new ksq-product-card classes
   ========================================================================== */

/* Make similar products use the same card styles */
.ksq-similar-products .ksq-product-card {
	/* Cards in similar products section inherit slider styles */
}

/* Allow similar products section to use the global card */
.ksq-similar-products__card.ksq-product-card {
	/* Backward compatible with existing markup */
}

/* ==========================================================================
   WooCommerce Shop/Category Page Integration
   Overrides default WooCommerce product loop styles
   ========================================================================== */

/* WooCommerce product loop - uses our global card grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	justify-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

/* Reset WooCommerce default product li styles */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Hide default WooCommerce product elements (replaced by our card) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .onsale {
	/* These are handled by our global card template */
}

/* WooCommerce Shop Page Container */
.woocommerce .woocommerce-products-header {
	text-align: center;
	margin-bottom: 50px;
}

.woocommerce .woocommerce-products-header__title {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 44px;
	font-weight: 400;
	color: #111111;
	margin: 0 0 16px;
}

/* WooCommerce Result Count & Ordering */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 24px;
}

/* WooCommerce Pagination */
.woocommerce nav.woocommerce-pagination {
	margin-top: 60px;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	gap: 8px;
	border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid #888888;
	border-radius: 50%;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 16px;
	color: #888888;
	text-decoration: none;
	transition: all 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: #111111;
	color: #111111;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: #FF5100;
	border-color: #FF5100;
	color: #FFFFFF;
}

/* Responsive WooCommerce Grid */
@media (max-width: 1200px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
		padding: 0 20px;
	}
}

@media (max-width: 991px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	
	.woocommerce .woocommerce-products-header__title {
		font-size: 32px;
	}
}

@media (max-width: 600px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	
	.woocommerce ul.products li.product .ksq-product-card {
		width: 100%;
		max-width: 342px;
		margin: 0 auto;
	}
	
	.woocommerce .woocommerce-products-header__title {
		font-size: 28px;
	}
}

/* ==========================================================================
   Wishlist Page Grid
   ========================================================================== */

.wishlist-page__grid.ksq-product-grid__items {
	padding: 0;
	grid-template-columns: repeat(auto-fit, minmax(280px, 330px));
	justify-content: center;
}

@media (max-width: 768px) {
	.wishlist-page__grid.ksq-product-grid__items {
		display: flex;
		flex-wrap: wrap;
		gap: 20px 12px;
		justify-content: center;
	}

	.wishlist-page__grid.ksq-product-grid__items > * {
		width: calc(50% - 6px);
	}

	.wishlist-page .ksq-product-card__mobile-cart {
		top: calc((100vw - 60px) / 2 - 42px);
	}
}

@media (max-width: 480px) {
	.wishlist-page .ksq-product-card__mobile-cart {
		top: calc((100vw - 60px) / 2 - 42px);
	}
}

.wishlist-page .ksq-product-card {
	position: relative;
}

/* ==========================================================================
   "You Might Also Like" Section
   Hip Hop category products displayed below Similar Products
   ========================================================================== */

.ksq-you-might-also-like {
	/* Add 100px gap from Similar Products section */
	margin-top: 100px;
	padding-bottom: 80px;
}

.ksq-you-might-also-like .ksq-product-slider__title {
	/* Match the same style as Similar Products */
	font-style: normal;
}

@media (max-width: 1024px) {
	.ksq-you-might-also-like {
		margin-top: 80px;
		padding-bottom: 60px;
	}
}

@media (max-width: 768px) {
	.ksq-you-might-also-like {
		margin-top: 60px;
		padding-bottom: 50px;
	}
}

@media (max-width: 480px) {
	.ksq-you-might-also-like {
		margin-top: 40px;
		padding-bottom: 40px;
	}
}

/* ==========================================================================
   Cross-Category Slider Section
   Styles moved to pdp-summary.css for proper specificity
   ========================================================================== */

/* ==========================================================================
   Recently Viewed Products Section
   Matches Similar Products block styling:
   - 1440px container for 4 products (342px × 4 + 24px × 3 = 1440px)
   - Arrows half inside container, half outside
   - 60px gap between title and products
   ========================================================================== */

.ksq-recently-viewed-section {
	margin-top: 100px;
	padding-bottom: 0;
}

/* Main section - full viewport width, allows arrow overflow */
.ksq-recently-viewed {
	position: relative;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	padding: 0;
	background: #FFFFFF;
	overflow: visible;
}

/* Container - 1440px centered, holds title and slider */
.ksq-recently-viewed .ksq-product-slider__container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px; /* 60px gap between title and products */
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 0 !important;
	box-sizing: border-box;
}

/* Section Title */
.ksq-recently-viewed .ksq-product-slider__title {
	margin: 0;
	align-self: stretch;
	font-family: 'DM Serif Display', Georgia, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 44px;
	line-height: 60px;
	text-align: center;
	color: #111111;
}

/* Slider wrapper - full width of container, arrows positioned here */
.ksq-recently-viewed .ksq-product-slider__wrapper {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

/* Track container - 1440px to fit exactly 4 cards */
.ksq-recently-viewed .ksq-product-slider__track-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	overflow: hidden;
}

/* Product track */
.ksq-recently-viewed .ksq-product-slider__track {
	display: flex;
	gap: 24px;
	transition: transform 0.4s ease;
}

/* Navigation Arrows - Half inside 1440px container, half outside */
/* Vertically centered on 342px product image: (342 - 50) / 2 = 146px */
.ksq-recently-viewed .ksq-product-slider__nav {
	position: absolute;
	top: 146px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1.5px solid #888888;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 10;
	color: #888888;
}

.ksq-recently-viewed .ksq-product-slider__nav:hover {
	border-color: #111111;
	color: #111111;
}

.ksq-recently-viewed .ksq-product-slider__nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Arrow positions: 50% inside 1440px container, 50% outside */
.ksq-recently-viewed .ksq-product-slider__nav--prev {
	left: -25px;
}

.ksq-recently-viewed .ksq-product-slider__nav--next {
	right: -25px;
}

/* Product cards - fixed 342px for 4-per-row in 1440px container */
.ksq-recently-viewed .ksq-product-card {
	width: 342px;
	flex-shrink: 0;
}

.ksq-recently-viewed .ksq-product-card__image {
	width: 342px;
	height: 342px;
}

/* ==========================================================================
   Responsive Styles for Recently Viewed
   ========================================================================== */

/* Below 1540px - add padding for arrows to be visible */
@media (max-width: 1540px) {
	.ksq-recently-viewed-section {
		margin-top: 80px;
	}
	
	.ksq-recently-viewed {
		width: 100%;
		margin-left: 0;
	}
	
	.ksq-recently-viewed .ksq-product-slider__container {
		max-width: 100%;
		padding: 0 50px !important;
	}
	
	.ksq-recently-viewed .ksq-product-slider__nav--prev {
		left: 0;
	}
	
	.ksq-recently-viewed .ksq-product-slider__nav--next {
		right: 0;
	}
	
	.ksq-recently-viewed .ksq-product-slider__nav {
		top: 50%;
		transform: translateY(-50%);
	}
	
	.ksq-recently-viewed .ksq-product-card {
		width: calc((100% - 72px) / 4);
		min-width: 280px;
	}
	
	.ksq-recently-viewed .ksq-product-card__image {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}
}

/* Tablet landscape - 3 cards visible */
@media (max-width: 1200px) {
	.ksq-recently-viewed-section {
		margin-top: 60px;
		padding-bottom: 0;
	}
	
	.ksq-recently-viewed .ksq-product-slider__container {
		gap: 40px;
		padding: 0 40px !important;
	}
	
	.ksq-recently-viewed .ksq-product-slider__title {
		font-size: 36px;
		line-height: 1.3;
	}
	
	/* Hide arrows on tablet - use swipe */
	.ksq-recently-viewed .ksq-product-slider__nav {
		display: none;
	}
	
	.ksq-recently-viewed .ksq-product-slider__track-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0; /* Remove container padding - track handles the 20px */
	}
	
	.ksq-recently-viewed .ksq-product-slider__track-container::-webkit-scrollbar {
		display: none;
	}
	
	.ksq-recently-viewed .ksq-product-slider__track {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.ksq-recently-viewed .ksq-product-card {
		width: 280px;
		min-width: 280px;
	}
	
	.ksq-recently-viewed .ksq-product-card__image {
		width: 280px;
		height: 280px;
	}
}

/* Tablet portrait */
@media (max-width: 991px) {
	.ksq-recently-viewed .ksq-product-slider__container {
		gap: 32px;
		padding: 0 !important; /* Remove container padding - track handles the 20px */
	}
	
	.ksq-recently-viewed .ksq-product-slider__title {
		font-size: 32px;
	}
	
	.ksq-recently-viewed .ksq-product-card {
		width: 260px;
		min-width: 260px;
	}
	
	.ksq-recently-viewed .ksq-product-card__image {
		width: 260px;
		height: 260px;
	}
}

/* Mobile - Figma specs: 200px cards */
@media (max-width: 600px) {
	.ksq-recently-viewed-section {
		margin-top: 40px;
		padding-bottom: 0;
	}
	
	.ksq-recently-viewed .ksq-product-slider__container {
		gap: 24px;
		padding: 0 !important; /* Remove container padding - track handles the 20px */
	}
	
	.ksq-recently-viewed .ksq-product-slider__title {
		font-family: 'DM Serif Display', serif;
		font-size: 22px;
		line-height: 26px;
		font-weight: 400;
		color: #111111;
		text-align: center;
	}
	
	.ksq-recently-viewed .ksq-product-slider__track {
		padding-left: 20px;
		padding-right: 20px;
		gap: 12px;
	}
	
	/* Card width - Figma specs (200px) */
	.ksq-recently-viewed .ksq-product-card {
		width: 200px !important;
		min-width: 200px !important;
		gap: 12px !important;
	}
	
	.ksq-recently-viewed .ksq-product-card__image {
		width: 200px !important;
		height: 200px !important;
		border-radius: 8px;
	}
	
	/* Bestseller badge - Figma: #444444 background */
	.ksq-recently-viewed .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;
	}
	
	.ksq-recently-viewed .ksq-product-card__badge-bestseller svg {
		width: 12px;
		height: 12px;
	}
	
	.ksq-recently-viewed .ksq-product-card__wishlist {
		width: 24px;
		height: 24px;
		top: 10px;
		right: 10px;
	}
	
	.ksq-recently-viewed .ksq-product-card__wishlist svg {
		width: 14.4px;
		height: 14.4px;
	}
	
	/* Cart button - Figma: top: 156px */
	.ksq-recently-viewed .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;
	}
	
	.ksq-recently-viewed .ksq-product-card__mobile-cart svg {
		width: 16px;
		height: 16px;
	}
	
	.ksq-recently-viewed .ksq-product-card__buy-now {
		display: none !important;
	}
	
	/* Content - 12px gap */
	.ksq-recently-viewed .ksq-product-card__content {
		gap: 12px !important;
	}
	
	/* Info - 6px gap */
	.ksq-recently-viewed .ksq-product-card__info {
		gap: 6px !important;
	}
	
	/* Stars - 14x14px, color #FFA033 */
	.ksq-recently-viewed .ksq-product-card__star {
		width: 14px !important;
		height: 14px !important;
		color: #FFA033 !important;
	}
	
	/* Review text - 12px font */
	.ksq-recently-viewed .ksq-product-card__review-text {
		font-size: 12px !important;
		line-height: 14px !important;
		color: #444444 !important;
	}
	
	/* Title - 14px font */
	.ksq-recently-viewed .ksq-product-card__title {
		font-size: 14px !important;
		line-height: 16px !important;
		font-weight: 500;
		color: #222222 !important;
	}
	
	/* Prices - Figma: row direction, 12px gap, nowrap */
	.ksq-recently-viewed .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;
	}
	
	.ksq-recently-viewed .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 */
	.ksq-recently-viewed .ksq-product-card__price-current,
	.ksq-recently-viewed .ksq-product-card__price-current .woocommerce-Price-amount,
	.ksq-recently-viewed .ksq-product-card__price-current bdi {
		font-size: 16px !important;
		line-height: 19px !important;
		font-weight: 600;
		color: #FF5100 !important;
	}
	
	/* Regular price - 16px font */
	.ksq-recently-viewed .ksq-product-card__price-regular,
	.ksq-recently-viewed .ksq-product-card__price-regular .woocommerce-Price-amount,
	.ksq-recently-viewed .ksq-product-card__price-regular bdi {
		font-size: 16px !important;
		line-height: 19px !important;
		font-weight: 400;
		color: #888888 !important;
	}
	
	/* Discount badge - Figma: 53x18px */
	.ksq-recently-viewed .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;
	}
}

/* ==========================================================================
   Skeleton Loading Cards
   Animated placeholder cards shown while products are loading
   ========================================================================== */

.ksq-product-card--skeleton {
	flex-shrink: 0;
	width: 342px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	pointer-events: none;
}

.ksq-product-card--skeleton .ksq-product-card__image-wrapper {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 16px;
	overflow: hidden;
}

.ksq-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeletonShimmer 1.5s ease-in-out infinite;
	border-radius: 4px;
}

.ksq-skeleton--image {
	width: 100%;
	height: 100%;
	border-radius: 16px;
}

.ksq-product-card--skeleton .ksq-product-card__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Reviews skeleton - stars + text */
.ksq-skeleton--reviews {
	width: 140px;
	height: 18px;
}

/* Title skeleton - 2 lines */
.ksq-skeleton--title {
	width: 100%;
	height: 40px;
}

/* Price skeleton - price + discount */
.ksq-skeleton--price {
	width: 140px;
	height: 18px;
}

@keyframes skeletonShimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* Skeleton card loading additional cards (appended to track) */
.ksq-product-card--loading {
	opacity: 0;
	animation: fadeInCard 0.3s ease forwards;
}

@keyframes fadeInCard {
	to {
		opacity: 1;
	}
}

/* Responsive skeleton cards */
@media (max-width: 1200px) {
	.ksq-product-card--skeleton,
	.ksq-product-card--skeleton .ksq-product-card__image-wrapper {
		width: 280px;
	}
	
	.ksq-product-card--skeleton .ksq-product-card__image-wrapper {
		height: 280px;
	}
}

@media (max-width: 768px) {
	/* Skeleton cards should fill grid cell width */
	.ksq-product-card--skeleton {
		width: 100%;
		max-width: 100%;
	}
	
	.ksq-product-card--skeleton .ksq-product-card__image-wrapper {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}
}

/* Mobile skeleton - match Figma product card specs */
@media (max-width: 600px) {
	.ksq-product-card--skeleton {
		width: 100%;
		gap: 12px; /* Figma: 12px gap between image and content */
	}
	
	.ksq-product-card--skeleton .ksq-product-card__image-wrapper {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		border-radius: 8px; /* Figma: 8px border radius */
	}
	
	.ksq-skeleton--image {
		border-radius: 8px;
	}
	
	.ksq-product-card--skeleton .ksq-product-card__content {
		gap: 8px; /* Figma: 8px gap in content */
	}
	
	/* Reviews skeleton - Figma: stars (55px) + gap (4px) + text */
	.ksq-skeleton--reviews {
		width: 100%;
		max-width: 141px; /* Figma: 141px total width */
		height: 12px; /* Figma: 12px line-height */
	}
	
	/* Title skeleton - Figma: 12px font, 14px line-height, 2 lines max */
	.ksq-skeleton--title {
		width: 100%;
		height: 28px; /* 2 lines × 14px */
	}
	
	/* Price skeleton - Figma: prices row with discount */
	.ksq-skeleton--price {
		width: 100%;
		max-width: 136px; /* Figma: 136px width */
		height: 15px; /* Figma: 15px height */
	}
}

/* ==========================================================================
   Add to Cart Button (for Wishlist page)
   ========================================================================== */

.ksq-product-card__add-to-cart-wrap {
	padding: 0 16px 16px;
	margin-top: -8px;
}

.ksq-product-card__add-to-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 48px;
	background: #FF5100;
	border: none;
	border-radius: 12px;
	font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
	text-decoration: none;
}

.ksq-product-card__add-to-cart:hover {
	background: #E54900;
	transform: translateY(-1px);
}

.ksq-product-card__add-to-cart:active {
	transform: translateY(0);
}

.ksq-product-card__add-to-cart:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.ksq-product-card__add-to-cart svg {
	flex-shrink: 0;
}

/* Loading state */
.ksq-product-card__add-to-cart.is-loading {
	pointer-events: none;
}

.ksq-product-card__add-to-cart.is-loading span {
	display: none;
}

.ksq-product-card__add-to-cart.is-loading::after {
	content: '';
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: addToCartSpin 0.8s linear infinite;
}

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

/* Added state */
.ksq-product-card__add-to-cart.is-added {
	background: #22c55e;
}

.ksq-product-card__add-to-cart.is-added:hover {
	background: #16a34a;
}

/* Select Options variant (for variable products) */
.ksq-product-card__add-to-cart--options {
	background: #1A1A1A;
}

.ksq-product-card__add-to-cart--options:hover {
	background: #333333;
}

/* Responsive */
@media (max-width: 768px) {
	.ksq-product-card__add-to-cart-wrap {
		padding: 0 12px 12px;
	}
	
	.ksq-product-card__add-to-cart {
		height: 44px;
		font-size: 14px;
		gap: 8px;
	}
	
	.ksq-product-card__add-to-cart svg {
		width: 16px;
		height: 16px;
	}
}