/* Southern Range Product Content 2.5.3 — compact mobile comparison + explicit key. */

@media (max-width: 820px) {
	/* Reduce the distance from the section heading to the usable comparison. */
	.srcm {
		padding: clamp(28px, 6vw, 42px) clamp(14px, 4vw, 22px) clamp(32px, 7vw, 48px) !important;
	}

	.srcm-header {
		margin-bottom: .75rem !important;
	}

	.srcm-heading {
		max-width: 19ch !important;
		font-size: clamp(1.9rem, 8vw, 2.7rem) !important;
		line-height: .98 !important;
	}

	.srcm-intro {
		margin-top: .4rem !important;
	}

	.srcm-tabs {
		gap: 4px !important;
		margin: .65rem 0 !important;
	}

	.srcm-tab {
		min-height: 44px !important;
		padding: .45rem .3rem !important;
		font-size: clamp(.64rem, 2.8vw, .72rem) !important;
		line-height: 1.1 !important;
	}

	/* All four metric choices fit on one touch-safe row. */
	.srcm-metrics {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 4px !important;
		margin-bottom: .5rem !important;
	}

	.srcm-metric {
		min-height: 44px !important;
		padding: .4rem .18rem !important;
		font-size: clamp(.61rem, 2.7vw, .7rem) !important;
		line-height: 1.05 !important;
		white-space: normal !important;
	}

	.srcm-panel {
		padding: clamp(11px, 3.2vw, 16px) !important;
	}

	.srcm-panel__title {
		margin-bottom: .45rem !important;
		font-size: .72rem !important;
		line-height: 1.3 !important;
	}

	.srcm-chart-row {
		gap: .4rem !important;
		padding-block: .36rem !important;
	}

	.srcm-chart-row__name,
	.srcm-chart-row__value {
		font-size: clamp(.69rem, 3vw, .8rem) !important;
		line-height: 1.08 !important;
	}

	.srcm-qualification {
		margin: .55rem 0 0 !important;
		padding-top: .55rem !important;
		font-size: .64rem !important;
		line-height: 1.35 !important;
	}

	.srcm-method {
		margin-top: .45rem !important;
		padding-top: .45rem !important;
		font-size: .68rem !important;
	}

	.srcm-method summary {
		min-height: 36px !important;
		display: flex !important;
		align-items: center !important;
	}

	/* The two contextual cards are a paired comparison, not a vertical feed. */
	.srcm-details {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
		margin-top: 8px !important;
	}

	.srcm-detail-card {
		display: grid !important;
		min-width: 0 !important;
		min-height: 0 !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: 68px auto !important;
		gap: 7px !important;
		align-content: start !important;
		padding: 9px !important;
	}

	.srcm-detail-card__media {
		display: grid !important;
		min-height: 0 !important;
		height: 68px !important;
		place-items: center !important;
	}

	.srcm-product-image--large {
		width: 100% !important;
		height: 68px !important;
		max-height: 68px !important;
		object-fit: contain !important;
	}

	.srcm-detail-card__brand {
		margin: 0 0 2px !important;
		font-size: .56rem !important;
		line-height: 1.15 !important;
	}

	.srcm-detail-card h3 {
		margin: 0 0 4px !important;
		font-size: clamp(.9rem, 3.7vw, 1.05rem) !important;
		line-height: 1.05 !important;
	}

	.srcm-detail-card__tagline,
	.srcm-detail-card__note {
		display: none !important;
	}

	.srcm-detail-card__value {
		margin: .3rem 0 !important;
		font-size: clamp(.78rem, 3.4vw, .94rem) !important;
		line-height: 1.15 !important;
	}

	.srcm-detail-card__summary {
		margin: 0 !important;
		font-size: clamp(.63rem, 2.8vw, .73rem) !important;
		line-height: 1.3 !important;
	}

	.srcm-price-disclosure {
		margin-top: .7rem !important;
		padding-top: .7rem !important;
		font-size: .63rem !important;
		line-height: 1.35 !important;
	}

	/* The comparison module already supplies this semantic legend. Keep its
	   words visible so the symbols never need to be guessed. */
	.srcm-legend {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 5px 8px !important;
		margin-top: .5rem !important;
		padding: .55rem !important;
		border: 1px solid rgba(28, 30, 31, .14) !important;
		border-radius: 8px !important;
		background: rgba(255, 255, 255, .62) !important;
	}

	.srcm-legend::before {
		grid-column: 1 / -1;
		content: "KEY";
		font: 700 .6rem/1.2 var(--wp--preset--font-family--mono, monospace);
		letter-spacing: .12em;
		color: #50695a;
	}

	.srcm-legend > span {
		display: grid !important;
		min-width: 0 !important;
		grid-template-columns: auto minmax(0, 1fr) !important;
		gap: 5px !important;
		align-items: center !important;
	}

	.srcm-legend .srcm-status {
		width: 26px !important;
		height: 26px !important;
		min-width: 26px !important;
		padding: 0 !important;
	}

	.srcm-legend .srcm-status > span:last-child {
		display: none !important;
	}

	.srcm-legend small {
		display: block !important;
		min-width: 0 !important;
		font-size: clamp(.56rem, 2.45vw, .65rem) !important;
		line-height: 1.18 !important;
		color: #4f5551 !important;
	}
}

@media (max-width: 359px) {
	.srcm-tabs {
		grid-template-columns: 1fr 1fr !important;
	}

	.srcm-tab:last-child {
		grid-column: 1 / -1;
	}

	.srcm-metric {
		font-size: .58rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.srcm-tab,
	.srcm-metric,
	.srcm-chart-row,
	.srcm-matrix-cell,
	.srcm-mobile-value {
		transition: none !important;
	}
}