/**
 * SelfShiksha Website Enhancer — Shop / Notes Store styles
 *
 * Design tokens (Phase 3 — premium Indian EdTech identity):
 *   Deep academic navy for trust, a single gold accent for badges/achievement,
 *   a restrained sale-red used only for the discount badge, off-white canvas.
 *   System font stack — no extra Google Fonts requests (Phase 20 performance rule).
 *
 * Every selector is namespaced under .sse- so nothing here collides with
 * Blocksy or WooCommerce's own classes (Phase 24).
 */

:root {
	--sse-navy: #14315D;
	--sse-navy-light: #1F4E8C;
	--sse-gold: #C98A00;
	--sse-sale: #C6362F;
	--sse-success: #157A4F;
	--sse-bg: #F6F7F9;
	--sse-card-bg: #FFFFFF;
	--sse-text: #1A1E27;
	--sse-text-muted: #667085;
	--sse-border: #E6E8EC;
	--sse-radius: 14px;
	--sse-shadow: 0 1px 2px rgba(20, 49, 93, 0.06), 0 6px 20px rgba(20, 49, 93, 0.08);
	--sse-shadow-hover: 0 8px 28px rgba(20, 49, 93, 0.16);
	--sse-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Devanagari", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------- */
/* Product card                                                          */
/* ---------------------------------------------------------------------- */

.sse-product-card {
	background: var(--sse-card-bg);
	border: 1px solid var(--sse-border);
	border-radius: var(--sse-radius);
	box-shadow: var(--sse-shadow);
	padding: 14px 14px 16px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	font-family: var(--sse-font);
	position: relative;
	overflow: hidden;
}

.sse-product-card:hover {
	box-shadow: var(--sse-shadow-hover);
	transform: translateY(-2px);
}

.sse-product-card img {
	border-radius: 10px;
	transition: transform 0.35s ease;
}

.sse-product-card:hover img {
	transform: scale(1.03);
}

.sse-product-card .woocommerce-loop-product__title {
	color: var(--sse-text);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.4;
}

.sse-product-card .price {
	font-weight: 700;
}

.sse-product-card .price ins {
	color: var(--sse-navy);
	text-decoration: none;
	font-size: 1.1em;
}

.sse-product-card .price del {
	color: var(--sse-text-muted);
	opacity: 0.75;
}

/* ---------------------------------------------------------------------- */
/* Badges                                                                 */
/* ---------------------------------------------------------------------- */

.sse-badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 10px;
}

.sse-badge-row--single {
	margin: 4px 0 14px;
}

.sse-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 4px 9px;
	border-radius: 999px;
	line-height: 1.4;
	white-space: nowrap;
}

.sse-badge--discount {
	background: var(--sse-sale);
	color: #fff;
}

.sse-badge--class {
	background: rgba(20, 49, 93, 0.08);
	color: var(--sse-navy);
}

.sse-badge--board {
	background: rgba(201, 138, 0, 0.14);
	color: var(--sse-gold);
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */

.sse-buy-now {
	display: inline-block;
	margin-top: 8px;
	margin-left: 8px;
	background: var(--sse-success) !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-weight: 600;
	text-align: center;
	padding: 0.6em 1.1em !important;
	transition: filter 0.15s ease;
}

.sse-buy-now:hover,
.sse-buy-now:focus {
	filter: brightness(1.08);
	color: #fff !important;
}

.sse-buy-now:focus-visible {
	outline: 2px solid var(--sse-navy-light);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Mobile                                                                 */
/* ---------------------------------------------------------------------- */

@media (max-width: 480px) {
	.sse-product-card {
		padding: 10px 10px 12px;
	}

	.sse-badge {
		font-size: 0.68rem;
		padding: 3px 7px;
	}

	.sse-buy-now {
		display: block;
		margin-left: 0;
		margin-top: 8px;
		width: 100%;
	}
}

.sse-is-busy {
	opacity: 0.65;
	pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                         */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sse-product-card,
	.sse-product-card img,
	.sse-buy-now {
		transition: none !important;
		transform: none !important;
	}
}