/* Range: WooCommerce's shop archive (S:646-793). Breakpoints S:42-47 (1100) and S:52-58 (720). */

/* Mixed-weight label on a product title (S:657): the stored prefix regular, the rest bold. */
.wp-block-post-title.is-style-sv-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--ink-900);
}
.wp-block-post-title.is-style-sv-label b {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

/* Intro (S:648-653). The eyebrow uses ink-600, the nearest AA shade to ink-500 at 12px (Chris, 17 Oct). */
.sv-range-intro { padding: 48px var(--pg) 0; }
.sv-range-intro > * { margin: 0; }
.sv-range-intro .sv-eyebrow { font-size: 12px; color: var(--wp--preset--color--ink-600); }
.sv-range-intro .sv-range-h {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(30px, 3.9vw, 56px);
	line-height: 1.04;
	letter-spacing: -.025em;
	color: var(--wp--preset--color--ink-900);
}
.sv-range-intro .sv-range-lede {
	max-width: 700px;
	margin-top: 16px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-700);
}

/* Cards (S:655-768): 3 columns, 2 at <=1100, 1 at <=720. Images float in a 300px contain box, no frame. */
.sv-range-grid { padding: 44px var(--pg) 0; }
.sv-range-grid .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1100px) { .sv-range-grid .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .sv-range-grid .wc-block-product-template { grid-template-columns: minmax(0, 1fr); } }
.sv-range-grid .wc-block-product { margin: 0; padding: 0; width: auto; max-width: none; }

.sv-card.sv-card {
	height: 100%;
	box-sizing: border-box;
	padding: 30px;
	gap: 0;
	align-items: stretch;
}
.sv-card .sv-card-img { margin: 16px 0 0; }
.sv-card .sv-card-img,
.sv-card .sv-card-img .wc-block-components-product-image { position: relative; height: 300px; }
.sv-card .sv-card-img img {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 14px;
	object-fit: contain;
	border-radius: 0;
	background: none;
}
.sv-card .sv-card-blurb { margin: 22px 0 0; min-height: 80px; }
.sv-card .sv-card-blurb p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--wp--preset--color--ink-700); }
.sv-card .sv-specs { margin-top: 18px; }

.sv-card .sv-card-buy {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--sv-stroke-hair);
}
.sv-card .sv-card-price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink-900);
	font-variant-numeric: tabular-nums;
	text-align: left;
}
.sv-card .sv-card-price .woocommerce-price-suffix {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink-600);
}

/* BUY NOW: cyan pill (S:688); See the feature page: black pill with a cyan ring (S:765). */
.sv-card .sv-buy,
.sv-card .sv-feature-link .wp-block-button__link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 14px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: filter 180ms cubic-bezier(.22, 1, .36, 1);
}
.sv-card .sv-buy {
	margin-top: 16px;
	background: #4DC5D5;
	border: 1px solid #4DC5D5;
	color: #0c0d0e;
}
.sv-card .sv-card-more { display: block; margin: 0; }
.sv-card .sv-feature-link { width: 100%; margin-top: 10px; }
.sv-card .sv-feature-link .wp-block-button__link {
	background: #0c0d0e;
	border: 1px solid #0c0d0e;
	box-shadow: 0 0 0 1px rgba(77, 197, 213, .6);
	color: #fff;
}
.sv-card .sv-buy:hover,
.sv-card .sv-feature-link .wp-block-button__link:hover { filter: brightness(1.06); }

/* The flagship (S:730). */
.product_tag-flagship .sv-card {
	border: 1.5px solid #4DC5D5;
	box-shadow: 0 20px 48px -26px rgba(77, 197, 213, .85);
}

/* Business support benefits (S:770-786). */
.sv-biz { padding: 72px var(--pg) 0; }
.sv-biz-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 430px;
	gap: 56px;
	align-items: end;
}
.sv-biz-head p, .sv-biz-head h2 { margin: 0; }
.sv-biz .sv-biz-eyebrow {
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-aa); /* accentOnLight (Chris, 17 Oct) */
}
.sv-biz .sv-biz-h {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 46px);
	line-height: 1.06;
	letter-spacing: -.025em;
	color: var(--wp--preset--color--ink-900);
}
.sv-biz .sv-biz-lede { font-size: 16.5px; line-height: 1.62; color: var(--wp--preset--color--ink-700); }
.sv-biz .sv-biz-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: sv-biz;
}
.sv-biz .sv-biz-list li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--sv-stroke-hair);
	font-size: 16px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-800);
	counter-increment: sv-biz;
}
.sv-biz .sv-biz-list li::before {
	content: counter(sv-biz, decimal-leading-zero);
	flex: none;
	min-width: 22px;
	padding-top: 3px;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-600);
}

/* Podcast (S:788-793): a glass panel inside the benefits block's gutter. */
.sv-podcast.sv-podcast {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 40px;
	align-items: center;
	margin: 32px var(--pg) 0;
	padding: 28px 32px;
	border-color: var(--sv-stroke-glass);
	box-shadow: 0 10px 40px -10px rgba(58, 89, 168, .18);
}
.sv-podcast p { margin: 0; }
.sv-podcast .sv-podcast-label {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-600);
}
.sv-podcast .sv-podcast-label b {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--wp--preset--color--ink-900);
}
.sv-podcast .sv-podcast-text { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--wp--preset--color--ink-800); }
.sv-podcast .wp-block-audio { margin: 0; }
.sv-podcast audio { display: block; width: 100%; }

/* Second-hand saunas panel (South Africa only; Ana 22 Oct §3.1): the podcast panel's family, text left and a black pill right. */
.sv-preowned.sv-preowned {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
	margin: 32px var(--pg) 0;
	padding: 28px 32px;
	border-color: var(--sv-stroke-glass);
	box-shadow: 0 10px 40px -10px rgba(58, 89, 168, .18);
}
.sv-preowned > * { margin: 0; }
.sv-preowned p, .sv-preowned h2 { margin: 0; }
.sv-preowned .sv-preowned-eyebrow {
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-aa);
}
.sv-preowned .sv-preowned-h {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.12;
	letter-spacing: -.02em;
	text-wrap: pretty;
	color: var(--wp--preset--color--ink-900);
}
.sv-preowned .sv-preowned-lede { max-width: 620px; margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--wp--preset--color--ink-700); }
.sv-preowned .sv-preowned-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid #0c0d0e;
	border-radius: 999px;
	background: #0c0d0e;
	box-shadow: 0 0 0 1px rgba(77, 197, 213, .6);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
	transition: filter 180ms cubic-bezier(.22, 1, .36, 1);
}
.sv-preowned .sv-preowned-cta:hover { filter: brightness(1.06); }
.sv-preowned .sv-preowned-cta:focus-visible { outline-offset: 3px; }

@media (max-width: 1100px) {
	.sv-biz-head, .sv-podcast.sv-podcast { grid-template-columns: minmax(0, 1fr); }
	/* Ana sign-off L5: stacks with the podcast panel below it; from 721 px the pill keeps its natural width, left-aligned. */
	.sv-preowned.sv-preowned { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.sv-preowned .sv-preowned-cta { justify-self: start; }
}
@media (max-width: 720px) {
	.sv-biz .sv-biz-list { grid-template-columns: minmax(0, 1fr); }
	.sv-podcast.sv-podcast { padding: 22px 20px; gap: 18px; }
	.sv-preowned.sv-preowned { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 20px; }
	.sv-preowned .sv-preowned-cta { width: 100%; white-space: normal; }
}