/* ECP Loop Carousel links v1.2.0 (2026-10-09) - card link styling for Elementor Loop Carousels
   + home "More Ceramic Categories To Shop" laid out like the ECP product carousels. */
.elementor-widget-loop-carousel a.e-con {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	-webkit-user-drag: none;
}
.elementor-widget-loop-carousel a.e-con:hover,
.elementor-widget-loop-carousel a.e-con:focus {
	text-decoration: none;
}
/* Keyboard focus ring: a pseudo-element drawn INSIDE the card and above the picture, so neither the
   picture container nor the carousel's overflow:hidden can hide or clip it. */
.elementor-widget-loop-carousel a.e-con {
	position: relative;
}
.elementor-widget-loop-carousel a.e-con:focus-visible {
	outline: none;
}
.elementor-widget-loop-carousel a.e-con:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	border: 3px solid var(--e-global-color-primary, #1d2b4a);
	box-shadow: inset 0 0 0 2px #fff;
	pointer-events: none;
}
.elementor-widget-loop-carousel a.e-con:focus:not(:focus-visible) {
	outline: none;
}
.elementor-widget-loop-carousel .swiper-slide img {
	-webkit-user-drag: none;
}

/* ── Home "More Ceramic Categories To Shop" = the ECP product carousels' layout (v1.2.0) ──────────────────────
   Product carousels: 30px left inset (12px on phones), ~280px square images (70vw on phones), 24px gap (12px),
   track runs to the right screen edge with a peek, 4px above the cards, arrows on the image centre.
   Swiper sizes slides from the swiper box: content width = 100cqw - inset - P, split into N slides with gap G;
   anything in the right padding P is still inside the (overflow-hidden) box, so it shows as the peek.
   N and G per range MUST match ecp_cat_slider_layout_settings() in inc/ecp-loop-carousel-links.php
   (Swiper breakpoints are min-widths: 767 / 880 / 1024 / 1200 / 1366 / 2400). */
body.home .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside {
	--ecp-cat-inset: 30px;
	--ecp-cat-n: 5;
	--ecp-cat-g: 24px;
	--ecp-cat-p: 64px; /* = 24px gap + 40px peek of the next card */
	--ecp-cat-card: calc((100cqw - var(--ecp-cat-inset) - var(--ecp-cat-p) - (var(--ecp-cat-n) - 1) * var(--ecp-cat-g)) / var(--ecp-cat-n));
	/* Elementor pre-init layout vars (no shift when Swiper starts) */
	--swiper-slides-to-display: var(--ecp-cat-n);
	--swiper-slides-gap: var(--ecp-cat-g);
	--swiper-offset-size: var(--ecp-cat-p);
	container-type: inline-size;
	/* bottom: card title + 20px, like the product carousels (their 8px + 12px padding); was 72px for arrows */
	padding-bottom: 12px !important;
}
@media (min-width: 2400px) { body.home .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside { --ecp-cat-n: 7; } }
@media (min-width: 1200px) and (max-width: 1365.98px) { body.home .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside { --ecp-cat-n: 4; } }
@media (min-width: 880px) and (max-width: 1199.98px) { body.home .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside { --ecp-cat-n: 3; } }
@media (min-width: 767px) and (max-width: 879.98px) { body.home .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside { --ecp-cat-n: 2; } }
@media (max-width: 766.98px) {
	body.home .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside {
		--ecp-cat-inset: 12px;
		--ecp-cat-n: 1;
		--ecp-cat-g: 12px;
		--ecp-cat-p: calc(30cqw - 12px); /* card = 70% of the screen, like the product carousels */
	}
}
body.home .elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside .swiper.elementor-loop-container {
	width: calc(100% - var(--ecp-cat-inset));
	margin: 0 0 0 var(--ecp-cat-inset);
	padding-top: 4px; /* (a margin would collapse into the widget's 15px) */
	padding-inline-end: var(--ecp-cat-p);
}
/* square picture (was a 500px / 300px tall portrait); background-size: cover crops any category image */
body.home .elementor-widget-loop-carousel .swiper-slide a.e-con > .e-con-inner > .e-con:first-child {
	--min-height: 0px;
	min-height: 0 !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	background-size: cover !important;
	background-position: center center !important;
}
body.home .elementor-widget-loop-carousel .swiper-slide a.e-con > .e-con-inner {
	row-gap: 12px !important;
}
/* arrows: on the picture like the product carousels (were centred under the track) */
body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev,
body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next {
	position: absolute !important;
	top: calc(19px + var(--ecp-cat-card) / 2) !important; /* 15px widget margin + 4px + half the square picture */
	bottom: auto !important;
	transform: translateY(-50%) !important;
	z-index: 5 !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	border-radius: 8px !important;
	background: #f5f3ef !important;
	color: #2a3a52 !important;
	fill: #2a3a52 !important;
	box-shadow: 0 1px 3px rgba(42, 58, 82, 0.12) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev {
	left: calc(var(--ecp-cat-inset) + 8px) !important;
	right: auto !important;
}
body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next {
	left: auto !important;
	right: calc(var(--ecp-cat-inset) + 8px) !important;
}
body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button svg {
	width: 18px !important;
	height: 18px !important;
	fill: #2a3a52 !important;
}
body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button:hover {
	background: #ede9e2 !important;
}
@media (max-width: 766.98px) {
	body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev,
	body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next {
		width: 40px !important;
		height: 40px !important;
	}
	body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev { left: 20px !important; }
	body.home .elementor-element.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next { right: 20px !important; }
}