/**
 * Aproxian Product Carousel — base styles.
 * Visual defaults tuned for a soft, rounded, "kids" aesthetic.
 * Most colours/sizes are overridable from the Elementor Style tab.
 */

.apc-wrapper {
	width: 100%;
	/* arrow variables live here so they reach arrows in .apc-stage */
	--apc-arrow-icon: 16px;
	--apc-arrow-gutter: 54px;
	--swiper-navigation-color: #fff;
}

/* stage holds the swiper + arrows and is the positioning context for arrows */
.apc-stage {
	position: relative;
	width: 100%;
}
.apc-wrapper.apc-arrows-outside .apc-stage {
	padding-left: var(--apc-arrow-gutter, 54px);
	padding-right: var(--apc-arrow-gutter, 54px);
}

/* ---- Optional header ---- */
.apc-header {
	margin-bottom: 22px;
}
.apc-header .apc-heading-title {
	margin: 0 0 6px;
	color: #2b2b2b;
	font-weight: 700;
	line-height: 1.2;
}
.apc-header .apc-heading-subtitle {
	margin: 0;
	color: #6b6b6b;
}


/* ---- First-paint / pre-Swiper layout ----
 * Swiper's own base CSS makes every .swiper-slide width:100% until JS initialises.
 * On slower Safari/WebKit loads that can briefly render one enormous product card.
 * Keep the uninitialised carousel clipped to its stage. JS now initialises from the
 * footer immediately; this rule is only a safety net for the tiny pre-init window.
 */
.apc-swiper:not(.swiper-initialized) {
	overflow: hidden;
}
.apc-swiper:not(.swiper-initialized) .swiper-wrapper {
	visibility: hidden;
}
.apc-swiper.swiper-initialized .swiper-wrapper {
	visibility: visible;
}

/* ---- Swiper container ---- */
.apc-swiper {
	position: relative;
	width: 100%;
}
.apc-swiper .swiper-wrapper {
	align-items: stretch;
	box-sizing: border-box;
}
.apc-swiper .swiper-slide {
	height: auto;
	display: flex;
}

/* ---- Card ---- */
.apc-product-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.apc-product-card:hover {
	transform: translateY(-4px);
}

/* ---- Image ---- */
.apc-card-image {
	position: relative;
	display: block;
	overflow: hidden;
	background: #fdf1ec;
	border-radius: 18px;
	aspect-ratio: 1;
}
.apc-card-image img,
.apc-card-image .apc-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}
.apc-card-image.apc-zoom:hover img {
	transform: scale(1.07);
}
.apc-card-image.apc-ratio-auto {
	aspect-ratio: auto;
}
.apc-card-image.apc-ratio-auto img {
	height: auto;
}

/* ---- Badges (.product-labels structure) ---- */
.product-labels {
	position: absolute;
	top: 3%;
	left: 3%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}
.product-labels > span {
	display: inline-block;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.2px;
	border-radius: 50px;
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.product-labels > span span {
	display: inline-block;
	width: 100%;
}
.product-labels .onsale,
.product-labels .out-of-stock {
	height: 42px;
	min-height: 42px;
	line-height: 42px;
	padding: 0 12px; /* zero vertical padding so the fixed 42px height centers the text */
	background-color: var(--wdtPrimaryColor);
	text-transform: uppercase !important;
}
.apc-product-card.apc-is-oos .apc-card-image img {
	opacity: 0.72;
	filter: grayscale(0.15);
}

/* ---- Body ---- */
.apc-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 14px;
	text-align: center;
}
.apc-cat {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #9aa0a6;
}
.apc-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}
.apc-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.apc-title a:hover {
	color: #ef3f8f;
}

/* ---- Rating ---- */
.apc-rating {
	display: flex;
	color: #ffb800;
	font-size: 14px;
	line-height: 1;
}
.apc-rating .star-rating {
	margin: 0;
	font-size: 1em;
	width: 5.4em;
	height: 1em;
	color: inherit;
}
.apc-rating .star-rating::before {
	color: currentColor;
	opacity: 0.28;
}
.apc-rating .star-rating span::before {
	color: currentColor;
}

/* ---- Price ---- */
.apc-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	color: #ef3f8f;
}
.apc-price del {
	font-weight: 500;
	opacity: 1;
	color: #b9b9b9;
}
.apc-price del .amount {
	color: #b9b9b9;
}
.apc-price ins {
	text-decoration: none;
}

/* ---- Add to cart button ---- */
.apc-add-to-cart {
	display: inline-block;
	margin-top: 8px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #ef3f8f;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	align-self: center;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.apc-add-to-cart:hover,
.apc-add-to-cart:focus {
	background: #d92d79;
	color: #fff;
}
.apc-add-to-cart.loading {
	opacity: 0.75;
	pointer-events: none;
}
.apc-add-to-cart.added::after {
	content: "✓";
	margin-left: 6px;
}

/* ---- Arrows (siblings of .apc-swiper inside .apc-stage) ---- */
.apc-stage > .apc-arrow {
	position: absolute;
	z-index: 10;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	/* JS sets --apc-arrow-top to the image centre; falls back to card centre */
	top: var(--apc-arrow-top, 50%);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	line-height: 1;
	background: #ef3f8f;
	border: none;
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(239, 63, 143, 0.28);
	transition: background-color 0.2s ease, opacity 0.2s ease;
	cursor: pointer;
}
/* "Centre on card" mode ignores the JS-measured image centre */
.apc-varrow-card .apc-stage > .apc-arrow {
	top: 50%;
}

/* Inside: arrows overlaid on the cards */
.apc-arrows-inside .apc-stage > .swiper-button-prev { left: 6px; }
.apc-arrows-inside .apc-stage > .swiper-button-next { right: 6px; }

/* Outside: arrows sit in the reserved side gutters */
.apc-arrows-outside .apc-stage > .swiper-button-prev { left: 0; }
.apc-arrows-outside .apc-stage > .swiper-button-next { right: 0; }

.apc-stage > .apc-arrow:hover {
	background: #d92d79;
}
.apc-stage > .apc-arrow::after {
	font-family: swiper-icons; /* Swiper's icon font */
	font-size: var(--apc-arrow-icon, 16px) !important;
	font-weight: 700;
	line-height: 1;
	color: var(--swiper-navigation-color, #fff);
	text-transform: none;
	letter-spacing: 0;
}
.apc-stage > .swiper-button-prev::after { content: 'prev'; }
.apc-stage > .swiper-button-next::after { content: 'next'; }
.apc-stage > .apc-arrow.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}
.apc-stage > .apc-arrow.swiper-button-lock {
	display: none;
}

/* ---- Dots (rendered OUTSIDE the .swiper, in normal flow) ---- */
.apc-dots-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 22px;
	/* dot variables (driven by the Style tab; consumed below with !important
	   so the theme's own Swiper pagination CSS can't override them) */
	--apc-dot-size: 9px;
	--apc-dot-gap: 6px;
	--apc-dot-color: #f6c4d9;
	--apc-dot-active: #ef3f8f;
}
.apc-dots-wrap > .apc-dots.swiper-pagination {
	position: relative;
	inset: auto;
	width: auto;          /* Swiper sets an inline px width in dynamic mode; the flex parent centers it */
	max-width: 100%;
	margin: 0;
	text-align: center;
	line-height: 1;
}
.apc-dots-wrap .swiper-pagination-bullet {
	box-sizing: border-box;
	width: var(--apc-dot-size, 9px) !important;
	height: var(--apc-dot-size, 9px) !important;
	margin: 0 var(--apc-dot-gap, 6px) !important;
	background-color: var(--apc-dot-color, #f6c4d9) !important;
	opacity: 1 !important;
	border-radius: 50% !important;
	transition: width 0.25s ease, background-color 0.25s ease;
}
.apc-dots-wrap .swiper-pagination-bullet-active {
	background-color: var(--apc-dot-active, #ef3f8f) !important;
}
/* "pill" active bullet only for normal (non-dynamic) pagination */
.apc-dots-wrap > .apc-dots:not(.swiper-pagination-bullets-dynamic) .swiper-pagination-bullet-active {
	width: calc(var(--apc-dot-size, 9px) * 2.4) !important;
	border-radius: 50px !important;
}

/* ---- Editor empty notice ---- */
.apc-empty {
	padding: 28px;
	text-align: center;
	color: #888;
	border: 1px dashed #d6d6d6;
	border-radius: 12px;
	background: #fafafa;
}