/**
 * CodeJack Products — Product Group grid styles.
 * Self-contained (own CSS variables, doesn't depend on frontend.css)
 * since a group shortcode can appear on a page with no single-product
 * shortcode on it. Mobile-first: base rules target small screens, with
 * `min-width` breakpoints layering on tablet/desktop enhancements.
 * Per-device column counts come in as inline custom properties on
 * `.cjkp-group__grid` (set by templates/group-grid.php) — the media
 * queries below just decide which property each breakpoint reads.
 */

.cjkp-group {
	--cjkp-group-accent: #25D366;
	--cjkp-group-accent-dark: #128C7E;
	--cjkp-group-text: #1d2327;
	--cjkp-group-heading: #14171a;
	--cjkp-group-price-color: #14171a;
	--cjkp-group-muted: #63707a;
	--cjkp-group-border: #e5e8ec;
	--cjkp-group-bg-soft: #f6f7f9;
	--cjkp-group-radius-sm: 8px;
	--cjkp-group-radius: 14px;
	--cjkp-group-radius-lg: 20px;
	--cjkp-group-shadow-sm: 0 1px 3px rgba(20, 20, 30, 0.06);
	--cjkp-group-shadow: 0 10px 28px rgba(20, 20, 30, 0.10);
	--cjkp-group-shadow-lg: 0 22px 48px rgba(20, 20, 30, 0.18);
	--cjkp-group-ease: cubic-bezier(0.22, 1, 0.36, 1);

	box-sizing: border-box;
	max-width: 1240px;
	margin: 0 auto;
	color: var(--cjkp-group-text);
	-webkit-tap-highlight-color: transparent;
}

.cjkp-group *,
.cjkp-group *::before,
.cjkp-group *::after {
	box-sizing: inherit;
}

.cjkp-group img {
	max-width: 100%;
	display: block;
}

.cjkp-group__title {
	margin: 0 0 20px;
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--cjkp-group-heading);
}

.cjkp-error {
	padding: 10px 14px;
	border-radius: var(--cjkp-group-radius-sm, 8px);
	background: #fdecec;
	color: #7a1f1f;
	font-size: 14px;
}

/* -------------------------------------------------------------- */
/* Grid — column counts are supplied per breakpoint via CSS vars   */
/* -------------------------------------------------------------- */

.cjkp-group__grid {
	--cjkp-group-cols-mobile: 1;
	--cjkp-group-cols-tablet: 2;
	--cjkp-group-cols-desktop: 4;
	--cjkp-group-gap: 22px;

	display: grid;
	grid-template-columns: repeat(var(--cjkp-group-cols-mobile), minmax(0, 1fr));
	gap: var(--cjkp-group-gap);
}

@media (min-width: 600px) {
	.cjkp-group__grid {
		grid-template-columns: repeat(var(--cjkp-group-cols-tablet), minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.cjkp-group__grid {
		grid-template-columns: repeat(var(--cjkp-group-cols-desktop), minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------- */
/* Card — shared skeleton, layout modifiers below change the skin */
/* -------------------------------------------------------------- */

.cjkp-group-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.cjkp-group-card__media {
	position: relative;
	overflow: hidden;
	background: var(--cjkp-group-bg-soft);
	aspect-ratio: 1 / 1;
}

/*
 * Pinned to the box instead of sized by percentage height, and with
 * extra specificity: page builders ship resets such as Elementor's
 * `.elementor img { height: auto }` which otherwise shrink a landscape
 * photo to its natural height and leave a blank strip underneath.
 */
.cjkp-group .cjkp-group-card__media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform 0.5s var(--cjkp-group-ease);
}

.cjkp-group-card__media--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--cjkp-group-bg-soft) 25%, #eceef1 25%, #eceef1 50%, var(--cjkp-group-bg-soft) 50%, var(--cjkp-group-bg-soft) 75%, #eceef1 75%, #eceef1 100%);
	background-size: 28px 28px;
}

.cjkp-group-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.cjkp-group-card__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cjkp-group-heading);
	overflow-wrap: anywhere;
}

.cjkp-group-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--cjkp-group-price-color);
}

.cjkp-group-card__price-original {
	font-size: 13px;
	font-weight: 400;
	color: var(--cjkp-group-muted);
	text-decoration: line-through;
}

.cjkp-group-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	border: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cjkp-group-card__btn--disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ================================================================ */
/* Layout: Elegant Card — soft shadow, rounded, hover-lift           */
/* ================================================================ */

.cjkp-group--elegant .cjkp-group-card {
	background: #fff;
	border-radius: var(--cjkp-group-radius-lg);
	box-shadow: var(--cjkp-group-shadow-sm);
	padding: 14px 14px 18px;
	transition: transform 0.3s var(--cjkp-group-ease), box-shadow 0.3s var(--cjkp-group-ease);
}

.cjkp-group--elegant .cjkp-group-card__media {
	border-radius: var(--cjkp-group-radius);
	margin-bottom: 16px;
}

.cjkp-group--elegant .cjkp-group-card__btn {
	background: var(--cjkp-group-accent);
	color: #fff;
	border-radius: 999px;
	padding: 10px 20px;
	align-self: stretch;
	margin-top: 4px;
}

@media (hover: hover) {
	.cjkp-group--elegant .cjkp-group-card:hover {
		transform: translateY(-6px);
		box-shadow: var(--cjkp-group-shadow-lg);
	}

	.cjkp-group--elegant .cjkp-group-card__btn:hover {
		background: var(--cjkp-group-accent-dark);
	}
}

/* ================================================================ */
/* Layout: Minimal Clean — borderless, flat, text-link CTA           */
/* ================================================================ */

.cjkp-group--minimal .cjkp-group-card__media {
	border-radius: var(--cjkp-group-radius-sm);
	margin-bottom: 14px;
}

.cjkp-group--minimal .cjkp-group-card__btn {
	align-self: flex-start;
	background: none;
	color: var(--cjkp-group-heading);
	padding: 0;
	border-bottom: 1.5px solid var(--cjkp-group-border);
	padding-bottom: 2px;
	border-radius: 0;
}

.cjkp-group--minimal .cjkp-group-card__btn span::after {
	content: '\2192';
	display: inline-block;
	margin-left: 6px;
	transition: transform 0.25s var(--cjkp-group-ease);
}

@media (hover: hover) {
	.cjkp-group--minimal .cjkp-group-card__media img {
		transition: transform 0.6s var(--cjkp-group-ease);
	}

	.cjkp-group--minimal .cjkp-group-card:hover .cjkp-group-card__media img {
		transform: scale(1.03);
	}

	.cjkp-group--minimal .cjkp-group-card__btn:hover {
		color: var(--cjkp-group-accent-dark);
		border-color: var(--cjkp-group-accent-dark);
	}

	.cjkp-group--minimal .cjkp-group-card__btn:hover span::after {
		transform: translateX(3px);
	}
}

/* ================================================================ */
/* Layout: Bold Overlay — full-bleed image, glass CTA over gradient  */
/* ================================================================ */

.cjkp-group--overlay .cjkp-group-card {
	position: relative;
	border-radius: var(--cjkp-group-radius-lg);
	overflow: hidden;
}

.cjkp-group--overlay .cjkp-group-card__media {
	border-radius: var(--cjkp-group-radius-lg);
	aspect-ratio: 4 / 5;
}

.cjkp-group--overlay .cjkp-group-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 12, 16, 0.75) 0%, rgba(10, 12, 16, 0.15) 45%, rgba(10, 12, 16, 0) 65%);
	pointer-events: none;
}

/* Text and CTA sit over the image, above the gradient. */
.cjkp-group--overlay .cjkp-group-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 16px;
	gap: 6px;
}

.cjkp-group--overlay .cjkp-group-card__title,
.cjkp-group--overlay .cjkp-group-card__price {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.cjkp-group--overlay .cjkp-group-card__price-original {
	color: rgba(255, 255, 255, 0.75);
}

.cjkp-group--overlay .cjkp-group-card__btn {
	align-self: stretch;
	margin-top: 4px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	border-radius: 999px;
	padding: 11px 18px;
}

.cjkp-group--overlay .cjkp-group-card__btn--disabled {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

@media (hover: hover) {
	.cjkp-group--overlay .cjkp-group-card__media {
		transition: box-shadow 0.3s ease;
	}

	.cjkp-group--overlay .cjkp-group-card:hover .cjkp-group-card__media img {
		transform: scale(1.08);
	}

	.cjkp-group--overlay .cjkp-group-card__btn:hover {
		background: rgba(255, 255, 255, 0.28);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cjkp-group-card,
	.cjkp-group-card__media img,
	.cjkp-group-card__btn,
	.cjkp-group-card__btn span::after {
		transition: none !important;
	}
}

/* ================================================================ */
/* Related products slider ("You May Also Like")                    */
/* ================================================================ */

.cjkp-related {
	--cjkp-related-per-view: 1.25; /* phones: one card plus a peek of the next */
	--cjkp-related-gap: 16px;

	box-sizing: border-box;
	max-width: 1200px;
	margin: 56px auto 0;
	-webkit-tap-highlight-color: transparent;
}

@media (min-width: 600px) {
	.cjkp-related {
		--cjkp-related-per-view: 2.5;
		--cjkp-related-gap: 20px;
	}
}

@media (min-width: 992px) {
	.cjkp-related {
		--cjkp-related-per-view: 4;
		--cjkp-related-gap: 22px;
	}
}

.cjkp-related *,
.cjkp-related *::before,
.cjkp-related *::after {
	box-sizing: border-box;
}

.cjkp-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.cjkp-related__title {
	margin: 0;
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #14171a;
}

.cjkp-related__arrows {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

/* `display: flex` above would otherwise override the hidden attribute. */
.cjkp-related__arrows[hidden] {
	display: none;
}

/* Arrows are for mouse users; touch screens swipe. */
@media (hover: none) {
	.cjkp-related__arrows {
		display: none;
	}
}

.cjkp-related .cjkp-group {
	max-width: none;
	margin: 0;
}

.cjkp-related__track {
	display: flex;
	gap: var(--cjkp-related-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Match the side padding below, so the first card snaps to 0. */
	scroll-padding-inline: 4px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Room for the cards' hover lift and shadow, which a scroller clips. */
	padding: 8px 4px 24px;
	margin: -8px -4px -16px;
}

.cjkp-related__track::-webkit-scrollbar {
	display: none;
}

.cjkp-related__track:focus-visible {
	outline: 2px solid #1d2327;
	outline-offset: 2px;
	border-radius: 8px;
}

.cjkp-related__slide {
	flex: 0 0 calc((100% - var(--cjkp-related-gap) * (var(--cjkp-related-per-view) - 1)) / var(--cjkp-related-per-view));
	min-width: 0;
	scroll-snap-align: start;
}

/*
 * The arrows are <button>s, so — like the gallery buttons — they restate
 * every state at a specificity theme / Elementor button styles don't
 * reach. Hover is an effect only (a small lift), never a colour change.
 */
.cjkp-related .cjkp-related__arrow,
.cjkp-related .cjkp-related__arrow:hover,
.cjkp-related .cjkp-related__arrow:focus,
.cjkp-related .cjkp-related__arrow:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #e5e8ec;
	border-radius: 50%;
	background: #fff;
	color: #1d2327;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 1px 3px rgba(20, 20, 30, 0.06);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
	.cjkp-related .cjkp-related__arrow:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 28px rgba(20, 20, 30, 0.1);
	}
}

.cjkp-related .cjkp-related__arrow:disabled,
.cjkp-related .cjkp-related__arrow:disabled:hover {
	opacity: 0.35;
	cursor: default;
	transform: none;
	box-shadow: none;
}

.cjkp-related .cjkp-related__arrow svg {
	display: block;
	width: 18px;
	height: 18px;
}

@media (prefers-reduced-motion: reduce) {
	.cjkp-related__track {
		scroll-behavior: auto;
	}

	.cjkp-related .cjkp-related__arrow {
		transition: none;
	}
}

/* Screen-edge gutter on narrow screens — see the note in frontend.css.
   The px value in each rule matches that box's max-width. */
.cjkp-group {
	padding-inline: max(0px, calc(16px - (100vw - min(100%, 1240px)) / 2));
}

.cjkp-related {
	padding-inline: max(0px, calc(16px - (100vw - min(100%, 1200px)) / 2));
}

/* The card wrapper inside the slider sits within the already-padded section. */
.cjkp-related .cjkp-group {
	padding-inline: 0;
}