/* ============================================================
   KHABSTORE — Product card + catalog grid
   ============================================================ */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--khs-s3);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
@media (min-width: 600px)  { ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--khs-s4); } }
@media (min-width: 1024px) { ul.products { grid-template-columns: repeat(4, 1fr); } }

/* ---- Card ---- */
.khs-card {
	background: var(--khs-surface);
	border: 1px solid var(--khs-line);
	border-radius: var(--khs-radius-lg);
	overflow: hidden;
	display: flex; flex-direction: column;
	margin: 0 !important; width: auto !important; float: none !important;
	position: relative;
	transition: box-shadow var(--khs-dur) var(--khs-ease), transform var(--khs-dur) var(--khs-ease), border-color var(--khs-dur) var(--khs-ease);
}
.khs-card:hover {
	box-shadow: var(--khs-shadow-2);
	transform: translateY(-3px);
	border-color: var(--khs-primary-100);
}

.khs-card__media { position: relative; }
.khs-card__imgwrap {
	display: block; aspect-ratio: 1 / 1;
	background: var(--khs-surface);
}
.khs-card__imgwrap img {
	width: 100% !important; height: 100% !important;
	object-fit: contain; padding: var(--khs-s2);
	transition: transform 240ms var(--khs-ease);
}
.khs-card:hover .khs-card__imgwrap img { transform: scale(1.04); }

.khs-card__off {
	position: absolute; top: var(--khs-s2); inset-inline-start: var(--khs-s2);
	z-index: 2;
}

/* tools (wishlist / compare) */
.khs-card__tools {
	position: absolute; top: var(--khs-s2); inset-inline-end: var(--khs-s2);
	display: flex; flex-direction: column; gap: 6px; z-index: 2;
}
.khs-card__tools .khs-wl-btn,
.khs-card__tools .khs-cp-btn { width: 36px; height: 36px; background: rgba(255,255,255,.92); }
.khs-card__tools .khs-icon { width: 17px; height: 17px; }

/* ---- Body ---- */
.khs-card__body {
	padding: var(--khs-s3);
	display: flex; flex-direction: column; gap: 6px;
	flex: 1; border-top: 1px solid var(--khs-line);
}

.khs-brandchip {
	align-self: flex-start;
	font-size: var(--khs-fs-12); font-weight: 700; color: var(--khs-accent-dark);
	background: var(--khs-accent-soft);
	padding: 3px 8px; border-radius: var(--khs-radius-pill);
}
.khs-brandchip:hover { background: var(--khs-accent); color: #fff; }

.khs-card__title {
	font-size: var(--khs-fs-14); font-weight: 500; line-height: 1.7;
	margin: 0; color: var(--khs-text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: calc(2 * 1.7em);
}
.khs-card__title a { color: var(--khs-text); }
.khs-card__title a:hover { color: var(--khs-primary-700); }

.khs-card__rating { display: flex; align-items: center; gap: 4px; }
.khs-card__rating .star-rating { font-size: 13px; }
.khs-card__rating-count { font-size: var(--khs-fs-12); color: var(--khs-text-3); }

.khs-card__price { margin-top: auto; text-align: left; font-size: var(--khs-fs-14); font-weight: 800; color: var(--khs-primary-900); }
.khs-card__price del { color: var(--khs-text-3); font-weight: 400; font-size: var(--khs-fs-12); display: block; }
.khs-card__price ins { text-decoration: none; }
.khs-card__price .woocommerce-Price-currencySymbol { font-size: var(--khs-fs-12); font-weight: 500; }

/* ---- Star rating base (own, since Woo css is dequeued) ---- */
.star-rating { position: relative; display: inline-block; width: 80px; height: 16px; overflow: hidden; }
.star-rating::before {
	content: "★★★★★"; position: absolute; inset-inline-start: 0; top: 0;
	color: var(--khs-line); letter-spacing: 2px; font-size: 13px; line-height: 16px;
}
.star-rating span {
	position: absolute; inset-inline-start: 0; top: 0; overflow: hidden; white-space: nowrap;
	color: var(--khs-star); letter-spacing: 2px; font-size: 13px; line-height: 16px;
}

/* 5-column products grid (شگفت‌انگیزها page) */
ul.products.columns-5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px)  { ul.products.columns-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); gap: var(--khs-s3); } }