/* GC Product Carousel — horizontally-scrolling WooCommerce carousel.
   All appearance flows through the --pc-* variable contract; defaults fall
   back to the theme tokens so an untouched widget matches the site. */

.gc-pc {
	--pc-gap: 24px;
	--pc-card: 264px;
	--pc-radius: var(--gc-radius-md, 16px);
	--pc-ratio: 1 / 1;
	--pc-edge: 24px;
	--pc-fade-x: 64px;
	--pc-fade-xl: var(--pc-fade-x);
	--pc-fade-xr: var(--pc-fade-x);
	--pc-fade-reach: 50%;
	--pc-fade-center: 50%;
	--pc-fade-offset: 0px;
	--pc-fade-band: 72%;
	--pc-fade-soft: 14%;
	--pc-fade-opacity: 100%;
	--pc-fade-top: 14%;
	--pc-fade-bottom: 14%;
	--pc-room-t: 14px;
	--pc-room-b: 46px;
	--pc-room-x: 12px;
	--pc-bg: var(--gc-bg, #F4F8FB);
	--pc-eyebrow: var(--gc-blue-dark, #3D82B3);
	--pc-title: var(--gc-heading-color, #14212B);
	--pc-sub: var(--gc-muted, #5A6B75);
	--pc-card-bg: var(--gc-white, #FFFFFF);
	--pc-card-border: var(--gc-woo-border, #E1E9EE);
	--pc-media-bg: var(--gc-blue-light, #EAF3FA);
	--pc-name: var(--gc-ink, #14212B);
	--pc-price: var(--gc-blue-dark, #3D82B3);
	--pc-btn-start: var(--gc-cta-start, #5BA7DB);
	--pc-btn-end: var(--gc-cta-end, #3D82B3);
	--pc-btn-text: #FFFFFF;
	--pc-nav-bg: var(--gc-blue-light, #EAF3FA);
	--pc-nav-ink: var(--gc-blue-dark, #3D82B3);
	padding: 72px 0;
	background: var(--pc-bg);
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
}
.gc-pc *, .gc-pc *::before, .gc-pc *::after { box-sizing: border-box; }

.gc-pc--full { width: 100vw; margin-left: calc(50% - 50vw); }

/* Vertical fade. The clear stops are the paint colour mixed to nothing rather than
   the transparent keyword, which would drag the ramp through transparent black.
   Band mode paints a solid band and falls away above and below it; the band's centre
   is a percentage of the section, or a pixel offset JS measures from the card row.
   Edge mode is the older shape, ramping in from the top and bottom edges. */
/* Painted on its own layer rather than as the section's background, because the
   section is only as wide as whatever container it was dropped into. The layer is a
   viewport-wide box centred on the section, so the fade runs edge to edge even when
   the widget sits inside a padded container. */
.gc-pc--fade {
	--pc-fade-tint: var(--pc-fade-color, var(--pc-bg));
	--pc-fade-paint: color-mix(in srgb, var(--pc-fade-tint) var(--pc-fade-opacity), transparent);
	--pc-fade-clear: color-mix(in srgb, var(--pc-fade-tint), transparent 100%);
	--pc-fade-c: calc(var(--pc-fade-center) + var(--pc-fade-offset));
	position: relative;
	background-color: transparent;
}

.gc-pc--fade::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
}

.gc-pc--fade > * {
	position: relative;
	z-index: 1;
}

/* A flat band at full strength, falling away above and below it. */
.gc-pc--fade-band::before {
	--pc-fade-half: calc(var(--pc-fade-band) / 2);
	background-image: linear-gradient(
		to bottom,
		var(--pc-fade-clear) 0,
		var(--pc-fade-clear) calc(var(--pc-fade-c) - var(--pc-fade-half) - var(--pc-fade-soft)),
		var(--pc-fade-paint) calc(var(--pc-fade-c) - var(--pc-fade-half)),
		var(--pc-fade-paint) calc(var(--pc-fade-c) + var(--pc-fade-half)),
		var(--pc-fade-clear) calc(var(--pc-fade-c) + var(--pc-fade-half) + var(--pc-fade-soft)),
		var(--pc-fade-clear) 100%
	);
}

/* No flat section at all: two ramps back to back, full strength on the centre line
   and running out to nothing above and below it. */
.gc-pc--fade-linear::before {
	background-image: linear-gradient(
		to bottom,
		var(--pc-fade-clear) calc(var(--pc-fade-c) - var(--pc-fade-reach)),
		var(--pc-fade-paint) var(--pc-fade-c),
		var(--pc-fade-clear) calc(var(--pc-fade-c) + var(--pc-fade-reach))
	);
}

.gc-pc--fade-edges::before {
	background-image: linear-gradient(
		to bottom,
		var(--pc-fade-clear) 0,
		var(--pc-fade-paint) var(--pc-fade-top),
		var(--pc-fade-paint) calc(100% - var(--pc-fade-bottom)),
		var(--pc-fade-clear) 100%
	);
}

.gc-pc__inner { max-width: var(--gc-pc-max, var(--gc-container, 1312px)); margin: 0 auto; padding: 0 var(--pc-edge); }
.gc-pc--full .gc-pc__inner { max-width: none; }

/* Header */
.gc-pc__head { max-width: 640px; margin: 0 0 40px; }
.gc-pc--head-center .gc-pc__head { margin-left: auto; margin-right: auto; text-align: center; }
.gc-pc--head-left .gc-pc__head { text-align: left; }
.gc-pc__eyebrow { display: inline-block; margin-bottom: 14px; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-eyebrow); }
.gc-pc__title { margin: 0 0 .35em; font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 800; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; color: var(--pc-title); }
.gc-pc__sub { margin: 0; font-size: 16px; color: var(--pc-sub); }

/* Track */
.gc-pc__viewport { position: relative; }
/* Arrows live on the stage, a sibling of the viewport, so the loop viewport's
   overflow clip and side-fade mask never touch them. */
.gc-pc__stage { position: relative; }
.gc-pc__track { display: flex; gap: var(--pc-gap); justify-content: safe center; margin: 0; padding: var(--pc-room-t) var(--pc-room-x) var(--pc-room-b); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.gc-pc__track::-webkit-scrollbar { display: none; }
.gc-pc--fade-x .gc-pc__track {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pc-fade-xl), #000 calc(100% - var(--pc-fade-xr)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--pc-fade-xl), #000 calc(100% - var(--pc-fade-xr)), transparent 100%);
}
.gc-pc__slide { flex: 0 0 min(var(--pc-card), var(--pc-card-cap, 100%)); scroll-snap-align: start; }

/* Loop modes (marquee / infinite): JS drives a transform on the track, no
   native scroll, so the strip stays a continuous centred band with equal
   partial cards peeking at both edges. */
.gc-pc--loop .gc-pc__viewport { overflow: hidden; overflow-x: clip; overflow-y: visible; overflow-clip-margin: calc(var(--pc-gap, 24px) - 2px); }
.gc-pc--loop .gc-pc__track { justify-content: flex-start; overflow: visible; scroll-snap-type: none; will-change: transform; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
/* Marquee is transform-driven and hand-draggable; block the browser's native
   image drag so grabbing a card doesn't start a ghost-drag. */
.gc-pc--marquee .gc-pc__track img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.gc-pc--loop .gc-pc__slide { scroll-snap-align: none; }
/* For loop modes the side-fade belongs on the viewport, not the (oversized) track. */
.gc-pc--loop.gc-pc--fade-x .gc-pc__track { -webkit-mask-image: none; mask-image: none; }
.gc-pc--loop.gc-pc--fade-x .gc-pc__viewport {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pc-fade-xl), #000 calc(100% - var(--pc-fade-xr)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--pc-fade-xl), #000 calc(100% - var(--pc-fade-xr)), transparent 100%);
}

/* Card */
.gc-pc__card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--pc-card-bg); border: 1px solid var(--pc-card-border); border-radius: var(--pc-radius); box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20,33,43,.12)); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.gc-pc__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -10px rgba(20,33,43,.22); }
.gc-pc__media { position: relative; display: block; aspect-ratio: var(--pc-ratio); background: var(--pc-media-bg); overflow: hidden; border-radius: calc(var(--pc-radius) - 1px) calc(var(--pc-radius) - 1px) 0 0; }
.gc-pc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gc-pc__card:hover .gc-pc__media img { transform: scale(1.05); }
.gc-pc__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; flex: 1; }
.gc-pc--align-center .gc-pc__body { align-items: center; text-align: center; }
.gc-pc--align-left .gc-pc__body { align-items: flex-start; text-align: left; }
.gc-pc__name { font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--pc-name); }
.gc-pc__price { font-weight: 700; font-size: 15px; color: var(--pc-price); }
.gc-pc__price .amount, .gc-pc__price bdi, .gc-pc__price del, .gc-pc__price ins { color: inherit; }
.gc-pc__price del { opacity: .55; text-decoration: line-through; margin-right: 6px; font-weight: 500; }
.gc-pc__price ins { text-decoration: none; }
.gc-pc__btn { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding: 10px 18px; border-radius: var(--gc-radius-pill, 999px); background: linear-gradient(135deg, var(--pc-btn-start), var(--pc-btn-end)); color: var(--pc-btn-text); font-family: var(--gc-font-heading, "Manrope", sans-serif); font-weight: 600; font-size: 14px; box-shadow: var(--gc-shadow-button, 0 6px 16px -2px rgba(91,167,219,.3)); transition: gap .2s ease, filter .2s ease; }
.gc-pc__card:hover .gc-pc__btn { gap: 11px; filter: brightness(1.05); }
.gc-pc__btn svg { width: 16px; height: 16px; }

/* Arrows */
.gc-pc__nav { position: absolute; top: calc(50% - 24px); z-index: 4; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--gc-blue-lighter, #DCEEFA); border-radius: 50%; background: var(--pc-nav-bg); color: var(--pc-nav-ink); box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20,33,43,.12)); cursor: pointer; transition: background-color .2s ease, transform .2s ease, color .2s ease, opacity .2s ease; }
.gc-pc__nav:hover { background: var(--gc-blue, #5BA7DB); color: #fff; transform: scale(1.08); }
.gc-pc__nav svg { width: 22px; height: 22px; }
.gc-pc__nav--prev { left: -20px; }
.gc-pc__nav--next { right: -20px; }
.gc-pc__nav[disabled] { opacity: 0; pointer-events: none; }

/* Editor empty state */
.gc-pc--empty { padding: 28px; text-align: center; color: var(--gc-muted, #5A6B75); background: var(--gc-blue-light, #EAF3FA); border-radius: var(--gc-radius-md, 16px); font-family: var(--gc-font-body, "Inter", system-ui, sans-serif); }

@media (max-width: 900px) {
	.gc-pc { --pc-card: 232px; --pc-card-cap: 46vw; }
	.gc-pc__nav--prev { left: 4px; }
	.gc-pc__nav--next { right: 4px; }
}
@media (max-width: 640px) {
	.gc-pc {
		--pc-card: 240px;
		--pc-card-cap: 76vw;
		--pc-gap: 14px;
		--pc-edge: 20px;
		--pc-room-t: 8px;
		--pc-room-b: 24px;
		--pc-room-x: 4px;
		--pc-fade-x: 24px;
		--pc-ratio: 4 / 3;
		padding: 52px 0;
	}
	.gc-pc__nav { display: none; }
	.gc-pc--infinite .gc-pc__nav { display: inline-flex; width: 38px; height: 38px; }
	.gc-pc--infinite .gc-pc__nav--prev { left: 2px; }
	.gc-pc--infinite .gc-pc__nav--next { right: 2px; }
	.gc-pc__head { margin-bottom: 28px; }
	.gc-pc__eyebrow { font-size: 11px; letter-spacing: .04em; margin-bottom: 10px; }
	.gc-pc__title { font-size: clamp(22px, 5.4vw, 26px); }
	.gc-pc__sub { font-size: 14.5px; line-height: 1.5; }
	.gc-pc__body { gap: 6px; padding: 14px 16px 16px; }
	.gc-pc__name { font-size: 15px; }
	.gc-pc__price { font-size: 14px; }
	.gc-pc__btn { padding: 10px 16px; min-height: 44px; }
}
@media (max-width: 480px) {
	.gc-pc { --pc-edge: 16px; padding: 44px 0; }
	.gc-pc__title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
	.gc-pc__track { scroll-behavior: auto; }
	.gc-pc__card, .gc-pc__media img, .gc-pc__btn { transition: none; }
}

/* Eyebrow: one spec across every Gencore widget. Inter 11.5/600/.16em,
   uppercase, no trailing rule. */
.gc-pc__eyebrow {
	display: block;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 14px;
}

.gc-pc__eyebrow::before,
.gc-pc__eyebrow::after { display: none; }

@media (max-width: 640px) {
	.gc-pc__eyebrow { font-size: 10.5px; margin-bottom: 12px; }
}