/*
 * Source Research Supply — front-end review refinements (v0.1.335).
 * Loaded after every other theme stylesheet. Each block names the issue it fixes.
 */

/* ------------------------------------------------------------
   1. Self-hosted type. Headings previously relied on Bahnschrift
   Condensed, which only exists on Windows, and body copy on
   Avenir Next (Apple) or Segoe UI (Windows). Barlow Condensed and
   Barlow share Bahnschrift's DIN proportions and load everywhere.
   Barlow and Barlow Condensed: SIL Open Font License 1.1.
   ------------------------------------------------------------ */
@font-face { font-family: "Source Display"; src: url("fonts/barlow-condensed-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Source Display"; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Display"; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Text"; src: url("fonts/barlow-400.woff2") format("woff2"); font-style: normal; font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Source Text"; src: url("fonts/barlow-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Source Text"; src: url("fonts/barlow-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Text"; src: url("fonts/barlow-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
/* The cart, mini-cart and several components ask for 'Space Grotesk' by name,
   but only aliases of the bundled files were declared, so those areas fell
   back to Arial. Declare the real name against the same files. */
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-400.woff2") format("woff2"); font-style: normal; font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }

:root,
.srs-home,
.srs-footer,
body.srs-site.cc-product-catalog {
	--srs-font: "Source Text", "Helvetica Neue", Arial, sans-serif;
	--srs-body: "Source Text", "Helvetica Neue", Arial, sans-serif;
	--srs-display: "Source Display", "Arial Narrow", sans-serif;
	--wp--preset--font-family--space-grotesk: "Source Text", "Helvetica Neue", Arial, sans-serif;
	--wp--preset--font-family--source-condensed: "Source Display", "Arial Narrow", sans-serif;
}
/* Commerce UI keeps its deliberate Space Grotesk treatment. */
body.srs-site.cc-product-catalog .srs-catalogue,
body.srs-site ul.products li.product.srs-refined-card {
	--srs-font: "Source Catalog Sans", Arial, sans-serif;
}

/* Barlow Condensed is slightly narrower than Bahnschrift Condensed; a touch of
   tracking keeps the large headlines at the same visual width and colour. */
.srs-site :where(h1, h2, .srs-route-card h3, .srs-pillar h3, .srs-library-card h3, .srs-library-empty h3, .srs-page-card h2) {
	letter-spacing: .01em;
}

/* A link inside a heading (article cards, for example) was forced onto the
   body font by the global element rule in source-shell.css. */
.srs-site :is(h1, h2, h3, h4, h5, h6) a {
	font-family: inherit !important;
}

/* ------------------------------------------------------------
   2. Header: "About" is a submenu button, so it inherited 14px/500
   from the navigation block instead of the 13px/600 top-level links.
   ------------------------------------------------------------ */
@media (min-width: 1121px) {
	body.srs-site .srs-header nav.srs-nav .srs-about-menu > button {
		font-family: var(--srs-font) !important;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: -.1px;
	}
}

/* ------------------------------------------------------------
   3. Homepage heading consistency.
   ------------------------------------------------------------ */
.srs-home .srs-research-nav h2 {
	margin: 0 0 22px;
	font-family: var(--srs-display) !important;
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
}

/* Mobile: the step cards switched to Space Grotesk because the condensed
   fallback looked poor on phones. With a real web font, match desktop. */
@media (max-width: 760px) {
	.srs-centered-hero .sch-step-copy h2 {
		font-family: var(--srs-display) !important;
		font-size: clamp(34px, 10vw, 44px);
		line-height: .98;
		letter-spacing: .005em;
		text-transform: uppercase;
	}
}

/* Mobile: read heading, then the savings note, then the catalogue link. */
@media (max-width: 820px) {
	.srs-home .srs-featured { display: flex; flex-direction: column; }
	.srs-home .srs-featured > .srs-featured-heading { display: contents; }
	.srs-home .srs-featured > .srs-featured-heading > * {
		width: 100%;
		box-sizing: border-box;
		padding-inline: var(--srs-pad);
	}
	.srs-home .srs-featured > .srs-featured-heading > h2 { order: 1; margin-bottom: 14px; }
	.srs-home .srs-featured > .srs-home-savings-note { order: 2; margin-bottom: 0; }
	.srs-home .srs-featured > .srs-featured-heading > .srs-featured-catalog-link { order: 3; margin-top: 16px; }
}

/* ------------------------------------------------------------
   4. Catalogue: category tabs scroll sideways on small screens.
   Hide the native scrollbar and fade the edge to signal more tabs.
   ------------------------------------------------------------ */
body.srs-site.cc-product-catalog .srs-category-links {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
body.srs-site.cc-product-catalog .srs-category-links::-webkit-scrollbar { display: none; }
@media (max-width: 820px) {
	body.srs-site.cc-product-catalog .srs-category-links {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
		padding-right: 28px;
	}
}

/* Kit cards: the evidence row holds a COA line like single-product cards
   (no link; component COAs are on the kit page). The saving moved to the
   image pill, so kit and single cards keep the same height and spacing. */
.srs-card-coa.srs-card-coa--kit { cursor: default; }
.srs-card-coa.srs-card-coa--kit:hover span { text-decoration: none; }
.srs-research-set-card .cc-card-media-pill .woocommerce-Price-amount { font: inherit; color: inherit; }

/* ------------------------------------------------------------
   5. Product page sticky purchase bar.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
	/* The bar already shows the price; keep "Add to cart — $80.00" on one line. */
	body.srs-site.single-product .cc-mobile-purchase-bar__button {
		white-space: nowrap;
		width: auto;
		min-width: 176px;
		padding-inline: 28px;
	}
}
/* ------------------------------------------------------------
   6. Cart, mini-cart and checkout: one type system with the site.
   ------------------------------------------------------------ */
.wc-block-mini-cart__drawer,
.wp-block-woocommerce-cart {
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}
.wp-block-woocommerce-checkout :where(h2, h3, .wc-block-components-title, .wc-block-components-checkout-step__title) {
	font-family: var(--srs-display) !important;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title { font-size: 22px; font-weight: 700 !important; }
.wp-block-woocommerce-checkout :where(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-components-product-name, .wc-block-components-product-price, .wc-block-components-address-card, .wc-block-components-checkbox__label, .wc-block-components-radio-control__label) {
	color: #101114;
	font-weight: 500;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item :where(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value) {
	font-weight: 700;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	min-height: 58px;
	font-family: var(--srs-font) !important;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
}
/* The receipt summary only earns its space when there is a saving to show. */
.cc-cart-receipt.is-without-savings { display: none !important; }

/* ------------------------------------------------------------
   7. Multibuy "Next saving" cart line (Source Multibuy 1.3.0+).
   The plugin adds it as WooCommerce item data; without this block it
   still shows as plain "Next saving: Add 4 more for 10% off each".
   ------------------------------------------------------------ */
/* Stack item-data entries and hide the inline " / " separator text. */
.wc-block-components-product-details:has(> .wc-block-components-product-details__next-saving) { font-size: 0; }
.wc-block-components-product-details:has(> .wc-block-components-product-details__next-saving) > span {
	display: block;
	font-size: 13px;
	line-height: 1.5;
}
.wc-block-components-product-details__next-saving {
	display: flex !important;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	color: #1e7b78;
	font-weight: 600;
}
.wc-block-components-product-details__next-saving::before {
	content: "";
	flex: 0 0 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The label stays for screen readers only. */
.wc-block-components-product-details__next-saving .wc-block-components-product-details__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* Checkout has no quantity controls, so the prompt isn't actionable there. */
.wp-block-woocommerce-checkout .wc-block-components-product-details__next-saving { display: none !important; }
/* Classic cart fallback. */
.woocommerce-cart-form dd.variation-Nextsaving { color: #1e7b78; font-weight: 600; }