/* Product Category Carousel — self-contained styles.
   Scoped under .pcc-carousel so nothing leaks into or overrides
   the Elessi Nasa theme's own styles. */

.pcc-carousel {
	--pcc-img-w: 320px;
	--pcc-img-h: 320px;
	--pcc-gap: 20px;
	--pcc-items-desktop: 3;
	--pcc-items-tablet: 2;
	--pcc-items-mobile: 1;

	box-sizing: border-box;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

.pcc-carousel * {
	box-sizing: border-box;
}

.pcc-heading {
	text-align: center;
	letter-spacing: 0.08em;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.pcc-viewport {
	overflow: hidden;
	width: 100%;
	touch-action: pan-y;
	cursor: grab;
}

.pcc-viewport.pcc-dragging {
	cursor: grabbing;
}

.pcc-track {
	display: flex;
	align-items: flex-start;
	will-change: transform;
	/* transform transition is toggled off during drag via JS (.pcc-no-transition) */
	transition: transform 0.45s ease;
}

.pcc-track.pcc-no-transition {
	transition: none !important;
}

.pcc-slide {
	flex: 0 0 calc((100% - (var(--pcc-items-desktop) - 1) * var(--pcc-gap)) / var(--pcc-items-desktop));
	margin-right: var(--pcc-gap);
	text-align: center;
}

.pcc-slide:last-child {
	margin-right: 0;
}

.pcc-slide-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.pcc-image-wrap {
	width: 100%;
	height: var(--pcc-img-h);
	max-width: var(--pcc-img-w);
	margin: 0 auto;
	overflow: hidden;
	background: #f4f4f4;
}

/* When a locked ratio is supplied, it takes priority over the fixed pixel
   height so every image — regardless of its native size — occupies exactly
   the same proportions. This is what produces a perfectly even grid row. */
.pcc-carousel[style*="--pcc-img-ratio"] .pcc-image-wrap {
	height: auto;
	aspect-ratio: var(--pcc-img-ratio);
}

.pcc-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none; /* prevents ghost-drag of the native <img> */
	user-select: none;
}

.pcc-title {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pcc-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}

.pcc-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.2s ease, transform 0.15s ease;
	opacity: 0.75;
}

.pcc-arrow:hover {
	opacity: 1;
	transform: translateY(-1px);
}

.pcc-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pcc-arrow[disabled] {
	opacity: 0.3;
	cursor: not-allowed;
}

/* ---------- Static Grid mode ----------
   A perfectly even, non-scrolling row of images — every column exactly
   the same width, every image exactly the same height (via aspect-ratio
   or the fixed pixel height), with a single consistent gap. This is what
   powers the "grid perfection" layout (e.g. a 4-up photo gallery strip). */

.pcc-grid .pcc-grid-row {
	display: grid;
	grid-template-columns: repeat(var(--pcc-items-desktop), minmax(0, 1fr));
	gap: var(--pcc-gap);
	align-items: start;
	width: 100%;
}

.pcc-grid .pcc-slide {
	flex: none;
	margin-right: 0;
	width: 100%;
	min-width: 0; /* allows grid items to shrink below image intrinsic size */
}

.pcc-grid .pcc-image-wrap {
	max-width: none; /* let the grid column — not a pixel cap — define width */
	width: 100%;
}

.pcc-grid .pcc-controls {
	display: none; /* grid mode is static: no navigation/pagination needed */
}

@media (max-width: 991px) {
	.pcc-grid .pcc-grid-row {
		grid-template-columns: repeat(var(--pcc-items-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.pcc-grid .pcc-grid-row {
		grid-template-columns: repeat(var(--pcc-items-mobile), minmax(0, 1fr));
	}
}

.pcc-notice {
	text-align: center;
	padding: 16px;
	border: 1px dashed #ccc;
	color: #a00;
}

/* ---------- Responsive breakpoints ---------- */

@media (max-width: 991px) {
	.pcc-slide {
		flex-basis: calc((100% - (var(--pcc-items-tablet) - 1) * var(--pcc-gap)) / var(--pcc-items-tablet));
	}
}

@media (max-width: 575px) {
	.pcc-slide {
		flex-basis: calc((100% - (var(--pcc-items-mobile) - 1) * var(--pcc-gap)) / var(--pcc-items-mobile));
	}

	.pcc-heading {
		font-size: 18px;
	}
}