/* ============================================================
   CP Products Slider
   Wraps Flatsome's standard product cards in a Swiper carousel
   with custom navigation and predictable responsive breakpoints.
   ============================================================ */

.cp-products-outer {
	padding-top: 22px;
	padding-bottom: 22px;
}
.cp-products-outer--contained {
	max-width: 1440px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	/*padding-left: 20px;*/
	/*padding-right: 20px;*/
	box-sizing: border-box;
}
.cp-products-outer--full {
	max-width: 100%;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

.cp-products-section {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

/* Pagination dots — sibling of slider, sit below */
.cp-products-section > .cp-products-pagination {
	margin-top: 14px;
}

/* Swiper container — clips slides outside its bounds.
   Vertical padding lets card shadows render at top/bottom.
   No horizontal padding so slides fill the section width edge-to-edge,
   matching Flatsome's slider-nav-reveal behavior (arrow on last card edge). */
.cp-products-slider {
	position: relative;
	overflow: hidden;
	padding: 10px 0;
}
.cp-products-slider .swiper-wrapper {
	box-sizing: border-box;
	align-items: stretch;
}

/* Each slide hosts a Flatsome product card. Force equal heights. */
.cp-products-slide {
	height: auto;
}
.cp-products-slide > .product-small,
.cp-products-slide > .product {
	height: 100%;
}

/* ============================================================
   FALLBACK GRID — when Swiper hasn't initialized (UX Builder
   AJAX preview, slow JS, no-JS) show slides in a responsive grid
   matching the configured columns per breakpoint.
   Swiper adds `.swiper-initialized` once running, which kills
   these styles via :not().
   ============================================================ */
.cp-products-slider:not(.swiper-initialized) {
	overflow: hidden;
}
.cp-products-slider:not(.swiper-initialized) .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(var(--cp-cols-xs, 1), minmax(0, 1fr));
	gap: var(--cp-products-gap, 16px);
	transform: none !important;
}
.cp-products-slider:not(.swiper-initialized) .swiper-slide {
	width: auto !important;
	margin: 0 !important;
}
.cp-products-slider:not(.swiper-initialized) .cp-products-nav,
.cp-products-slider:not(.swiper-initialized) .cp-products-pagination {
	display: none;
}

@media (min-width: 550px) {
	.cp-products-slider:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: repeat(var(--cp-cols-sm, 2), minmax(0, 1fr));
	}
}
@media (min-width: 640px) {
	.cp-products-slider:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: repeat(var(--cp-cols-md, 3), minmax(0, 1fr));
	}
}
@media (min-width: 850px) {
	.cp-products-slider:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: repeat(var(--cp-cols-849, 3), minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.cp-products-slider:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: repeat(var(--cp-cols-lg, 4), minmax(0, 1fr));
	}
}
@media (min-width: 1400px) {
	.cp-products-slider:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: repeat(var(--cp-cols-xl, 5), minmax(0, 1fr));
	}
}

/* ============================================================
   Navigation arrows — 1:1 with Flatsome .slider-nav-reveal style.
   Full-height white panels on slider edges, hidden via translateX,
   reveal-on-hover.
   ============================================================ */
.cp-products-nav {
	position: absolute;
	top: -2px;
	bottom: 0;
	height: 100%;
	width: 30px;
	padding: 0;
	margin: 0 !important;
	border: none;
	border-radius: 0;
	background-color: #fff;
	color: #111;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.cp-products-nav-icon {
	width: 60%;
	height: 60%;
	pointer-events: none;
	fill: currentColor;
}
.cp-products-nav-icon .arrow {
	fill: currentColor;
}
.cp-products-nav--prev {
	left: 0 !important;
	right: auto !important;
	transform: translateX(-100%);
}
.cp-products-nav--next {
	right: 0 !important;
	left: auto !important;
	transform: translateX(100%);
}
.cp-products-section:hover .cp-products-nav,
.cp-products-nav:hover,
.cp-products-nav:focus-visible {
	opacity: 0.85;
	transform: translateX(0);
}
.cp-products-nav:hover {
	opacity: 1;
	color: #000;
}
.cp-products-nav:focus-visible {
	outline: 2px solid var(--fs-color-primary, #002641);
	outline-offset: -2px;
}
.cp-products-nav.swiper-button-disabled {
	opacity: 0 !important;
	cursor: default;
	pointer-events: none;
}

/* Touch / no-hover devices — arrows always visible at slider edges */
@media (hover: none) {
	.cp-products-nav {
		opacity: 0.85;
		transform: translateX(0) !important;
	}
	.cp-products-nav.swiper-button-disabled {
		opacity: 0 !important;
	}
}

/* ============================================================
   Pagination dots
   ============================================================ */
.cp-products-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
}
.cp-products-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.18);
	transition: background 0.18s ease, transform 0.18s ease;
	cursor: pointer;
}
.cp-products-pagination .swiper-pagination-bullet-active {
	background: var(--fs-color-primary, #002641);
	transform: scale(1.25);
}

/* ============================================================
   Responsive tweaks
   ============================================================ */

/* ============================================================
   Product card — kill Flatsome's default .col padding/margin
   (gap is handled by Swiper's spaceBetween), then drop a clean
   shadow on the actual visible card box.
   ============================================================ */
.cp-products-slide .product-small.col,
.cp-products-slide > .col {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	height: 100%;
}

/* Card shadow — applied to whichever element wraps the card content */
.cp-products-slide .col-inner,
.cp-products-slide .product-small.col {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	height: 100%;
	box-sizing: border-box;
}

/* Hover — card lifts up and shadow deepens (Flatsome row-box-shadow-1-hover) */
.cp-products-slide:hover .col-inner,
.cp-products-slide:hover .product-small.col {
	transform: translateY(-6px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.05);
}

/* Inner text padding — keeps title/price/buttons off the card edges */
.cp-products-slide .box-text {
	padding-left: 1.2em;
	padding-right: 1.2em;
}

/* ============================================================
   Hover behaviors — replicate Flatsome's [ux_products] card hovers
   ============================================================ */

/* Card image wrapper — needed for absolute-positioned image-tools / overlays */
.cp-products-slide .box-image {
	position: relative;
	overflow: hidden;
}

/* Kill Flatsome's default image-zoom-on-hover for our slider */
.cp-products-slide .box-image img,
.cp-products-slide:hover .box-image img {
	transform: none !important;
	transition: none !important;
}

/* image-tools (heart, compare, etc.) — fade in on hover */
.cp-products-slide .image-tools.show-on-hover {
	opacity: 0;
	transition: opacity 0.3s ease;
}
.cp-products-slide:hover .image-tools.show-on-hover {
	opacity: 1;
}

/* Quick View overlay — slides up from bottom */
.cp-products-slide .image-tools.hover-slide-in {
	transform: translate3d(0, 100%, 0);
	transition: transform 0.3s ease;
	will-change: transform;
}
.cp-products-slide:hover .image-tools.hover-slide-in {
	transform: translate3d(0, 0, 0);
}

/* Quick View button — Flatsome's style for .quick-view_custom */
.cp-products-slide .quick-view_custom {
	display: block;
	padding: 12px;
	background: var(--fs-color-primary, #5d1587);
	color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}
.cp-products-slide .quick-view_custom:hover {
	background: #000;
	color: #fff;
}

/* Hide image-tools on touch devices (no hover capability) */
@media (hover: none) {
	.cp-products-slide .image-tools.show-on-hover,
	.cp-products-slide .image-tools.hover-slide-in {
		display: none;
	}
}

/* ============================================================
   Equal title heights — CSS-only equivalent of Flatsome's
   equalize-box JS. All titles clamp to 3 lines and reserve
   the same vertical space, keeping prices aligned across cards.
   ============================================================ */
.cp-products-slide .name.product-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
	min-height: calc(1.3em * 3);
	margin-top: 4px;
	margin-bottom: 8px;
}
.cp-products-slide .name.product-title a {
	display: block;
}