/* KW Product Grid — front-end styles
   Lightweight, elegant, RTL-safe (logical properties throughout). */

.kw-pg {
	position: relative;
	/* sensible fallbacks; overridden inline per preset */
	--kw-cols-d: 4;
	--kw-cols-t: 3;
	--kw-cols-m: 2;
	--kw-gap: 20px;
	--kw-pad: 16px;
	--kw-pad-top: 16px;
	--kw-pad-bottom: 16px;
	--kw-pad-x: 16px;
	--kw-radius: 12px;

	/* within-card vertical spacing (minimum by default) */
	--kw-gap-media: 6px;
	--kw-gap-title: 2px;
	--kw-gap-rating: 2px;
	--kw-gap-price: 2px;
	--kw-gap-cart: 6px;

	/* title clamp / reserved height */
	--kw-title-min: 2.8em;
	--kw-title-clamp: 2;

	/* element font sizes */
	--kw-size-title: 14px;
	--kw-size-price: 15px;
	--kw-size-star: 14px;
	--kw-size-badge: 11px;
	--kw-size-cart: 13px;

	/* element colors */
	--kw-sale: #e02b2b;
	--kw-cart: #ff6600;
	--kw-ratio: 3 / 4;
	--kw-card-bg: #fff;
	--kw-border: #ececec;
	--kw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .06);
	--kw-shadow-hover: 0 2px 6px rgba(0, 0, 0, .06), 0 14px 32px rgba(0, 0, 0, .12);
	--kw-muted: #8a8a8a;
	--kw-title: #1f2329;
	--kw-price: #1f2329;
	--kw-star: #f5a623;
	--kw-star-empty: #dcdcdc;
	--kw-badge-new: #1aa260;
	--kw-badge-featured: #3858e9;
	--kw-badge-custom: #222;
	box-sizing: border-box;
}

.kw-pg *,
.kw-pg *::before,
.kw-pg *::after { box-sizing: border-box; }

/* ---------- Block wrapper + optional heading ---------- */
.kw-pg-block { position: relative; }
.kw-pg-blocktitle {
	margin: 0 0 14px;
	padding: 0;
	line-height: 1.25;
	font-weight: 700;
	color: inherit;
}

/* ---------- Track: grid vs carousel ---------- */
.kw-pg-track { --kw-cols: var(--kw-cols-d); }

.kw-pg--grid .kw-pg-track {
	display: grid;
	grid-template-columns: repeat(var(--kw-cols), minmax(0, 1fr));
	gap: var(--kw-gap);
}

.kw-pg--carousel .kw-pg-track {
	display: flex;
	gap: var(--kw-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-block-end: 6px;
	scrollbar-width: thin;
}
.kw-pg--carousel .kw-pg-card {
	flex: 0 0 calc((100% - (var(--kw-cols) - 1) * var(--kw-gap)) / var(--kw-cols));
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.kw-pg-track { --kw-cols: var(--kw-cols-t); }
}
@media (max-width: 600px) {
	.kw-pg-track { --kw-cols: var(--kw-cols-m); }
}

/* ---------- Card ---------- */
.kw-pg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--kw-card-h, auto);
	background: var(--kw-card-bg);
	border: 1px solid var(--kw-border);
	border-radius: var(--kw-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	box-shadow: var(--kw-shadow);
}
.kw-pg-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--kw-shadow-hover);
	border-color: rgba(0, 0, 0, .1);
}

/* Fixed exact height: card is exactly --kw-card-h, extra content is cropped. */
.kw-pg--fixedh .kw-pg-card {
	height: var(--kw-card-h);
	min-height: var(--kw-card-h);
}

.kw-pg-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0; /* allow children to crop in fixed-height mode */
	padding: var(--kw-pad-top) var(--kw-pad-x) var(--kw-pad-bottom);
	gap: var(--kw-gap-media);
	text-decoration: none;
	color: inherit;
}
/* When a cart row is shown, the cart supplies the bottom padding. */
.kw-pg--hascart .kw-pg-card__link { padding-block-end: 0; }
/* Whole card is a hyperlink to the product (stretched link). */
.kw-pg-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ---------- Media ---------- */
.kw-pg-media { position: relative; }

/* Default: image shows in full at its natural ratio (no crop), auto height. */
.kw-pg-imgwrap {
	position: relative;
	background: #fff;
	overflow: hidden;
	line-height: 0;
}
.kw-pg-img--primary {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--kw-img-h, none);
	object-fit: var(--kw-fit, contain);
	transition: opacity .35s ease, transform .6s ease;
}
.kw-pg-card:hover .kw-pg-img--primary { transform: scale(1.02); }

/* 2nd gallery image overlays the primary box for hover swap */
.kw-pg-img--secondary {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--kw-fit, contain);
	opacity: 0;
	transition: opacity .35s ease;
}
.kw-pg--hoverswap .kw-pg-card:hover .kw-pg-imgwrap--swap .kw-pg-img--secondary { opacity: 1; }
.kw-pg--hoverswap .kw-pg-card:hover .kw-pg-imgwrap--swap .kw-pg-img--primary { opacity: 0; }

/* Equal-height mode: fixed-ratio contain box so every card's info lines up */
.kw-pg--equal .kw-pg-imgwrap {
	aspect-ratio: var(--kw-ratio, 3 / 4);
	max-height: var(--kw-img-h, none);
}
.kw-pg--equal .kw-pg-img--primary {
	position: absolute;
	inset: 0;
	height: 100%;
	max-height: none;
	object-fit: var(--kw-fit, contain);
}

/* shimmer skeleton until the primary image loads */
.kw-pg--skeleton .kw-pg-imgwrap:not(.is-loaded) { min-height: 180px; }
.kw-pg--skeleton .kw-pg-imgwrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, #f2f2f2 30%, #e9e9e9 50%, #f2f2f2 70%);
	background-size: 200% 100%;
	animation: kwpg-shimmer 1.3s ease-in-out infinite;
	z-index: 1;
}
.kw-pg--skeleton .kw-pg-imgwrap.is-loaded::before { display: none; }
@keyframes kwpg-shimmer {
	0% { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

/* ---------- Badges ---------- */
.kw-pg-badges {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}
.kw-pg-badge {
	display: inline-block;
	font-size: var(--kw-size-badge);
	font-weight: 700;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 999px;
	color: #fff;
	letter-spacing: .2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	white-space: nowrap;
}
.kw-pg-badge--sale { background: var(--kw-sale); }
.kw-pg-badge--new { background: var(--kw-badge-new); }
.kw-pg-badge--featured { background: var(--kw-accent, var(--kw-badge-featured)); }
.kw-pg-badge--custom { background: var(--kw-badge-custom); }

/* ---------- Body ---------- */
.kw-pg-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0; /* explicit per-element margins control spacing */
	flex: 1 1 auto;
	min-height: 0;
	padding: 0;
}
.kw-pg-title {
	margin: 0 0 var(--kw-gap-title);
	font-size: var(--kw-size-title);
	font-weight: 600;
	line-height: 1.4;
	color: var(--kw-title);
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: var(--kw-title-clamp, 2);
	line-clamp: var(--kw-title-clamp, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: var(--kw-title-min, 2.8em);
}

/* ---------- Stars ---------- */
.kw-pg-stars {
	position: relative;
	display: inline-block;
	font-size: var(--kw-size-star);
	line-height: 1;
	letter-spacing: 2px;
	font-family: Arial, sans-serif; /* consistent star glyph metrics */
	width: max-content;
	margin: 0 0 var(--kw-gap-rating);
}
.kw-pg-stars__base { color: var(--kw-star-empty); }
.kw-pg-stars__fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--kw-star);
}

/* ---------- Price ---------- */
.kw-pg-price {
	margin: 0 0 var(--kw-gap-price);
	font-size: var(--kw-size-price);
	font-weight: 700;
	color: var(--kw-price);
	text-align: center;
}
/* Optional: push the price to the bottom of the card body. */
.kw-pg--pricebottom .kw-pg-price { margin-block-start: auto; }
/* When a cart row follows, that gap is owned by --kw-gap-cart. */
.kw-pg--hascart .kw-pg-price { margin-block-end: 0; }
.kw-pg-price .price { color: inherit; }
.kw-pg-price del {
	color: var(--kw-muted);
	font-weight: 400;
	font-size: .85em;
	margin-inline-end: 6px;
	opacity: .85;
}
.kw-pg-price ins {
	text-decoration: none;
	color: var(--kw-sale);
}
.kw-pg-price .amount { white-space: nowrap; }

/* ---------- Add to cart (last row) ---------- */
.kw-pg-cart {
	padding-block-start: var(--kw-gap-cart);
	padding-inline: var(--kw-pad-x);
	padding-block-end: var(--kw-pad-bottom);
	position: relative; /* sit above the stretched card link */
	z-index: 2;
}
.kw-pg-addtocart.button,
.kw-pg-addtocart.button:link,
.kw-pg-addtocart.button:visited {
	display: block;
	width: 100%;
	text-align: center;
	border: 0;
	border-radius: calc(var(--kw-radius) * .6);
	font-size: var(--kw-size-cart);
	font-weight: 700;
	line-height: 1.2;
	padding: 11px 12px;
	color: #fff;
	background: var(--kw-cart, #ff6600);
	box-shadow: 0 4px 12px rgba(255, 102, 0, .26);
	transition: filter .2s ease, box-shadow .2s ease, transform .15s ease;
	cursor: pointer;
}
.kw-pg-addtocart.button:hover,
.kw-pg-addtocart.button:focus {
	color: #fff;
	filter: brightness(.95);
	box-shadow: 0 6px 16px rgba(255, 102, 0, .36);
	transform: translateY(-1px);
}
.kw-pg-addtocart.button.loading { opacity: .85; pointer-events: none; }
.kw-pg-addtocart.button.added { filter: brightness(.9); }

/* ---------- Carousel nav ---------- */
.kw-pg-nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--kw-border);
	background: #fff;
	color: #333;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: background .2s ease, transform .2s ease;
}
.kw-pg-nav:hover { background: #f6f6f6; }
.kw-pg-nav--prev { inset-inline-start: -8px; }
.kw-pg-nav--next { inset-inline-end: -8px; }
.kw-pg-nav[disabled] { opacity: .35; cursor: default; }
/* RTL: arrow glyphs flip naturally because we use inline-start/end positioning */
[dir="rtl"] .kw-pg-nav--prev { transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .kw-pg-nav--next { transform: translateY(-50%) scaleX(-1); }

/* ---------- Empty ---------- */
.kw-pg-empty {
	padding: 24px;
	text-align: center;
	color: var(--kw-muted);
	border: 1px dashed var(--kw-border);
	border-radius: var(--kw-radius);
}

/* Cards intentionally stay light (white) regardless of OS dark mode. */