/*
Theme Name:  Sarms UK Child
Description: Child theme for sarms.co.uk — fresh redesign on Storefront
Template:    storefront
Version:     1.0.0
Author:      Sarms UK
Text Domain: sarms-child
*/

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
	--navy:       #15253f;
	--navy-mid:   #1d3354;
	--navy-light: #2a4a6b;
	--blue:       #33ace2;
	--blue-dark:  #1a8abf;
	--line:       #e2e8f0;
	--line-light: #f0f6fb;
	--text:       #15253f;
	--text-mid:   #475569;
	--text-muted: #64748b;
	--text-faint: #94a3b8;
	--amber:      #d4930a;
	--green:      #0f6e56;
	--radius-sm:  6px;
	--radius-md:  8px;
	--radius-lg:  10px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	color: var(--text);
	background: #f8fafc;
	margin: 0;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.sarms-announcement {
	background: var(--navy);
	color: #c8dff0;
	text-align: center;
	padding: 9px 20px;
	font-size: 12.5px;
	letter-spacing: .2px;
}
.sarms-announcement strong { color: #fff; font-weight: 500; }
.sarms-announcement a { color: #33ace2; }

/* ============================================================
   GLOBAL RESETS — undo Storefront JS/CSS side-effects
   ============================================================ */

/* Kill every source of top gap below the header */
body { padding-top: 0 !important; margin-top: 0 !important; }
html { margin-top: 0 !important; } /* WP admin bar adds margin-top:32px to html */
.site-content, #content { padding: 0 !important; margin: 0 !important; }
main#primary, #primary.sarms-home { margin: 0 !important; padding: 0 !important; }
.sarms-hero { margin-top: 0 !important; }
.wpadminbar ~ #page { padding-top: 0 !important; }

/* ============================================================
   FULL-WIDTH LAYOUT — override Storefront sidebar constraints
   ============================================================ */

/* Hide sidebar everywhere */
#secondary,
.widget-area,
.storefront-handheld-footer-bar,
.woocommerce-page #secondary,
.woocommerce #secondary { display: none !important; }

/* Full width — every WooCommerce context */
#primary,
#primary.content-area,
.has-sidebar #primary,
.has-sidebar #primary.content-area,
.woocommerce #primary,
.woocommerce-page #primary,
.single-product #primary,
.post-type-archive-product #primary,
.tax-product_cat #primary {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Inner content constrained to readable width */
.woocommerce-page .site-main,
.woocommerce .site-main,
.single-product .site-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
}

/* ============================================================
   HEADER — our header.php renders directly into <header>, no .col-full wrapper
   ============================================================ */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--line);
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
}

/* .sarms-header-row is a direct child of <header>: max-width centres content */
.sarms-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	height: 64px;
	gap: 24px;
}
.sarms-header-brand { flex-shrink: 0; }
.sarms-logo-text {
	font-size: 19px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	letter-spacing: -.4px;
}
.sarms-logo-text span { color: var(--blue); }
.sarms-header-brand .custom-logo-link img,
.sarms-header-brand .custom-logo { max-height: 44px; width: auto; display: block; }

/* Nav */
.sarms-main-nav { flex: 1; }
.sarms-nav-list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.sarms-nav-list > li > a {
	display: block;
	padding: 6px 14px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--navy);
	text-decoration: none;
	opacity: .85;
	transition: color .15s, opacity .15s;
}
.sarms-nav-list > li > a:hover,
.sarms-nav-list > li.current-menu-item > a { color: var(--blue) !important; opacity: 1; }
/* Dropdowns */
.sarms-nav-list li { position: relative; }
.sarms-nav-list ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 16px rgba(21,37,63,.1);
	min-width: 200px;
	padding: 6px 0;
	list-style: none;
	margin: 0;
	z-index: 999;
}
.sarms-nav-list li:hover > ul { display: block; }
.sarms-nav-list ul li a {
	display: block;
	padding: 8px 16px;
	font-size: 13px;
	color: var(--navy);
	text-decoration: none;
}
.sarms-nav-list ul li a:hover { background: var(--line-light); color: var(--blue); }

/* Cart */
/* Right-side header group: cart + burger */
.sarms-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.sarms-header-cart { position: relative; }
.sarms-header-cart .site-header-cart { margin: 0; }

/* Cart count bubble (mobile) */
.sarms-cart-count-badge {
	display: none;
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--blue);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* Burger button — hidden on desktop */
.sarms-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}
.sarms-burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--navy);
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}
.sarms-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sarms-burger.is-open span:nth-child(2) { opacity: 0; }
.sarms-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer — hidden until burger clicked */
.sarms-mobile-nav {
	display: none;
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 0;
}
.sarms-mobile-nav.is-open { display: block; }
.sarms-mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}
.sarms-mobile-nav-list li a {
	display: block;
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 500;
	color: var(--navy);
	text-decoration: none;
	border-bottom: 1px solid var(--line-light);
}
.sarms-mobile-nav-list li:last-child a { border-bottom: none; }
.sarms-mobile-nav-list li a:hover { color: var(--blue); background: #f8fafc; }

@media (max-width: 640px) {
	/* Show burger, hide desktop nav */
	.sarms-burger { display: flex; }
	.sarms-main-nav { display: none !important; }

	/* Compact header */
	.sarms-header-row { height: 56px; padding: 0 16px; gap: 8px; }

	/* Cart: icon only on mobile — hide label, show badge */
	.sarms-cart-label--desktop { display: none !important; }
	.sarms-cart-count-badge { display: flex; }
	.sarms-cart-btn {
		padding: 8px !important;
		min-width: 0 !important;
		background: transparent !important;
		border-color: var(--line) !important;
	}
	.sarms-cart-btn svg { width: 20px; height: 20px; }
}

/* Remove search bar if it somehow appears */
.site-header .site-search,
.storefront-product-search,
.widget_product_search { display: none !important; }

/* Logo */
.site-branding {
	display: flex;
	align-items: center;
}
/* Hide the WordPress site title text and tagline — we output just the logo element */
.site-branding .site-title,
.site-branding .site-description { display: none !important; }

/* Our custom text logo */
.site-branding .site-title a,
.site-branding p.site-title a {
	font-size: 19px;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: -.4px;
	text-decoration: none;
}
.site-branding p.site-title { display: block !important; margin: 0 !important; }
.site-branding p.site-title a { color: var(--navy) !important; }
.site-branding p.site-title a .accent,
.site-branding p.site-title a span { color: var(--blue) !important; }

/* Custom logo image (via Customizer) */
.custom-logo-link img,
.custom-logo { max-height: 46px; width: auto; display: block; }

/* Primary nav */
.main-navigation ul li a {
	color: var(--navy) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	padding: 6px 14px !important;
	opacity: .85;
	transition: opacity .15s, color .15s;
}
.main-navigation ul li a:hover {
	color: var(--blue) !important;
	opacity: 1;
}
.main-navigation ul li.current-menu-item > a { color: var(--blue) !important; opacity: 1; }

/* Dropdown */
.main-navigation ul ul {
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-md) !important;
	box-shadow: 0 4px 16px rgba(21,37,63,.1) !important;
	padding: 6px 0 !important;
	min-width: 200px !important;
}
.main-navigation ul ul li a {
	padding: 8px 16px !important;
	font-size: 13px !important;
	opacity: 1 !important;
}
.main-navigation ul ul li a:hover { background: var(--line-light) !important; }

/* Cart button — simple link, no widget dropdown */
.sarms-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--blue);
	color: #fff !important;
	border-radius: var(--radius-sm);
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s;
}
.sarms-cart-btn:hover { background: var(--navy); color: #fff !important; }
.sarms-cart-btn svg { flex-shrink: 0; }
/* Hide any old Storefront cart widget in header */
.site-header-cart { display: none !important; }

/* ============================================================
   TRUST BAR — sits after <header>, full-width strip
   ============================================================ */
.sarms-trust-bar {
	background: #f0f6fb;
	border-bottom: 1px solid #d6eaf6;
	padding: 9px 24px;
	width: 100%;
}
.sarms-trust-bar .inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
}
.sarms-trust-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--navy);
	white-space: nowrap;
}
.sarms-trust-item svg {
	width: 14px;
	height: 14px;
	stroke: var(--blue);
	flex-shrink: 0;
}

/* ============================================================
   LAYOUT WRAPPER
   ============================================================ */
.col-full,
.storefront-full-width-content .col-full {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* ── Force-hide sidebar on ALL WooCommerce pages ─────────────
   The Storefront filter alone doesn't override widget areas.   */
#secondary,
.widget-area,
.woocommerce-page #secondary,
.woocommerce-page .widget-area,
.single-product #secondary,
.single-product .widget-area,
.post-type-archive-product #secondary {
	display: none !important;
}

/* With sidebar hidden, give content area full width */
.woocommerce-page #primary,
.single-product #primary,
.post-type-archive-product #primary {
	width: 100% !important;
	float: none !important;
	margin: 0 auto !important;
}

/* ============================================================
   SHOP / ARCHIVE PAGE
   ============================================================ */
.woocommerce-page .site-main,
.archive.woocommerce .site-main {
	background: #f8fafc;
	padding: 28px 0;
}

/* Homepage product grid — pure custom class, zero WooCommerce/Storefront interference */
.sarms-pg {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
}

/* Homepage product card */
.sarms-pc {
	background: #fff;
	border: 1px solid #dce6ef;
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sarms-pc:hover {
	border-color: var(--blue);
	box-shadow: 0 8px 24px rgba(21,37,63,.08);
	transform: translateY(-2px);
}
.sarms-pc-img { display: block; background: #fff; }
.sarms-pc-img img {
	width: 100%;
	height: 180px;
	object-fit: contain;
	object-position: center;
	padding: 20px 24px;
	background: #fff;
	display: block;
	transition: transform .3s;
}
.sarms-pc:hover .sarms-pc-img img { transform: scale(1.03); }
.sarms-pc-noimg {
	height: 220px;
	background: #fff;
}
.sarms-pc .sarms-grade-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
}
.sarms-pc-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
	background: #fff;
}
.sarms-pc-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 4px;
	line-height: 1.35;
}
.sarms-pc-title a {
	color: var(--text);
	text-decoration: none;
}
.sarms-pc-title a:hover { color: var(--blue); }

/* View button */
.sarms-btn-view {
	display: inline-block;
	background: var(--blue);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s;
}
.sarms-btn-view:hover { background: var(--blue-dark); color: #fff !important; }

/* Legacy ul.sarms-grid-4 (fallback) */
ul.sarms-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Shop/archive pages — still use the products class, force 4 col */
ul.products,
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Product card — shop/archive pages (li.product) */
.woocommerce ul.products li.product,
ul.products li.product {
	background: #fff;
	border: 1px solid #dce6ef;
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	transition: border-color .2s, box-shadow .2s, transform .2s;
	position: relative;
}
ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
	border-color: var(--blue);
	box-shadow: 0 8px 24px rgba(21,37,63,.08);
	transform: translateY(-2px);
}

/* Product image area */
ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	background: #fff;
}
ul.products li.product img,
.woocommerce ul.products li.product img {
	width: 100%;
	height: 180px;
	object-fit: contain;
	object-position: center;
	padding: 20px 24px;
	background: #fff;
	display: block;
	transition: transform .3s;
}
ul.products li.product:hover img,
.woocommerce ul.products li.product:hover img { transform: scale(1.03); }

/* Research grade badge */
ul.products li.product .sarms-grade-badge,
.woocommerce ul.products li.product .sarms-grade-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--navy);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	letter-spacing: .3px;
	text-transform: uppercase;
}

/* Card body */
ul.products li.product .sarms-card-body,
.woocommerce ul.products li.product .sarms-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
	background: #fff;
}

ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var(--navy) !important;
	margin: 0 0 3px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}
ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: var(--navy) !important;
	text-decoration: none !important;
}
ul.products li.product .woocommerce-loop-product__title a:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
	color: var(--blue) !important;
}

ul.products li.product .sarms-card-sku,
.woocommerce ul.products li.product .sarms-card-sku {
	font-size: 11.5px;
	color: var(--text-faint);
	margin-bottom: 10px;
}

/* Stars */
ul.products li.product .star-rating,
.woocommerce ul.products li.product .star-rating {
	margin: 0 0 8px !important;
	font-size: 12px !important;
}
ul.products li.product .star-rating::before,
ul.products li.product .star-rating span::before,
.woocommerce ul.products li.product .star-rating::before,
.woocommerce ul.products li.product .star-rating span::before {
	color: #f59e0b !important;
}

/* Price + button row */
ul.products li.product .sarms-card-footer,
.woocommerce ul.products li.product .sarms-card-footer,
.sarms-pc .sarms-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--line-light);
}
ul.products li.product .sarms-card-footer .sarms-btn-view,
.woocommerce ul.products li.product .sarms-card-footer .sarms-btn-view,
.sarms-pc .sarms-card-footer .sarms-btn-view {
	margin-left: auto;
}

ul.products li.product .price,
.woocommerce ul.products li.product .price {
	font-size: 17px !important;
	font-weight: 600 !important;
	color: var(--navy) !important;
	margin: 0 !important;
}

ul.products li.product .button,
ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
	background: #fff !important;
	color: var(--navy) !important;
	border: 1.5px solid #c8d8e8 !important;
	border-radius: var(--radius-md) !important;
	padding: 8px 16px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	transition: border-color .15s, color .15s, background .15s !important;
}
ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
	background: var(--navy) !important;
	color: #fff !important;
	border-color: var(--navy) !important;
	transform: none !important;
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.single-product .site-main { background: #f8fafc; }

/* Two-column layout — gallery left, summary right, everything else full-width below */
.single-product div.product {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	grid-template-rows: auto !important;
	align-items: start !important;
	gap: 0 !important;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 24px !important;
}

/* Pin gallery to column 1, row 1 — override Storefront's float: left; width: 41% */
.single-product div.product > .woocommerce-product-gallery {
	grid-column: 1 !important;
	grid-row: 1 !important;
	width: 100% !important;
	float: none !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

/* Pin summary to column 2, row 1 — override Storefront's float: right; width: 52% */
.single-product div.product > .summary.entry-summary {
	grid-column: 2 !important;
	grid-row: 1 !important;
	width: 100% !important;
	float: none !important;
	box-sizing: border-box !important;
}

/* Everything else (tabs, notices, upsells) spans both columns */
.single-product div.product > *:not(.woocommerce-product-gallery):not(.summary) {
	grid-column: 1 / -1 !important;
	border-top: 1px solid var(--line);
}

/* Hide YITH compare button — injected by plugin, breaks our clean layout */
.single-product .compare.button,
a.compare.button { display: none !important; }

/* Image column */
.single-product div.product .woocommerce-product-gallery {
	padding: 24px !important;
	border-right: 1px solid var(--line);
	background: #eef4fc;
}

/* Make the gallery image fill the left column.
   Force flex-viewport height — flexslider sets this via inline style to 0 when it
   cannot measure column width at init time (CSS grid hasn't laid out yet). */
.single-product div.product .woocommerce-product-gallery .flexslider {
	width: 100% !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport {
	width: 100% !important;
	height: 340px !important; /* overrides flexslider inline style="height:0px" */
	overflow: hidden !important;
}
.single-product div.product .woocommerce-product-gallery .slides {
	height: 340px !important;
}
.single-product div.product .woocommerce-product-gallery .slides > li {
	width: 100% !important;
	height: 340px !important;
}
.single-product div.product .woocommerce-product-gallery .slides > li a,
.single-product div.product .woocommerce-product-gallery .slides > li a img,
.single-product div.product .woocommerce-product-gallery__image img,
.single-product div.product .woocommerce-product-gallery img.wp-post-image {
	display: block !important;
	width: 100% !important;
	height: 340px !important;
	object-fit: contain !important;
	object-position: center !important;
	background: #fff !important;
}

.single-product div.product .woocommerce-product-gallery__wrapper {
	border-radius: var(--radius-md);
	overflow: hidden;
}
.single-product div.product .woocommerce-product-gallery .flex-control-nav {
	display: flex;
	gap: 8px;
	margin-top: 10px !important;
}
.single-product div.product .woocommerce-product-gallery .flex-control-nav li {
	width: 52px !important;
	height: 52px !important;
	margin: 0 !important;
}
.single-product div.product .woocommerce-product-gallery .flex-control-nav li img {
	width: 52px !important;
	height: 52px !important;
	object-fit: cover;
	border-radius: 6px;
	border: 1.5px solid var(--line);
	cursor: pointer;
	opacity: .7;
	transition: opacity .15s, border-color .15s;
}
.single-product div.product .woocommerce-product-gallery .flex-control-nav li img.flex-active {
	border-color: var(--blue);
	opacity: 1;
}

/* Gallery badges — positioned absolutely over the image */
.woocommerce-product-gallery { position: relative !important; }

.sarms-gallery-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	z-index: 10;
	pointer-events: none;
}
.sarms-gallery-badge {
	font-size: 10.5px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 5px;
	letter-spacing: .2px;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none !important;
}
.sarms-gallery-badge--grade {
	background: var(--navy);
	color: #fff;
}
.sarms-gallery-badge--coa {
	background: var(--green);
	color: #fff !important;
}
.sarms-gallery-badge--coa:hover { opacity: .9; color: #fff !important; }
.sarms-gallery-badge--coa svg { stroke: #fff; }

/* Summary column */
.single-product div.product .summary {
	padding: 24px !important;
	display: flex;
	flex-direction: column;
}

/* Hide short description on product pages — bullets/purity box are editor content
   we don't want. Belt-and-suspenders in case server cache serves old PHP output. */
.single-product .woocommerce-product-details__short-description,
.single-product div.product .short-description {
	display: none !important;
}

/* Product subtitle (SKU · dosage · count) */
.sarms-product-subtitle {
	font-size: 13px;
	color: var(--text-muted);
	margin: 2px 0 10px;
	font-weight: 400;
	line-height: 1.4;
}

/* Breadcrumb above product */
.woocommerce-breadcrumb {
	font-size: 12px !important;
	color: var(--text-faint) !important;
	padding: 12px 0 !important;
	margin-bottom: 0 !important;
}
.woocommerce-breadcrumb a { color: var(--text-muted) !important; }
.woocommerce-breadcrumb a:hover { color: var(--navy) !important; }

/* Product type tag */
.sarms-product-type-tag {
	font-size: 11px;
	color: var(--blue);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	margin-bottom: 6px;
}

/* Product title */
.single-product div.product .product_title {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--navy) !important;
	line-height: 1.2 !important;
	margin: 0 0 4px !important;
}

/* SKU */
.single-product .sku_wrapper {
	font-size: 12px !important;
	color: var(--text-faint) !important;
	margin-bottom: 10px !important;
}

/* Star rating */
.single-product div.product .woocommerce-product-rating {
	margin: 0 0 14px !important;
}
.single-product div.product .star-rating::before,
.single-product div.product .star-rating span::before { color: #f59e0b !important; }
.single-product div.product .woocommerce-review-link {
	font-size: 12.5px !important;
	color: var(--text-muted) !important;
}

/* Price */
.single-product div.product .price {
	font-size: 26px !important;
	font-weight: 700 !important;
	color: var(--navy) !important;
	margin: 0 0 6px !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 10px !important;
}

/* Stock */
.single-product div.product .in-stock {
	color: var(--green) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	margin-bottom: 14px !important;
}
.single-product div.product .out-of-stock {
	color: #a32d2d !important;
	font-size: 12.5px !important;
}

/* Quantity + ATC */
.single-product div.product form.cart {
	display: flex !important;
	gap: 10px !important;
	margin-bottom: 14px !important;
	align-items: center !important;
}
.single-product div.product .quantity input {
	width: 70px !important;
	height: 42px !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-md) !important;
	text-align: center !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--navy) !important;
	background: #fff !important;
}
.single-product div.product .single_add_to_cart_button {
	flex: 1 !important;
	background: var(--blue) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--radius-md) !important;
	height: 42px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	transition: background .15s !important;
}
.single-product div.product .single_add_to_cart_button:hover {
	background: var(--navy) !important;
}

/* Bank transfer note */
.sarms-bank-note {
	background: var(--line-light);
	border: 1px solid #d6eaf6;
	border-radius: var(--radius-md);
	padding: 11px 14px;
	font-size: 12.5px;
	color: var(--navy);
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-bottom: 14px;
}
.sarms-bank-note svg {
	width: 18px;
	height: 18px;
	stroke: var(--blue);
	flex-shrink: 0;
	margin-top: 1px;
}
.sarms-bank-note a { color: var(--blue); font-weight: 500; }

/* Product meta (purity, dosage etc) */
.single-product div.product .product_meta {
	border-top: 1px solid var(--line-light);
	padding-top: 14px;
	margin-top: 6px;
}
.single-product div.product .product_meta span {
	display: flex;
	gap: 8px;
	font-size: 12.5px;
	margin-bottom: 5px;
}
.single-product div.product .product_meta .sku_wrapper,
.single-product div.product .product_meta .posted_in,
.single-product div.product .product_meta .tagged_as {
	color: var(--text-mid) !important;
}
.single-product div.product .product_meta a { color: var(--blue) !important; }

/* COA badge on image */
.sarms-coa-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--green);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 5px;
	margin-top: 10px;
	text-decoration: none !important;
}
.sarms-coa-badge:hover { background: #0a5240; color: #fff !important; }

/* Tabs */
.woocommerce-tabs {
	background: #fff;
	border-top: 1px solid var(--line);
	overflow: hidden;
	margin-bottom: 0 !important;
}
.woocommerce-tabs ul.tabs {
	background: #f8fafc !important;
	border-bottom: 1px solid var(--line) !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	gap: 0 !important;
	width: 100% !important;
}
.woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
	border-bottom: 3px solid transparent !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	flex: 1 !important;
	text-align: center !important;
}
.woocommerce-tabs ul.tabs li a {
	color: var(--text-faint) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 16px 12px !important;
	display: block !important;
	white-space: nowrap !important;
}
.woocommerce-tabs ul.tabs li.active {
	background: #fff !important;
	border-bottom-color: var(--blue) !important;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--navy) !important; }
.woocommerce-tabs ul.tabs li:not(:last-child) { border-right: 1px solid var(--line) !important; }
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs .panel {
	padding: 28px !important;
	margin: 0 !important;
	border: none !important;
	background: #fff !important;
	width: 100% !important;
	float: none !important;
	box-sizing: border-box !important;
}
/* Scorecard tab keeps its grey card-tray background */
.woocommerce-tabs .panel .sarms-sc-wrap {
	background: #f4f7fa;
	border-radius: 0;
	margin: -28px;
	padding: 28px;
}
.woocommerce-tabs ul.tabs {
	float: none !important;
}

/* ============================================================
   SINGLE PRODUCT — COMPOUND EYEBROW + SPEC TABLE
   ============================================================ */
.sarms-product-eyebrow {
	font-size: 10px;
	font-weight: 700;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .9px;
	margin: 0 0 10px;
	line-height: 1.4;
}

.sarms-product-specs {
	margin: 18px 0 4px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.sarms-spec-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 14px;
	font-size: 13px;
	border-bottom: 1px solid var(--line-light);
}
.sarms-spec-row:last-child { border-bottom: none; }
.sarms-spec-label {
	color: var(--text-muted);
	font-weight: 500;
	white-space: nowrap;
	min-width: 100px;
}
.sarms-spec-val {
	color: var(--navy);
	font-weight: 500;
	text-align: right;
}
.sarms-spec-val a { color: var(--blue); text-decoration: none; font-weight: 500; }
.sarms-spec-val a:hover { text-decoration: underline; }

/* ============================================================
   SCORECARD COMPONENT — two-column layout
   ============================================================ */
.sarms-sc-wrap {
	padding: 0;
}

/* Shared section eyebrow */
.sarms-sc-eyebrow {
	font-size: 10px;
	font-weight: 700;
	color: var(--text-faint);
	text-transform: uppercase;
	letter-spacing: .7px;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 5px;
	line-height: 1;
}
.sarms-sc-eyebrow svg { flex-shrink: 0; stroke: var(--text-faint); }

/* Two columns */
.sarms-sc-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	padding: 0 0 22px;
}

.sarms-sc-left,
.sarms-sc-right {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 24px;
}

/* ── Left column ── */
.sarms-sc-overall {
	margin-bottom: 28px;
}
.sarms-sc-score-row {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin: 6px 0 4px;
}
.sarms-sc-score-num {
	font-size: 52px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1;
}
.sarms-sc-score-denom {
	font-size: 22px;
	font-weight: 400;
	color: var(--text-muted);
}
.sarms-sc-rating-text {
	font-size: 12.5px;
	color: var(--text-muted);
	margin: 2px 0 0;
}

.sarms-sc-metrics { display: flex; flex-direction: column; gap: 12px; }

.sarms-sc-metric-hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}
.sarms-sc-metric-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
}
.sarms-sc-metric-val {
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
}
.sarms-sc-metric-val.sc-bar--risk    { color: #dc2626; }
.sarms-sc-metric-val.sc-bar--minimal { color: #d97706; }

.sarms-sc-bar-bg {
	height: 7px;
	background: var(--line);
	border-radius: 4px;
	overflow: hidden;
}
.sarms-sc-bar {
	height: 100%;
	border-radius: 4px;
	transition: width .5s ease;
}
.sarms-sc-bar.sc-bar--good    { background: var(--blue); }
.sarms-sc-bar.sc-bar--risk    { background: #dc2626; }
.sarms-sc-bar.sc-bar--minimal { background: #d97706; }

/* ── Right column ── */
.sarms-sc-profile { margin-bottom: 24px; }

.sarms-sc-profile-dl { margin: 0; }
.sarms-sc-profile-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--line-light);
	font-size: 13px;
}
.sarms-sc-profile-row:last-child { border-bottom: none; }
.sarms-sc-profile-row dt {
	color: var(--text-muted);
	font-weight: 500;
	min-width: 120px;
	white-space: nowrap;
}
.sarms-sc-profile-row dd {
	color: var(--navy);
	font-weight: 500;
	margin: 0;
	text-align: right;
}

/* Research application tags */
.sarms-sc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.sarms-sc-tag {
	background: var(--line-light);
	color: var(--text-mid);
	font-size: 11.5px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid var(--line);
}
.sarms-sc-tag--warning {
	background: #fff7ed;
	color: #92400e;
	border-color: #fde68a;
}

/* Disclaimer — spans below both columns */
.sarms-sc-disclaimer {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--radius-md);
	padding: 12px 16px;
	margin-top: 0;
	font-size: 11.5px;
	color: #78350f;
	display: flex;
	align-items: flex-start;
	gap: 7px;
}
.sarms-sc-disclaimer svg {
	width: 14px;
	height: 14px;
	stroke: var(--amber);
	flex-shrink: 0;
	margin-top: 1px;
}
.sarms-sc-disclaimer strong { color: #92400e; }

/* ── Lab report tab ── */
.sarms-lab-report-tab {
	font-size: 14px;
	color: var(--text-mid);
	line-height: 1.75;
}
.sarms-lab-report-tab p { margin: 0 0 14px; }
.sarms-btn-coa {
	display: inline-block;
	background: var(--navy);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	border: none;
}
.sarms-btn-coa:hover { background: var(--navy-mid); color: #fff !important; }
.sarms-lab-note { font-size: 13px; color: var(--text-muted); }

/* Scorecard responsive */
@media (max-width: 860px) {
	.sarms-sc-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   STACKS UPSELL SECTION
   ============================================================ */
.single-product .sarms-stacks-section {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 24px;
	padding: 22px 24px;
}
.sarms-stacks-header { margin-bottom: 18px; }
.sarms-stacks-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--navy);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}
.sarms-stacks-title svg { width: 18px; height: 18px; stroke: var(--blue); }
.sarms-stacks-subtitle { font-size: 12.5px; color: var(--text-muted); }

.sarms-stacks-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 14px;
}

.sarms-stack-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.sarms-stack-card.featured { border-color: var(--blue); border-width: 1.5px; }

.sarms-stack-card-header {
	background: var(--navy);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 54px;
}
.sarms-stack-name-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}
.sarms-stack-name { color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.sarms-stack-tagline { color: #7eaecf; font-size: 11.5px; margin-top: 2px; }
.sarms-stack-price-col { text-align: right; flex-shrink: 0; }
.sarms-stack-price { color: #fff; font-size: 18px; font-weight: 700; }
.sarms-stack-save {
	display: inline-block;
	background: var(--blue);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	margin-top: 4px;
}
.sarms-popular-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--blue);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 4px;
	flex-shrink: 0;
	white-space: nowrap;
}

.sarms-stack-card-body { padding: 14px 16px; }
.sarms-stack-includes-label {
	font-size: 10px;
	color: var(--text-faint);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 8px;
}
.sarms-stack-items { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.sarms-stack-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--text);
}
.sarms-stack-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--line);
	flex-shrink: 0;
}
.sarms-stack-dot.current { background: var(--blue); }
.sarms-stack-item.current-compound { font-weight: 600; }
.sarms-stack-item-detail { margin-left: auto; font-size: 11px; color: var(--text-faint); }

.sarms-stack-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 10px;
	border-top: 1px solid var(--line-light);
}
.sarms-stack-saving { font-size: 11.5px; color: var(--green); font-weight: 500; }
.sarms-stack-atc {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--blue);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s;
}
.sarms-stack-atc:hover { background: var(--navy); color: #fff !important; }

.sarms-stacks-compare-note {
	background: var(--line-light);
	border: 1px solid #d6eaf6;
	border-radius: var(--radius-md);
	padding: 11px 14px;
	font-size: 12.5px;
	color: var(--navy);
	display: flex;
	align-items: center;
	gap: 9px;
}
.sarms-stacks-compare-note svg { width: 18px; height: 18px; stroke: var(--blue); flex-shrink: 0; }
.sarms-stacks-compare-note a { color: var(--blue); font-weight: 500; }

/* "Most popular" badge — top-right of the card header */
.sarms-popular-badge {
	margin-bottom: 6px;
	margin-left: auto;
	display: inline-flex;
}

/* ============================================================
   RELATED PRODUCTS
   ============================================================ */
.single-product .related.products {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 24px !important;
	margin-bottom: 24px !important;
	clear: both;
}
.single-product .related.products > h2 {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--navy) !important;
	margin: 0 0 20px !important;
}
.single-product .related.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after { display: none !important; }
.single-product .related.products ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}

/* ============================================================
   EDITORIAL CONTENT BLOCK
   ============================================================ */
.sarms-editorial { background: #fff; border-top: 1px solid var(--line-light); }
.sarms-editorial-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 48px;
	align-items: start;
}
.sarms-editorial-main h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 18px;
}
.sarms-editorial-main p {
	font-size: 14.5px;
	color: var(--text-muted);
	line-height: 1.8;
	margin-bottom: 14px;
}
.sarms-editorial-main a { color: var(--blue); }
.sarms-editorial-aside { display: flex; flex-direction: column; gap: 14px; }
.sarms-editorial-aside-card {
	background: #f8fafc;
	border: 1px solid var(--line-light);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-md);
	padding: 16px 18px;
}
.sarms-editorial-aside-card h4 {
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
	margin: 0 0 6px;
}
.sarms-editorial-aside-card p {
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.7;
	margin: 0;
}
.sarms-editorial-main h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--navy);
	margin: 24px 0 10px;
}
.sarms-editorial-list {
	padding-left: 0;
	margin: 0 0 8px;
	list-style: none;
}
.sarms-editorial-list li {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.75;
	padding: 6px 0 6px 20px;
	position: relative;
	border-bottom: 1px solid var(--line-light);
}
.sarms-editorial-list li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--blue);
	font-size: 12px;
}
.sarms-editorial-list li strong { color: var(--navy); }

/* Why choose section */
.sarms-why-choose {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--line-light);
}
.sarms-why-choose h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 10px;
}
.sarms-why-choose > p {
	font-size: 14.5px;
	color: var(--text-muted);
	line-height: 1.75;
	margin: 0 0 20px;
	max-width: 760px;
}
.sarms-why-choose-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.sarms-why-choose-list li {
	background: #f8fafc;
	border: 1px solid var(--line-light);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	font-size: 13.5px;
	color: var(--text-muted);
	line-height: 1.65;
}
.sarms-why-choose-list li span {
	display: block;
	font-weight: 600;
	color: var(--navy);
	margin-bottom: 3px;
}
@media (max-width: 860px) {
	.sarms-editorial-grid { grid-template-columns: 1fr; gap: 28px; }
	.sarms-why-choose-list { grid-template-columns: 1fr; }
}

/* ============================================================
   QA STEPS
   ============================================================ */
.sarms-qa-section { background: #f8fafc; }
.sarms-qa-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}
.sarms-qa-step {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 20px 18px;
}
.sarms-qa-num {
	font-size: 28px;
	font-weight: 700;
	color: var(--blue);
	opacity: .25;
	line-height: 1;
	margin-bottom: 10px;
}
.sarms-qa-step h4 {
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
	margin: 0 0 8px;
}
.sarms-qa-step p {
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.65;
	margin: 0;
}
@media (max-width: 900px) {
	.sarms-qa-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 580px) {
	.sarms-qa-steps { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.sarms-faq-section { background: #fff; }
.sarms-faq-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.sarms-faq-item {
	background: #f8fafc;
	border: 1px solid var(--line-light);
	border-radius: var(--radius-lg);
	padding: 20px 18px;
}
.sarms-faq-item h4 {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--navy);
	margin: 0 0 10px;
	line-height: 1.45;
}
.sarms-faq-item p {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.7;
	margin: 0;
}
@media (max-width: 860px) {
	.sarms-faq-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.sarms-faq-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER — hooked into storefront_footer action, inside #colophon
   ============================================================ */

/* Nuclear: hide every footer element that is NOT our custom one */
footer:not([data-sarms-footer="1"]) { display: none !important; }
#colophon,
.site-footer:not(.sarms-footer),
.storefront-handheld-footer-bar,
.elementor-location-footer,
[data-elementor-type="footer"] { display: none !important; }
.sarms-footer {
	background: var(--navy);
	padding: 48px 0 0;
	width: 100%;
	display: block;
}
.sarms-footer-inner {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}
.sarms-footer-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 36px;
	border-bottom: 1px solid #1d3354;
}
.sarms-footer-logo {
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 12px;
	letter-spacing: -.3px;
}
.sarms-footer-logo span { color: var(--blue); }
.sarms-footer-logo-img,
.sarms-footer-brand .custom-logo-link img {
	max-width: 160px;
	height: auto;
	margin-bottom: 14px;
	display: block;
}
.sarms-footer-desc {
	font-size: 12.5px;
	color: #5a7a96;
	line-height: 1.75;
	margin: 0;
}
.sarms-footer-col h4 {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .6px;
	margin: 0 0 14px;
}
.sarms-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sarms-footer-col ul li { margin-bottom: 8px; }
.sarms-footer-col ul li a {
	font-size: 13px;
	color: #5a7a96;
	text-decoration: none;
	transition: color .15s;
}
.sarms-footer-col ul li a:hover { color: #fff; }
.sarms-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid #1a2f48;
}
.sarms-footer-bottom p {
	font-size: 12px;
	color: #3a5270;
	margin: 0;
}
.sarms-footer-bottom-links {
	display: flex;
	gap: 18px;
}
.sarms-footer-bottom-links a {
	font-size: 12px;
	color: #3a5270;
	text-decoration: none;
}
.sarms-footer-bottom-links a:hover { color: #fff; }
.sarms-footer-disclaimer {
	font-size: 11px;
	color: #2d4a63;
	line-height: 1.6;
	text-align: center;
	padding: 14px 0 20px;
	margin: 0;
}
@media (max-width: 900px) {
	.sarms-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 540px) {
	.sarms-footer-grid { grid-template-columns: 1fr; }
	.sarms-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ============================================================
   NOTICES & MISC
   ============================================================ */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--blue) !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--blue) !important; }

.woocommerce-error { border-top-color: #e24b4a !important; }

button, .button, input[type="submit"] {
	border-radius: var(--radius-md) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.single-product div.product {
		grid-template-columns: 1fr !important;
	}
	.single-product div.product .woocommerce-product-gallery {
		border-right: none !important;
		border-bottom: 1px solid var(--line) !important;
	}
	.sarms-stacks-grid { grid-template-columns: 1fr !important; }
	.sarms-trust-bar .inner { gap: 16px; justify-content: flex-start; }
}

@media (max-width: 640px) {
	/* Homepage custom product grid (.sarms-pg) → 1 column */
	.sarms-pg {
		grid-template-columns: 1fr !important;
	}
	/* WooCommerce shop/archive product grids → 1 column */
	ul.products,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4,
	.woocommerce ul.products,
	.sarms-home ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr !important;
	}
	.main-navigation { display: none; }
	.sarms-announcement { font-size: 11px; padding: 8px 12px; }
}

/* Inline product links in editorial content */
.sarms-inline-link {
	color: var(--blue);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sarms-inline-link:hover { color: var(--navy); }

/* ============================================================
   HOMEPAGE — front-page.php
   ============================================================ */

/* Shared section wrapper */
.sarms-home-section { padding: 32px 0; }
.sarms-home-section.sarms-home-products,
.sarms-home-section.sarms-home-stacks { background: #f8fafc; padding: 28px 0; }
.sarms-home-section.sarms-home-posts { background: #fff; border-top: 1px solid var(--line); }
.sarms-home-section.sarms-home-why { background: #f8fafc; border-top: 1px solid var(--line); }
.sarms-home-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.sarms-home-sect-hdr {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 16px;
}
.sarms-home-sect-title { font-size: 20px; font-weight: 500; color: var(--navy); margin: 0 0 4px; }
.sarms-home-sect-sub { font-size: 13px; color: var(--text-muted); margin: 0; }
.sarms-see-all { font-size: 13px; color: var(--blue); font-weight: 500; text-decoration: none; white-space: nowrap; }
.sarms-see-all:hover { color: var(--navy); }

/* li.product must not float or carry WooCommerce widths — grid handles placement */
ul.products li.product {
	float: none !important;
	width: auto !important;
	clear: none !important;
}
/* Kill WooCommerce result-count and ordering bar on homepage */
.sarms-home .woocommerce-result-count,
.sarms-home .woocommerce-ordering,
.sarms-home .woocommerce-notices-wrapper { display: none !important; }

/* ── Hero ──────────────────────────────────────────────────── */
.sarms-hero {
	background: var(--navy);
	padding: 52px 24px;
}
.sarms-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: 40px;
	align-items: center;
}
.sarms-hero-eyebrow {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .8px;
	margin: 0 0 12px;
}
.sarms-hero-h1 {
	font-size: 32px;
	font-weight: 500;
	color: #fff;
	line-height: 1.2;
	margin: 0 0 14px;
}
.sarms-hero-h1 span { color: var(--blue); }
.sarms-hero-p {
	font-size: 13.5px;
	color: #9ab8d4;
	line-height: 1.8;
	max-width: 440px;
	margin: 0 0 24px;
}
.sarms-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.sarms-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--blue);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	padding: 12px 24px;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s;
}
.sarms-btn-primary:hover { background: var(--blue-dark); color: #fff; }
.sarms-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	color: #9ab8d4;
	border: 1px solid #2a4a6b;
	border-radius: var(--radius-md);
	padding: 12px 24px;
	font-size: 13.5px;
	text-decoration: none;
	transition: border-color .2s, color .2s;
}
.sarms-btn-outline:hover { border-color: var(--blue); color: #fff; }
.sarms-hero-stats {
	display: flex;
	gap: 28px;
	padding-top: 24px;
	border-top: 1px solid #1d3354;
	flex-wrap: wrap;
}
.sarms-hstat-num { font-size: 22px; font-weight: 500; color: #fff; }
.sarms-hstat-label { font-size: 11.5px; color: #7eaecf; margin-top: 2px; }

/* Hero feature cards */
.sarms-hero-cards { display: flex; flex-direction: column; gap: 10px; }
.sarms-hcard {
	background: #1d3354;
	border: 1px solid #2d4f75;
	border-radius: var(--radius-md);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.sarms-hcard svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; }
.sarms-hcard-title { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 2px; }
.sarms-hcard-sub { font-size: 11px; color: #7eaecf; }

/* ── Lab reports banner ────────────────────────────────────── */
.sarms-lab-banner {
	background: var(--navy);
	padding: 44px 24px;
}
.sarms-lab-banner-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.sarms-lab-banner-eyebrow {
	font-size: 11px;
	font-weight: 600;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .6px;
	margin: 0 0 10px;
}
.sarms-lab-banner-title {
	font-size: 22px;
	font-weight: 500;
	color: #fff;
	margin: 0 0 8px;
}
.sarms-lab-banner-sub {
	font-size: 13px;
	color: #9ab8d4;
	line-height: 1.75;
	max-width: 520px;
	margin: 0;
}
.sarms-lab-stats {
	display: flex;
	gap: 32px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #1d3354;
}
.sarms-lab-stat-num { font-size: 20px; font-weight: 500; color: #fff; }
.sarms-lab-stat-label { font-size: 11px; color: #7eaecf; margin-top: 2px; }

/* ── Blog posts grid ───────────────────────────────────────── */
.sarms-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.sarms-post-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color .2s;
}
.sarms-post-card:hover { border-color: var(--blue); }
.sarms-post-img {
	display: block;
	height: 180px;
	background: var(--navy);
	position: relative;
	overflow: hidden;
	text-decoration: none;
}
.sarms-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sarms-post-img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.sarms-post-cat-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--blue);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.sarms-post-body { padding: 16px; }
.sarms-post-cat {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 0 0 6px;
}
.sarms-post-title { font-size: 14px; font-weight: 500; color: var(--navy); line-height: 1.4; margin: 0 0 8px; }
.sarms-post-title a { text-decoration: none; color: inherit; }
.sarms-post-title a:hover { color: var(--blue); }
.sarms-post-excerpt { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px; }
.sarms-post-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11.5px;
}
.sarms-post-date { color: var(--text-faint); }
.sarms-post-read-more { color: var(--blue); font-weight: 500; text-decoration: none; }
.sarms-post-read-more:hover { color: var(--navy); }

/* ── Why Sarms UK blocks ───────────────────────────────────── */
.sarms-why-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.sarms-why-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 24px;
}
.sarms-why-icon {
	width: 44px;
	height: 44px;
	background: var(--line-light);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.sarms-why-icon svg { width: 24px; height: 24px; color: var(--blue); }
.sarms-why-title { font-size: 14.5px; font-weight: 500; color: var(--navy); margin: 0 0 8px; }
.sarms-why-text { font-size: 13px; color: var(--text-muted); line-height: 1.75; margin: 0 0 12px; }
.sarms-why-link { font-size: 12.5px; color: var(--blue); font-weight: 500; text-decoration: none; }
.sarms-why-link:hover { color: var(--navy); }

/* ── Editorial / SEO content block ────────────────────────── */
.sarms-home-editorial { background: #fff; border-top: 1px solid var(--line); }
.sarms-editorial-body { max-width: 860px; }
.sarms-editorial-body h1,
.sarms-editorial-body h2,
.sarms-editorial-body h3 {
	color: var(--navy);
	font-weight: 600;
	line-height: 1.3;
	margin: 28px 0 10px;
}
.sarms-editorial-body h1 { font-size: 24px; }
.sarms-editorial-body h2 { font-size: 20px; }
.sarms-editorial-body h3 { font-size: 16px; }
.sarms-editorial-body p {
	font-size: 14px;
	color: var(--text-mid);
	line-height: 1.8;
	margin: 0 0 14px;
}
.sarms-editorial-body a { color: var(--blue); text-decoration: none; }
.sarms-editorial-body a:hover { text-decoration: underline; }
.sarms-editorial-body ul,
.sarms-editorial-body ol {
	margin: 0 0 14px 20px;
	padding: 0;
}
.sarms-editorial-body li {
	font-size: 14px;
	color: var(--text-mid);
	line-height: 1.8;
	margin-bottom: 4px;
}
.sarms-editorial-body strong { color: var(--navy); font-weight: 600; }

/* ── Homepage responsive ───────────────────────────────────── */
@media (max-width: 900px) {
	.sarms-hero-inner { grid-template-columns: 1fr; }
	.sarms-hero-cards { flex-direction: row; flex-wrap: wrap; }
	.sarms-hcard { flex: 1; min-width: 200px; }
	.sarms-lab-banner-inner { flex-direction: column; align-items: flex-start; }
	.sarms-posts-grid { grid-template-columns: repeat(2, 1fr); }
	.sarms-why-grid { grid-template-columns: 1fr; }
	.sarms-editorial-grid { grid-template-columns: 1fr !important; }
	.sarms-editorial-aside { display: none; }
}
@media (max-width: 640px) {
	/* Homepage product grid → 1 column */
	.sarms-home ul.products,
	.sarms-home .sarms-home-products ul.products {
		grid-template-columns: 1fr !important;
	}
	.sarms-hero { padding: 32px 16px; }
	.sarms-hero-h1 { font-size: 26px !important; }
	.sarms-home-section { padding: 20px 0; }
	.sarms-home-section-inner { padding: 0 16px; }
	.sarms-posts-grid { grid-template-columns: 1fr; }
	.sarms-hero-cards { display: none; }
}

/* ── Product page mobile ───────────────────────────────────── */
@media (max-width: 900px) {
	/* Product card: stack to single column, gallery above summary */
	.single-product div.product {
		grid-template-columns: 1fr !important;
		border-radius: 0 !important;
		border-left: none !important;
		border-right: none !important;
		margin: 0 !important;
	}
	/* Reset explicit column/row positions so single-column stacks top→bottom */
	.single-product div.product > .woocommerce-product-gallery {
		grid-column: 1 !important;
		grid-row: 1 !important;
		border-right: none !important;
		border-bottom: 1px solid var(--line) !important;
		border-radius: 0 !important;
		padding: 16px !important;
	}
	.single-product div.product > .summary.entry-summary {
		grid-column: 1 !important;
		grid-row: 2 !important;
		padding: 16px !important;
	}
	/* Tabs: scrollable, full-width panel */
	.woocommerce-tabs ul.tabs {
		overflow-x: auto !important;
		flex-wrap: nowrap !important;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce-tabs ul.tabs li {
		flex: 0 0 auto !important;
		min-width: 100px;
	}
	.woocommerce-tabs .panel { padding: 16px !important; }
	/* Scorecard: single column */
	.sarms-sc-cols { grid-template-columns: 1fr !important; gap: 16px !important; }
	/* Stacks: single column */
	.sarms-stacks-grid { grid-template-columns: 1fr !important; }
	/* Related products: single column */
	.single-product .related.products ul.products {
		grid-template-columns: 1fr !important;
	}
	.single-product .related.products,
	.single-product .sarms-stacks-section {
		border-radius: 0 !important;
		border-left: none !important;
		border-right: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Spec table: full width */
	.sarms-product-specs { font-size: 13px; }
	.sarms-spec-row { padding: 8px 0; }
	.sarms-spec-val { font-size: 12.5px; }
	/* Stack card header: allow wrapping */
	.sarms-stack-name { white-space: normal !important; }
}
/* ── Footer logo / widget fixes ──────────────────────────────
   Removes the white box background from the logo widget in
   Storefront's footer widget area.                            */
#colophon .widget,
#colophon .widget_media_image,
#colophon .widget_custom_html {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}
#colophon .custom-logo-link img,
#colophon .widget img,
#colophon .widget_media_image img {
	max-width: 180px !important;
	height: auto !important;
	background: transparent !important;
}
/* Make footer widget area text light on the navy background */
#colophon,
#colophon .widget,
#colophon a { color: #9ab8d4; }
#colophon a:hover { color: #fff; }
#colophon .widget-title {
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
}

@media (max-width: 600px) {
	.sarms-hero-h1 { font-size: 24px; }
	.sarms-hero-stats { gap: 16px; }
	.sarms-posts-grid { grid-template-columns: 1fr; }
	.sarms-home-sect-hdr { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Cart & Checkout — mobile ────────────────────────────────────────────── */

/* Reduce site-main padding on small screens */
@media (max-width: 640px) {
	.woocommerce-page .site-main,
	.woocommerce-cart .site-main,
	.woocommerce-checkout .site-main {
		padding: 16px !important;
	}
}

/* ── Checkout form ── */

/* Half-width fields (first name / last name etc) → full width on mobile */
@media (max-width: 640px) {
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last,
	.woocommerce-checkout .form-row {
		width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		clear: both;
	}

	/* Billing/shipping columns: stack */
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 {
		width: 100% !important;
		float: none !important;
		padding-right: 0 !important;
	}

	/* All inputs/selects: constrained, never overflow */
	.woocommerce-checkout input[type="text"],
	.woocommerce-checkout input[type="email"],
	.woocommerce-checkout input[type="tel"],
	.woocommerce-checkout input[type="number"],
	.woocommerce-checkout input[type="password"],
	.woocommerce-checkout select,
	.woocommerce-checkout textarea,
	.woocommerce-checkout .select2-container {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Payment method section */
	.woocommerce-checkout #payment {
		padding: 16px !important;
	}
	.woocommerce-checkout #payment .payment_box {
		padding: 12px !important;
	}

	/* Place order button: full width */
	.woocommerce-checkout #place_order {
		width: 100% !important;
		box-sizing: border-box !important;
		font-size: 15px !important;
		padding: 14px !important;
	}
}

/* ── Cart table ── */
@media (max-width: 640px) {
	/* Wrap table to allow horizontal scroll rather than breaking layout */
	.woocommerce-cart-form {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce-cart-form table.shop_table {
		min-width: 420px;
	}

	/* Coupon row: input + button side by side */
	.coupon {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	.coupon input[name="coupon_code"] {
		flex: 1 1 140px;
		width: auto !important;
		box-sizing: border-box !important;
	}

	/* Cart totals: full width below cart table */
	.cart-collaterals .cart_totals,
	.cart-collaterals .cross-sells {
		width: 100% !important;
		float: none !important;
	}

	/* Proceed to checkout button: full width */
	.wc-proceed-to-checkout a.checkout-button {
		width: 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
		padding: 14px !important;
		font-size: 15px !important;
	}
}