/* One site-wide header system for block and classic WooCommerce templates. */
body.srs-site {
	--srs-announcement-height: 34px;
	--srs-admin-offset: 0px;
	--srs-page-title-size: clamp(40px, 5vw, 72px);
	--srs-page-banner-space: clamp(36px, 4vw, 56px);
	--srs-page-banner-height: clamp(260px, 28vw, 384px);
}
body.admin-bar.srs-site { --srs-admin-offset: 32px; }
body.srs-site .srs-announcement {
	display: flex;
	justify-content: center;
	align-items: center;
	height: var(--srs-announcement-height);
	min-height: var(--srs-announcement-height);
	padding: 0;
	margin: 0;
	overflow: hidden;
	font-size: 11px;
	font-weight: 750;
	line-height: 1.4;
	letter-spacing: .11em;
}
body.srs-site .srs-announcement__viewport { display: block; width: 100%; min-width: 0; overflow: hidden; }
body.srs-site .srs-announcement__track,
body.srs-site .srs-announcement__group,
body.srs-site .srs-announcement__item { display: flex; align-items: center; }
body.srs-site .srs-announcement__item { justify-content: center; gap: 8px; white-space: nowrap; }
body.srs-site .srs-announcement--static .srs-announcement__group { width: 100%; justify-content: space-evenly; gap: 24px; padding-inline: var(--srs-pad); box-sizing: border-box; }
body.srs-site .srs-announcement--scroll .srs-announcement__track { width: max-content; animation: srs-promo-scroll 48s linear infinite; }
body.srs-site .srs-announcement--scroll .srs-announcement__group { flex: 0 0 auto; min-width: 100vw; justify-content: space-around; gap: 40px; padding-inline: 40px; box-sizing: border-box; }
body.srs-site .srs-announcement--scroll:hover .srs-announcement__track,
body.srs-site .srs-announcement--scroll:focus-within .srs-announcement__track { animation-play-state: paused; }
@keyframes srs-promo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	body.srs-site .srs-announcement--scroll .srs-announcement__track { animation: none; width: 100%; }
	body.srs-site .srs-announcement--scroll .srs-announcement__group:first-child { width: 100%; }
	body.srs-site .srs-announcement--scroll .srs-announcement__item[aria-hidden] { display: none; }
	body.srs-site .srs-announcement--scroll .srs-announcement__group[aria-hidden] { display: none; }
}
@media (max-width: 700px) {
	body.srs-site .srs-announcement--static .srs-announcement__viewport,
	body.srs-site .srs-announcement--scroll .srs-announcement__viewport { overflow-x: auto; scrollbar-width: none; }
	body.srs-site .srs-announcement--static .srs-announcement__viewport::-webkit-scrollbar,
	body.srs-site .srs-announcement--scroll .srs-announcement__viewport::-webkit-scrollbar { display: none; }
	body.srs-site .srs-announcement--static .srs-announcement__track { width: max-content; min-width: 100%; }
	body.srs-site .srs-announcement--static .srs-announcement__group { width: max-content; min-width: 100%; gap: 24px; }
	body.srs-site .srs-announcement--scroll .srs-announcement__group { gap: 28px; padding-inline: 28px; }
}

/* The wrapped header sticks only after its promo row has scrolled away.
 * Classic WooCommerce already places that row outside the sticky nav. */
body.srs-site header.wp-block-template-part:has(.srs-announcement) {
	position: sticky;
	top: calc(var(--srs-admin-offset) - var(--srs-announcement-height));
	background: #08090b;
	box-shadow: none;
	z-index: 1000;
}
body.srs-site header.wp-block-template-part:has(.srs-announcement) .srs-header {
	position: relative !important;
	top: auto !important;
}
body.srs-site header.wp-block-template-part:not(:has(.srs-announcement)) {
	position: sticky;
	top: var(--srs-admin-offset);
	background: #08090b;
	z-index: 1000;
}
body.srs-site header.wp-block-template-part:not(:has(.srs-announcement)) .srs-header {
	position: relative !important;
	top: auto !important;
}
body.srs-site .wp-site-blocks > .srs-header { top: var(--srs-admin-offset) !important; }
body.srs-site .srs-header { background: #08090b !important; }
body.srs-site .srs-header .cc-header-inner { min-height: 78px; }
body.srs-site .srs-header .wp-block-navigation-item__content { font-size: 14px; }

/* Shared black title band; the homepage campaign and PDP purchase panel
 * keep their established layouts. Longer titles may grow naturally. */
body.srs-site :is(.srs-page-hero, .srs-about-hero, .srs-contact-hero, .srs-faq-page__hero, .cc-shop-head) {
	box-sizing: border-box;
	display: grid;
	align-content: center;
	min-height: var(--srs-page-banner-height);
	padding-block: var(--srs-page-banner-space) !important;
	margin-block: 0 !important;
	background: #08090b !important;
	color: #fff;
	border-bottom: 1px solid #303238;
}
body.srs-site :is(.srs-page-hero, .srs-about-hero, .srs-contact-hero, .srs-faq-page__hero, .cc-shop-head) h1 {
	max-width: 1100px;
	margin: 0 !important;
	color: #fff !important;
	font-family: var(--srs-display) !important;
	font-size: var(--srs-page-title-size) !important;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.06 !important;
	text-transform: uppercase;
	overflow-wrap: break-word;
}
body.srs-site :is(.srs-page-hero, .srs-about-hero, .srs-contact-hero, .srs-faq-page__hero, .cc-shop-head) :is(.srs-kicker, .cc-shop-eyebrow) {
	display: block;
	margin: 0 0 16px !important;
	color: #c5c9cf !important;
	font: 700 11px/1.4 var(--srs-font);
	letter-spacing: .16em;
}
body.srs-site :is(.srs-page-hero, .srs-about-hero, .srs-contact-hero, .srs-faq-page__hero, .cc-shop-head) h1 :is(span, strong, em) {
	font: inherit !important;
	letter-spacing: inherit;
}
body.srs-site :is(.srs-page-hero__intro, .srs-about-hero__intro, .srs-contact-hero__copy > p, .srs-faq-page__hero-grid > p, .cc-shop-summary) {
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: #c5c9cf !important;
}
body.srs-site :is(.srs-page-hero__intro, .cc-shop-summary) { margin: 20px 0 0 !important; }
body.srs-site :is(.srs-about-hero__grid, .srs-contact-hero__grid, .srs-faq-page__hero-grid) { align-items: center; }
body.srs-site .srs-interior > br:first-child { display: none; }
body.srs-site .srs-page-hero :is(.srs-button--primary) { color: #101114; background: #fff; border-color: #fff; }
body.srs-site .srs-page-hero :is(.srs-button--secondary) { color: #fff; background: transparent; border-color: #707680; }

/* Parent-theme title blocks gain a full-width band without changing their
 * article, policy or account content and native commerce controls. */
body.srs-site .wp-site-blocks > main:has(.srs-default-page-hero) { padding-top: 0 !important; }
body.srs-site .wp-block-group:has(> .srs-default-page-hero) { padding-top: 0 !important; }
body.srs-site .srs-default-page-hero { max-width: none !important; }
body.srs-site .srs-default-page-hero > .srs-shell { width: 100%; max-width: var(--srs-max) !important; box-sizing: border-box; }
body.srs-site .srs-default-page-hero + :is(.wp-block-post-content, .wp-block-post-featured-image) { margin-top: 40px; }

/* Keep the basket within easy reach below a compact utility-page title. */
body.srs-site.woocommerce-cart .srs-default-page-hero {
	--srs-page-banner-height: 72px;
	--srs-page-banner-space: 16px;
	--srs-page-title-size: 32px;
}
body.srs-site.woocommerce-cart .srs-default-page-hero + .wp-block-post-content { margin-top: 20px; }
@media (max-width: 600px) {
	body.srs-site.woocommerce-cart .srs-default-page-hero {
		--srs-page-banner-height: 64px;
		--srs-page-banner-space: 14px;
		--srs-page-title-size: 28px;
	}
	body.srs-site.woocommerce-cart .srs-default-page-hero + .wp-block-post-content { margin-top: 16px; }
}

@media (max-width: 782px) {
	body.admin-bar.srs-site { --srs-admin-offset: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar.srs-site { --srs-admin-offset: 0px; }
}
@media (max-width: 520px) {
	body.srs-site { --srs-page-banner-height: 0px; }
	body.srs-site .srs-header .cc-header-inner { min-height: 64px; }
	body.srs-site .srs-announcement { font-size: 10px; }
}
body.admin-bar.srs-site:has(.wc-block-components-drawer__screen-overlay--with-slide-in) { --srs-admin-offset: 0px; }

/* Keep the expanded menu and search within the same dark navigation system. */
body.srs-site .srs-header .wp-block-navigation__responsive-container.is-menu-open,
body.srs-site .srs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	background: #08090b !important;
	color: #fff !important;
}
body.srs-site .srs-header .wp-block-navigation__responsive-container.is-menu-open :is(a, .wp-block-navigation__container, .wp-block-navigation-item__content, .wp-block-navigation__responsive-container-close) {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}
body.srs-site .srs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { border-color: #34373d; }
body.srs-site .srs-header .wp-block-navigation__responsive-container.is-menu-open a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
body.srs-site .srs-header .cc-search:not(.open) .cc-search-form { visibility: hidden; }
body.srs-site .srs-header .cc-search.open .cc-search-form {
	position: absolute;
	top: calc(100% + 8px);
	right: max(var(--srs-pad), calc((100% - var(--srs-max)) / 2 + var(--srs-pad)));
	width: 320px;
	max-width: calc(100% - 2 * var(--srs-pad));
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 1px solid #777d86;
	border-radius: 0;
	background: #08090b;
	visibility: visible;
	z-index: 1001;
}
body.srs-site .srs-header .cc-search.open .cc-search-input { width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px; color: #fff; }
body.srs-site .srs-header .cc-search.open .cc-search-form:focus-within { outline: 1px solid #fff; outline-offset: 2px; }

/* Equal category controls instead of shrinking each link to its label. */
body.srs-site.cc-product-catalog .cc-filter-pills {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	width: 100%;
	max-width: 800px;
	gap: 8px;
	margin-inline: 0;
	padding-inline: 0;
	overflow: visible;
}
body.srs-site.cc-product-catalog .cc-filter-pills .cc-pill {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0;
	height: 44px !important;
	min-height: 44px;
	padding: 6px 8px;
	justify-content: center;
	text-align: center;
	white-space: normal;
	line-height: 1.2;
}
@media (max-width: 600px) {
	body.srs-site.cc-product-catalog .cc-filter-pills {
		display: flex !important;
		flex-wrap: nowrap;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 6px;
	}
	body.srs-site.cc-product-catalog .cc-filter-pills .cc-pill {
		flex: 0 0 auto;
		width: auto !important;
		min-width: 112px;
		padding-inline: 14px;
		white-space: nowrap;
	}
}

/* Checkout retains its focused logo/basket header with the same dimensions. */
body.srs-site.woocommerce-checkout header.wp-block-template-part { box-shadow: none; border-bottom: 1px solid #242424; }
body.srs-site.woocommerce-checkout header.wp-block-template-part > header { padding-inline: 0; }
body.srs-site.woocommerce-checkout header .is-layout-flex:has(> .srs-checkout-logo) {
	width: 100%;
	max-width: var(--srs-max) !important;
	box-sizing: border-box;
	min-height: 78px;
	margin-inline: auto;
	padding: 0 var(--srs-pad) !important;
}
body.srs-site.woocommerce-checkout .srs-checkout-logo { flex: 0 0 auto; width: clamp(170px, 13vw, 216px); max-width: none; }
@media (max-width: 520px) {
	body.srs-site.woocommerce-checkout header .is-layout-flex:has(> .srs-checkout-logo) { min-height: 64px; }
	body.srs-site.woocommerce-checkout .srs-checkout-logo { width: clamp(118px, 34vw, 146px); }
}

/* Four catalog destinations; paired cards keep mobile browsing compact. */
.srs-home .srs-categories .srs-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.srs-home .srs-categories .srs-card-grid--four .srs-route-card { min-width: 0; }
.srs-home .srs-categories .srs-card-grid--four h3 { font-size: clamp(28px, 2.6vw, 40px); }
@media (max-width: 1000px) {
 .srs-home .srs-categories .srs-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
 .srs-home .srs-categories .srs-card-grid--four .srs-route-card { padding: 20px 14px; }
 .srs-home .srs-categories .srs-card-grid--four h3 { margin: 24px 0 14px; font-size: clamp(20px, 5.7vw, 29px); letter-spacing: 0; }
 .srs-home .srs-categories .srs-card-grid--four p { font-size: 13px; line-height: 1.5; }
 .srs-home .srs-categories .srs-card-grid--four b { font-size: 11px; }
}

/* Source silver separates the price and purchase controls from product details. */
body.srs-site ul.products li.product:has(.cc-card-body) .cc-card-foot {
 background: var(--srs-silver);
 width: calc(100% + 32px);
 margin-inline: -16px !important;
 margin-bottom: -16px !important;
 padding: 16px !important;
 border-top: 0 !important;
}
@media (max-width: 520px) {
 body.srs-site ul.products li.product:has(.cc-card-body) .cc-card-foot {
  width: calc(100% + 20px);
  margin-inline: -10px !important;
  margin-bottom: -10px !important;
  padding: 12px 10px 10px !important;
 }
}

/* Source silver covers the complete product information panel below the image. */
body.srs-site ul.products li.product:has(.cc-card-body) .cc-card-body {
 background: var(--srs-silver) !important;
}

/* Category navigation sits with the catalog filters, leaving a compact title band. */
body.srs-site.cc-product-catalog .cc-shop-head {
 min-height: 0;
 padding-block: clamp(28px, 3vw, 42px) !important;
}
.srs-category-links { display: grid; gap: 4px; }
.srs-category-links .srs-category-link {
 display: flex;
 align-items: center;
 min-height: 44px;
 padding: 7px 10px;
 box-sizing: border-box;
 border: 1px solid transparent;
 color: var(--srs-ink);
 font: 400 13px/1.4 var(--srs-font);
 text-decoration: none;
}
.srs-category-links .srs-category-link:hover { background: #edf0f2; }
.srs-category-links .srs-category-link[aria-current="page"] {
 background: var(--srs-silver);
 border-color: var(--srs-silver);
 font-weight: 700;
}
.srs-category-links .srs-category-link:focus-visible { outline: 2px solid var(--srs-ink); outline-offset: 2px; }
