/* =========================================================================
   Shudhta product card — ONE component, every product list.
   Self-contained: it defines its own type and neutrals and reads the seven
   palette tokens printed on .shc. It never sets its own width; it fills
   whatever grid cell it is dropped into.
   COLOUR LAW: no hue literal here. White and neutral greys only.
   ========================================================================= */

.shc {
	--font-display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style",
		"Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--font-body: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system,
		"Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--paper: #fff;
	--muted: #6f6f6f;
	--muted-soft: #8a8a8a;

	/* The palette tokens are INHERITED from the container, never redeclared
	   here — redeclaring would override the page's palette and the card would
	   ignore its surroundings. Each use below carries a neutral fallback for
	   the case where no palette is present. */

	display: flex;
	flex-direction: column;
	/* The card fills its cell. It never declares a width. */
	width: 100%;
	height: 100%;
	background: var(--paper);
	border: 1px solid var(--line, #e2e2e2);
	border-radius: 4px;
	overflow: hidden;
	font-family: var(--font-body);
	color: var(--ink, #1a1a1a);
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.shc:hover {
	transform: translateY(-3px);
	border-color: var(--accent, #6f6f6f);
}

.shc :where(p, h2, h3, h4, h5, h6) {
	margin: 0;
	padding: 0;
}
.shc :where(a) {
	color: inherit;
	text-decoration: none;
}
.shc :where(img) {
	display: block;
	max-width: 100%;
}

/* --- 1. MEDIA -------------------------------------------------------- */

.shc-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--soft, #fafafa);
	/* Generous inner padding so the product never touches the edge. */
	padding: 18px;
	overflow: hidden;
}
.shc-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.shc-img--hover {
	position: absolute;
	inset: 18px;
	width: calc(100% - 36px);
	height: calc(100% - 36px);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.shc:hover .shc-img--hover {
	opacity: 1;
}
.shc-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--muted-soft);
	letter-spacing: 0.08em;
}

/* --- 2. BADGE — exactly one, never two ------------------------------- */

.shc-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--band, #1a1a1a);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 999px;
}

/* --- BODY: flex column so the button sits flush on the bottom edge of
       every card, whatever the title length above it. ------------------ */

.shc-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px;
	text-align: center;
	gap: 6px;
}

/* --- 3. TITLE — two lines maximum, two lines always reserved --------- */

.shc-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.3;
	color: var(--ink, #1a1a1a);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Reserved height: a one-line and a two-line name make identical cards. */
	min-height: calc(2 * 1.3em);
}
.shc-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--accent, #6f6f6f);
	text-underline-offset: 3px;
}

/* --- 4. SUBLINE ------------------------------------------------------ */

.shc-subline {
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--muted);
}

/* --- 5. RATING — only ever with a real review behind it -------------- */

.shc-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted);
}
.shc-stars {
	color: var(--ink, #1a1a1a);
	letter-spacing: 0.06em;
}

/* --- 6. PRICE — same position and size in both states --------------- */

.shc-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	min-height: 24px;
	font-size: 16px;
	color: var(--ink, #1a1a1a);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	margin-top: 2px;
}
.shc-price del {
	color: var(--muted-soft);
	font-size: 13px;
	text-decoration: line-through;
}
.shc-price ins {
	text-decoration: none;
	color: var(--ink, #1a1a1a);
}

/* --- 7. ACTION — pushed to the bottom, never a broken promise -------- */

.shc-action {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line, #e2e2e2);
	border-radius: 4px;
	background: transparent;
	color: var(--ink, #1a1a1a);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease;
}
/* Scoped to .shc so the parent theme's own a:hover / button:hover colour
   cannot win the specificity tie and wash the label out. */
.shc .shc-action:hover {
	border-color: var(--band, #1a1a1a);
	background: var(--band, #1a1a1a);
	color: var(--paper);
}
.shc :where(a):focus-visible {
	outline: 2px solid var(--accent, #6f6f6f);
	outline-offset: 2px;
	border-radius: 2px;
}

.shc .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.shc,
	.shc-img--hover {
		transition-duration: 0.01ms;
	}
	.shc:hover {
		transform: none;
	}
}

/* Same Elementor `p { color: inherit }` override as the homepage: the card's
   muted lines are paragraphs and would otherwise inherit the card's ink. */
.shc .shc-subline,
.shc .shc-rating {
	color: var(--muted);
}