/* ============================================================
   Infinite Product Carousel – carousel.css  v2.0
   ============================================================ */

/* ---- Outer wrapper: holds all CSS custom properties ---- */
.ipc-carousel-outer {
	width: 100%;
	position: relative;

	/* Layout tokens (Elementor writes here via selectors) */
	--ipc-cards-per-view: 4;
	--ipc-card-gap: 20px;
	--ipc-card-width: calc(
		(100% - (var(--ipc-cards-per-view) - 1) * var(--ipc-card-gap)) /
		var(--ipc-cards-per-view)
	);

	/* Card tokens */
	--ipc-card-bg:            #ffffff;
	--ipc-card-bg-hover:      #f7f7f7;
	--ipc-card-border-color:  #eeeeee;
	--ipc-card-border-width:  1px;
	--ipc-card-border-style:  solid;
	--ipc-card-border-radius: 8px;
	--ipc-card-padding:       0px;
	--ipc-card-margin:        0px;
	--ipc-card-height:        auto;

	/* Image tokens */
	--ipc-img-width:          100%;
	--ipc-img-height:         auto;
	--ipc-img-object-fit:     cover;
	--ipc-img-border-color:   transparent;
	--ipc-img-border-width:   0px;
	--ipc-img-border-style:   solid;
	--ipc-img-border-radius:  0px;
	--ipc-img-padding:        0px;
	--ipc-img-margin:         0px;
	--ipc-img-box-shadow:     none;
	--ipc-img-hover-shadow:   none;
	--ipc-img-hover-scale:    1.05;
	--ipc-img-hover-border-color: transparent;

	/* Button tokens */
	--ipc-btn-bg:             #1a1a1a;
	--ipc-btn-bg-hover:       #444444;
	--ipc-btn-color:          #ffffff;
	--ipc-btn-color-hover:    #ffffff;
	--ipc-btn-border:         none;
	--ipc-btn-border-radius:  4px;
	--ipc-btn-width:          100%;
	--ipc-btn-height:         auto;
	--ipc-btn-padding:        10px 16px;
	--ipc-btn-font-size:      13px;
	--ipc-btn-font-weight:    600;
	--ipc-btn-icon-size:      14px;
}

/* ---- Viewport: clips the overflowing track ---- */
.ipc-carousel-viewport {
	width: 100%;
	overflow: hidden;
	position: relative;
}

/* ---- Scrolling track ---- */
.ipc-carousel-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;        /* NEVER stack vertically */
	align-items: stretch;
	gap: var(--ipc-card-gap);
	width: max-content;       /* shrink-wraps to its children */
	will-change: transform;
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* ---- Product card ---- */
.ipc-product-card {
	flex: 0 0 var(--ipc-card-width);
	width: var(--ipc-card-width);
	height: var(--ipc-card-height);
	box-sizing: border-box;
	background: var(--ipc-card-bg);
	border-color: var(--ipc-card-border-color);
	border-width: var(--ipc-card-border-width);
	border-style: var(--ipc-card-border-style);
	border-radius: var(--ipc-card-border-radius);
	padding: var(--ipc-card-padding);
	margin: var(--ipc-card-margin);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ipc-product-card:hover {
	background: var(--ipc-card-bg-hover);
}

/* ---- Product Image wrapper ---- */
.ipc-product-image {
	position: relative;
	overflow: hidden;
	width: 100%;
	flex-shrink: 0;
	/* Dark overlay on hover – applied via ::after */
}

/* Semi-transparent overlay that darkens the image on hover */
.ipc-product-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background 0.35s ease;
	pointer-events: none;
	z-index: 1;
}

.ipc-product-card:hover .ipc-product-image::after,
.ipc-product-card.ipc-card-touched .ipc-product-image::after {
	background: rgba(0, 0, 0, 0.28);
}

.ipc-product-image img {
	display: block;
	width: var(--ipc-img-width);
	height: var(--ipc-img-height);
	object-fit: var(--ipc-img-object-fit);
	border-color: var(--ipc-img-border-color);
	border-width: var(--ipc-img-border-width);
	border-style: var(--ipc-img-border-style);
	border-radius: var(--ipc-img-border-radius);
	padding: var(--ipc-img-padding);
	margin: var(--ipc-img-margin);
	box-shadow: var(--ipc-img-box-shadow);
	box-sizing: border-box;
	transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.ipc-product-card:hover .ipc-product-image img {
	transform: scale(var(--ipc-img-hover-scale));
	box-shadow: var(--ipc-img-hover-shadow);
	border-color: var(--ipc-img-hover-border-color);
}

/* ---- Product content area ---- */
.ipc-product-content {
	padding: 12px 16px 16px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* ---- Title ---- */
.ipc-product-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 8px;
	line-height: 1.4;
	color: #222;
}

/* ---- Price ---- */
.ipc-product-price {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	margin-bottom: 12px;
}

/* ============================================================
   Add-to-Cart – IMAGE OVERLAY (centered on the product photo)
   ============================================================ */

/* Container is absolute, centered inside .ipc-product-image */
.ipc-product-add-to-cart {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	width: auto;
	min-width: 70%;
	max-width: 88%;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	z-index: 2;           /* above the ::after overlay */
}

/* Reveal on desktop hover */
.ipc-product-card:hover .ipc-product-add-to-cart,
.ipc-product-card.ipc-card-touched .ipc-product-add-to-cart {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ---- Buy Now Button ---- */
.ipc-product-add-to-cart .button,
.ipc-product-add-to-cart a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: var(--ipc-btn-width);
	height: var(--ipc-btn-height);
	text-align: center;
	background: var(--ipc-btn-bg);
	color: var(--ipc-btn-color) !important;
	padding: var(--ipc-btn-padding);
	border: var(--ipc-btn-border);
	border-radius: var(--ipc-btn-border-radius);
	text-decoration: none;
	font-size: var(--ipc-btn-font-size);
	font-weight: var(--ipc-btn-font-weight);
	cursor: pointer;
	box-sizing: border-box;
	white-space: nowrap;
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
	transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
	pointer-events: auto;
}

.ipc-product-add-to-cart .button:hover,
.ipc-product-add-to-cart a.button:hover {
	background: var(--ipc-btn-bg-hover);
	color: var(--ipc-btn-color-hover) !important;
	transform: scale(1.04);
}

.ipc-product-add-to-cart .button .ipc-btn-icon,
.ipc-product-add-to-cart a.button .ipc-btn-icon {
	font-size: var(--ipc-btn-icon-size);
	line-height: 1;
}

/* ============================================================
   Mobile – smaller button, tap-to-show
   ============================================================ */
@media (max-width: 767px) {
	.ipc-product-add-to-cart {
		min-width: 80%;
		bottom: 10px;
	}

	.ipc-product-add-to-cart .button,
	.ipc-product-add-to-cart a.button {
		font-size: 11px;
		padding: 7px 10px;
		border-radius: calc(var(--ipc-btn-border-radius) * 0.8);
		gap: 4px;
	}
}

/* ============================================================
   Responsive defaults
   Elementor's responsive selectors override --ipc-cards-per-view
   on .ipc-carousel-outer at each breakpoint automatically.
   These are just safe fallbacks.
   ============================================================ */
@media (max-width: 1024px) {
	.ipc-carousel-outer {
		--ipc-cards-per-view: 3;
	}
}

@media (max-width: 767px) {
	/* Mobile: Elementor mobile control drives this.
	   Default fallback = 2 cards. */
	.ipc-carousel-outer {
		--ipc-cards-per-view: 2;
	}

	/* When the widget's mobile_products_per_row = '1',
	   the PHP render adds data-mobile-cols="1" → JS adds class. */
	.ipc-carousel-outer.ipc-mobile-cols-1 {
		--ipc-cards-per-view: 1;
	}

	/* Disable the continuous scroll on very narrow screens
	   when 1 col is forced — flip to a simple scroll instead. */
	.ipc-carousel-outer.ipc-mobile-cols-1 .ipc-carousel-viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
	}

	.ipc-carousel-outer.ipc-mobile-cols-1 .ipc-carousel-track {
		/* Let JS still handle animation; keep transform approach */
	}
}