/**
 * SP Related Products - front-end styles.
 * Same card design as SP Shop Filters. Inherits theme font; colours via CSS vars.
 */

.sprp-section { width: 100%; font-family: inherit; }

.sprp-heading {
	font-family: inherit;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 24px;
	color: inherit;
}

.sprp-grid {
	display: grid;
	gap: 28px 20px;
	/* columns injected inline */
}

/* ---- Card ---- */
.sprp-card { display: flex; flex-direction: column; text-align: center; }
.sprp-card-media { position: relative; margin-bottom: 12px; }

.sprp-section .sprp-card-img,
.sprp-card-img {
	display: block;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #f3f3f3;
	aspect-ratio: auto !important;
}

.sprp-section .sprp-card-img img,
.sprp-card-img img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	object-fit: fill !important;
	display: block;
	transition: transform 0.3s ease, opacity 0.4s ease;
}

.sprp-card-img .sprp-img-main { position: relative; z-index: 1; }
.sprp-card-img .sprp-img-hover {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	opacity: 0;
	z-index: 2;
}
.sprp-card-img.has-hover:hover .sprp-img-hover { opacity: 1; }
.sprp-card-img.has-hover:hover .sprp-img-main { opacity: 0; }
.sprp-card-img:not(.has-hover):hover img { transform: scale(1.04); }

/* Quick view icon */
.sprp-quickview {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	width: 42px;
	height: 42px;
	min-width: 42px;
	padding: 0;
	margin: 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	border: none;
	background: #fff !important;
	color: var(--sprp-primary, #3C0008) !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.25);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.85);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, background 0.2s ease, color 0.2s ease;
	pointer-events: none;
	line-height: 0;
}
.sprp-quickview svg { display: block; width: 20px; height: 20px; stroke: currentColor; }
.sprp-card-media:hover .sprp-quickview { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; }
.sprp-quickview:hover { background: var(--sprp-primary, #3C0008) !important; color: #fff !important; transform: scale(1.08); }

/* Add to cart */
.sprp-addcart {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translate(-50%, 10px);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--sprp-primary, #3C0008);
	color: var(--sprp-accent, #F5F5DC);
	text-decoration: none !important;
	box-shadow: 0 3px 12px rgba(0,0,0,0.22);
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}
.sprp-card-media:hover .sprp-addcart { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sprp-addcart:hover { opacity: 0.92; }
.sprp-addcart.is-loading { opacity: 0.75; }
.sprp-addcart.is-added { background: #2e7d32 !important; color: #fff !important; }
.sprp-section .added_to_cart { display: none !important; }

/* Category label + title + price */
.sprp-card-cat {
	font-family: inherit;
	font-size: 13px;
	opacity: 0.6;
	margin-bottom: 4px;
}
.sprp-card-title {
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: inherit;
	text-decoration: none !important;
	margin-bottom: 6px;
}
.sprp-card-title:hover { opacity: 0.8; }
.sprp-card-price { font-family: inherit; font-size: 14px; font-weight: 600; opacity: 0.85; }
.sprp-card-price del { opacity: 0.5; font-weight: 400; margin-right: 6px; }
.sprp-card-price ins { text-decoration: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.sprp-heading { font-size: 24px; }
}
@media (max-width: 600px) {
	.sprp-heading { font-size: 20px; }
	.sprp-grid { gap: 18px 12px; }
	.sprp-card-cat { font-size: 12px; }
	.sprp-card-title { font-size: 14px; }
}

@media (hover: none) {
	.sprp-card-media { display: flex; flex-direction: column; }
	.sprp-quickview { display: none !important; }
	.sprp-card-media .sprp-addcart {
		position: static !important;
		left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
		transform: none !important;
		opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
		margin: 10px 0 0 !important;
		width: 100% !important; max-width: 100% !important;
		box-sizing: border-box !important;
		box-shadow: none !important;
	}
}
@media (max-width: 600px) {
	.sprp-card-media { display: flex; flex-direction: column; }
	.sprp-quickview { display: none !important; }
	.sprp-card-media .sprp-addcart {
		position: static !important;
		left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
		transform: none !important;
		opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
		margin: 10px 0 0 !important;
		width: 100% !important; max-width: 100% !important;
		box-sizing: border-box !important;
		box-shadow: none !important;
		font-size: 13px;
		padding: 10px 12px;
	}
}

/* ============ Quick view modal ============ */
.sprp-modal { position: fixed; inset: 0; z-index: 100001; display: none; }
.sprp-modal.is-open { display: block; }
.sprp-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.sprp-modal-dialog {
	position: relative; z-index: 1;
	max-width: 920px; width: calc(100% - 40px); max-height: calc(100vh - 60px);
	margin: 30px auto; background: #fff; border-radius: 16px; overflow: auto;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: sprp-modal-in 0.25s ease;
}
@keyframes sprp-modal-in { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: translateY(0);} }
.sprp-modal-close {
	position: absolute; top: 14px; right: 14px; z-index: 3;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.15); background: #fff;
	font-size: 24px; line-height: 1; cursor: pointer; color: #333;
}
.sprp-modal-close:hover { background: #f2f2f2; }
.sprp-modal-loading { padding: 60px 20px; text-align: center; color: #777; font-family: inherit; }

.sprp-qv { display: grid; grid-template-columns: 1fr 1fr; }
.sprp-qv-gallery { background: #f7f7f7; display: flex; align-items: center; justify-content: center; }
.sprp-qv-gallery img { width: 100%; height: auto; object-fit: contain; display: block; }
.sprp-qv-info { padding: 36px 32px; font-family: inherit; display: flex; flex-direction: column; gap: 16px; }
.sprp-qv-title { font-family: inherit; font-size: 26px; font-weight: 800; line-height: 1.15; margin: 0; }
.sprp-qv-price { font-family: inherit; font-size: 20px; font-weight: 600; }
.sprp-qv-price del { opacity: 0.5; font-weight: 400; margin-right: 8px; }
.sprp-qv-price ins { text-decoration: none; }
.sprp-qv-desc { font-family: inherit; font-size: 15px; line-height: 1.6; }
.sprp-qv-desc p { margin: 0 0 8px; }
.sprp-qv-addcart {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: inherit; font-size: 15px; font-weight: 600;
	padding: 13px 26px; border-radius: 999px;
	background: var(--sprp-primary, #3C0008); color: var(--sprp-accent, #F5F5DC);
	border: 1.5px solid var(--sprp-primary, #3C0008);
	text-decoration: none !important; cursor: pointer;
}
.sprp-qv-addcart:hover { opacity: 0.92; }
.sprp-qv-addcart.is-loading { opacity: 0.75; }
.sprp-qv-addcart.is-added { background: #2e7d32 !important; color: #fff !important; }
.sprp-qv-details {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.12);
	font-family: inherit; font-size: 15px; color: inherit; text-decoration: none !important;
}
.sprp-qv-details:hover { opacity: 0.8; }

@media (max-width: 768px) {
	.sprp-qv { grid-template-columns: 1fr; }
	.sprp-qv-info { padding: 22px 18px; }
	.sprp-qv-title { font-size: 22px; }
	.sprp-modal-dialog { margin: 16px auto; width: calc(100% - 24px); }
}