/* === Solas Science: subtle blue glossy palette (site-wide) === */

/* Page background — applied to every page */
html, body {
    background-color: #EEF4FB !important;
    background-image: linear-gradient(180deg, #F4F8FD 0%, #E3ECF6 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Make every Elementor top section transparent EXCEPT:
   - the dark blue footer bands (.elementor-element-68ea360 / .e090f52)
   - the sticky header (.elementor-element-41ba11e) — keep its original white */
section.elementor-section.elementor-top-section:not(.elementor-element-68ea360):not(.elementor-element-e090f52):not(.elementor-element-41ba11e) {
    background-color: transparent !important;
}

/* Restore the header to solid white so it matches the logo image and stays opaque on scroll */
.elementor-element-41ba11e,
.elementor-element-41ba11e.elementor-sticky,
.elementor-element-41ba11e.elementor-sticky--active,
.elementor-element-41ba11e.elementor-sticky--effects {
    background-color: #FFFFFF !important;
    background-image: none !important;
}

/* Make populated widget wraps transparent by default (these were the white inner panels) */
.elementor-widget-wrap.elementor-element-populated {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Home page "Verified Research-Grade Peptides" cards — keep the blue glossy look */
.elementor-element-bec0a4d > .elementor-widget-wrap,
.elementor-element-8988b99 > .elementor-widget-wrap {
    background-color: #EEF4FB !important;
    background-image: linear-gradient(180deg, #F4F8FD 0%, #E3ECF6 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(30, 60, 110, 0.06) !important;
}

/* Product page panels — blue glossy */
body.single-product .woocommerce-product-gallery,
body.single-product .summary.entry-summary,
body.single-product details.solas-specs-panel,
body.single-product .solas-trust-strip,
body.single-product li.product.ast-article-single,
body .related.products li.product.ast-article-single {
    background-color: #EEF4FB !important;
    background-image: linear-gradient(180deg, #F4F8FD 0%, #E3ECF6 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(30, 60, 110, 0.06) !important;
    border-radius: 12px;
}


/* Hide the small "Unsure? BOOK A CALL" callout — the larger Book a Call below covers it */
.solas-consult-cta {
    display: none !important;
}


/* "Featured Research Compounds" product grid — make the wrapping box transparent so the blue shows behind the cards */
.elementor-element-478ab3f,
.elementor-widget-hfe-woo-product-grid {
    background-color: transparent !important;
    background-image: none !important;
}
.page-id-7647 .ast-above-header-wrap,
.page-id-7647 .ast-above-header,
.page-id-7647 .ast-header-notice-wrap,
.page-id-7647 .woocommerce-store-notice,
.page-id-7647 .announcement-bar,
.page-id-7647 .notification-bar,
.page-id-7647 .top-bar,
.page-id-7647 .header-notice,
.page-id-7647 .site-header,
.page-id-7647 .site-footer,
.page-id-7647 #masthead,
.page-id-7647 #colophon,
.page-id-7647 .ast-primary-header-bar,
.page-id-7647 .main-header-bar,
.page-id-7647 .free-shipping-bar,
.page-id-7647 .shipping-notice,
.page-id-7647 .woocommerce-info,
.page-id-7647 .top-notice,
.page-id-7647 .header-top-bar,
.page-id-7647 .above-header-section,
.page-id-7647 .elementor-location-header,
.page-id-7647 [class*="shipping"],
.page-id-7647 [class*="notice-bar"],
.page-id-7647 [class*="announcement"] {
  display: none !important;
}
.page-id-7647 .elementor-section,
.page-id-7647 .elementor-container,
.page-id-7647 .elementor-widget-html,
.page-id-7647 .op-interactive {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.solas-specs-panel, .woocommerce-tabs {
    display: block !important;
}

/* Prevent horizontal scroll on mobile — ticker/off-canvas cart/product-grid overflow fix */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}


/* ============================================================
   SOLAS REFERRAL DASHBOARD — PRODUCTION STYLESHEET
   Version 4.0 · final

   WHERE THIS GOES
   Appearance → Customize → Additional CSS
   Paste at the BOTTOM of whatever is already in that box.
   Do not delete existing content — it may be unrelated theme CSS.

   REQUIRES
   solas-referral-dashboard.php (v1.4) in wp-content/mu-plugins/
   That file adds the .solas-referral-page body class and the hero
   markup. Without it, sections 2 and 3 do nothing.

   SCOPING
   Every rule is scoped to .solas-referral-page, .solas-ref-hero, or
   #affwp-affiliate-dashboard. None of these exist anywhere else on
   the site, so nothing here can leak onto another page.

   SIZING APPROACH
   Sizes use clamp() and auto-fit grids rather than device
   breakpoints. Earlier versions used 782px and 1024px media queries
   and broke on tablet landscape, which is 1180–1366px. Fluid values
   have no gaps for a device to fall into. The only remaining media
   queries are for table stacking and reduced motion.
   ============================================================ */


/* ============================================================
   1. Variables
   ============================================================ */

.solas-ref-hero,
#affwp-affiliate-dashboard,
.solas-referral-page {
	--sref-deep:   #1c3f6e;
	--sref-mid:    #3a6ea5;
	--sref-ink:    #24313f;
	--sref-line:   rgba(28, 63, 110, 0.14);
	--sref-radius: 14px;
}


/* ============================================================
   2. Theme frame — remove Astra's white page panel
   ============================================================ */

.solas-referral-page .ast-article-single {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 clamp(1rem, 2vw, 0rem) !important;
}

.solas-referral-page .entry-header {
	margin: 0 !important;
	padding: 0 !important;
}

/* The h1 stays in the document for screen readers and search
   engines. The hero heading does the job visually. */
.solas-referral-page .entry-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}


/* ============================================================
   3. Hero

   grid-template-columns uses minmax(min(100%, 320px), 1fr).
   The min(100%, 320px) is what stops a column overflowing its
   container on narrow screens, and auto-fit stacks the columns
   automatically when two will not fit. No breakpoint needed.
   ============================================================ */

.solas-ref-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
	padding: clamp(1.75rem, 4vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
	margin: 0 0 2.5rem;
	border-radius: 20px;
	background:
		radial-gradient(120% 140% at 85% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%),
		linear-gradient(135deg, var(--sref-mid) 0%, var(--sref-deep) 100%);
	box-shadow:
		0 2px 4px rgba(28, 63, 110, .12),
		0 24px 48px -24px rgba(28, 63, 110, .5);
}

/* !important because Astra's heading colour otherwise wins. */
.solas-ref-hero .solas-ref-hero__heading {
	margin: 0 0 1.4rem;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #fff !important;
}

.solas-ref-hero .solas-ref-hero__intro {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(.98rem, 1.4vw, 1.05rem);
	line-height: 1.7;
	color: rgba(255,255,255,.87) !important;
}


/* ---------- Store credit balance ---------- */

.solas-ref-hero .solas-ref-balance {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-top: clamp(1.2rem, 2.5vw, 1.75rem);
	border-top: 1px solid rgba(255,255,255,.2);
}

.solas-ref-hero .solas-ref-balance__label {
	display: block;
	margin-bottom: .25rem;
	font-size: .85rem;
	color: rgba(255,255,255,.7);
}

.solas-ref-hero .solas-ref-balance__figure {
	display: block;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}


/* ---------- Code panel ---------- */

.solas-ref-hero .solas-ref-hero__code {
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
	min-width: 0;
	border-radius: var(--sref-radius);
	background: rgba(255,255,255,.13);
	border: 1px solid rgba(255,255,255,.22);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
	text-align: center;
}

/* Monospace here is functional, not decorative: customers read this
   aloud and retype it, so 0/O and 1/I must be distinguishable. */
.solas-ref-hero .solas-ref-code {
	display: block;
	margin: 0 0 1rem;
	padding: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp(1.35rem, 2.8vw, 2rem);
	font-weight: 700;
	letter-spacing: clamp(.06em, .5vw, .12em);
	color: #fff;
	background: none;
	word-break: break-all;
}

.solas-ref-hero .solas-ref-hero__note {
	margin: 1rem 0 0;
	font-size: .82rem;
	line-height: 1.5;
	color: rgba(255,255,255,.72);
}

.solas-ref-hero .solas-ref-hero__code--empty p {
	margin: 0;
	color: rgba(255,255,255,.85);
}


/* ============================================================
   4. Copy button — idle / copied / failed
   ============================================================ */

.solas-ref-hero .solas-ref-copy {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	padding: .8rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--sref-deep);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(28, 63, 110, .18);
	transition: background .15s ease, color .15s ease,
	            transform .15s ease, box-shadow .15s ease;
}

.solas-ref-hero .solas-ref-copy:hover {
	background: rgba(255,255,255,.9);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px -4px rgba(11, 30, 56, .45);
}

.solas-ref-hero .solas-ref-copy:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(28, 63, 110, .18);
}

.solas-ref-hero .solas-ref-copy:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.solas-ref-hero .solas-ref-copy__state {
	display: none;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	line-height: 1;
}

.solas-ref-hero .solas-ref-copy__state svg {
	width: 17px;
	height: 17px;
	flex: none;
}

.solas-ref-hero .solas-ref-copy .solas-ref-copy__state--idle { display: flex; }

.solas-ref-hero .solas-ref-copy.is-copied .solas-ref-copy__state--idle,
.solas-ref-hero .solas-ref-copy.is-failed .solas-ref-copy__state--idle { display: none; }

.solas-ref-hero .solas-ref-copy.is-copied .solas-ref-copy__state--done { display: flex; }

.solas-ref-hero .solas-ref-copy.is-failed .solas-ref-copy__state--fail {
	display: flex;
	font-size: .82rem;
	text-align: center;
}

.solas-ref-hero .solas-ref-copy.is-copied {
	background: #e8f6ed;
	color: #1a7f45;
}

.solas-ref-hero .solas-ref-copy.is-failed {
	background: #fff4e5;
	color: #8a5300;
}

/* Result announcement, for screen readers only. */
.solas-ref-hero .solas-ref-copy__announce {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}


/* ============================================================
   5. Tabs
   ============================================================ */

/* Hidden tabs, listed one per line so each is its own decision.
   Delete a line to bring that tab back.
   Coupons is hidden because the code lives in the hero. */
#affwp-affiliate-dashboard-tabs li:has(a[href*="tab=urls"]),
#affwp-affiliate-dashboard-tabs li:has(a[href*="tab=creatives"]),
#affwp-affiliate-dashboard-tabs li:has(a[href*="tab=graphs"]),
#affwp-affiliate-dashboard-tabs li:has(a[href*="tab=visits"]),
#affwp-affiliate-dashboard-tabs li:has(a[href*="tab=stats"]),
#affwp-affiliate-dashboard-tabs li:has(a[href*="tab=coupons"]) {
	display: none !important;
}

#affwp-affiliate-dashboard-tabs {
	display: flex !important;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none !important;
	margin: 0 0 2rem !important;
	padding: 0 !important;
	border: 0 !important;
}

#affwp-affiliate-dashboard-tabs li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 0 !important;
}

#affwp-affiliate-dashboard-tabs li a {
	display: block;
	padding: .55rem 1.15rem;
	border-radius: 999px;
	border: 1px solid var(--sref-line);
	background: transparent;
	color: var(--sref-ink) !important;
	font-size: .92rem;
	font-weight: 500;
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease,
	            transform .15s ease, box-shadow .15s ease;
}

#affwp-affiliate-dashboard-tabs li a:hover {
	background: rgba(28,63,110,.05);
	border-color: rgba(28,63,110,.3);
	transform: translateY(-2px);
	box-shadow: 0 5px 12px -4px rgba(28, 63, 110, .3);
}

#affwp-affiliate-dashboard-tabs li a:active {
	transform: translateY(0);
	box-shadow: none;
}

#affwp-affiliate-dashboard-tabs li.active a {
	background: var(--sref-deep);
	border-color: var(--sref-deep);
	color: #fff !important;
}

#affwp-affiliate-dashboard-tabs li.active a:hover {
	box-shadow: 0 5px 14px -4px rgba(28, 63, 110, .55);
}


/* ============================================================
   6. Dashboard content
   ============================================================ */

#affwp-affiliate-dashboard .affwp-tab-content > h4 {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--sref-ink);
}


/* ---------- Payout summary stats ----------
   Explicit repeat(2, minmax(0, 1fr)) rather than auto-fit.
   auto-fit collapsed to a sliver on real mobile Safari, because
   Astra gives the container an indeterminate width and auto-fit
   resolves against it. An explicit column count cannot collapse
   that way. minmax(0, ...) is what permits shrinking below the
   content's intrinsic width. */

.solas-referral-page .affwp-payout-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	width: 100%;
	margin-bottom: 1.75rem;
}

.solas-referral-page .affwp-payout-summary__stat {
	min-width: 0;
	box-sizing: border-box;
	padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.2rem, 2vw, 1.6rem);
	background: #fff;
	border: 1px solid var(--sref-line);
	border-radius: var(--sref-radius);
}

.solas-referral-page .affwp-payout-summary__label {
	display: block;
	margin-bottom: .3rem;
	font-size: .85rem;
	color: rgba(36, 49, 63, .62);
	white-space: normal;
	word-break: normal;
}

.solas-referral-page .affwp-payout-summary__value {
	display: block;
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--sref-deep);
	white-space: normal;
	word-break: normal;
}

/* One stat per row only when two genuinely will not fit. */
@media (max-width: 560px) {
	.solas-referral-page .affwp-payout-summary {
		grid-template-columns: 1fr;
	}
}


/* ---------- Cards ---------- */

#affwp-affiliate-dashboard .affwp-card {
	margin-bottom: 1.5rem;
	background: #fff;
	border: 1px solid var(--sref-line);
	border-radius: var(--sref-radius);
	overflow: hidden;
	box-shadow: none;
}

#affwp-affiliate-dashboard .affwp-card__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.4rem 1.6rem;
	border-bottom: 1px solid var(--sref-line);
}

#affwp-affiliate-dashboard .affwp-card__header h3 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--sref-ink);
}

#affwp-affiliate-dashboard .affwp-card__header p {
	margin: .3rem 0 0;
	font-size: .9rem;
	color: rgba(36,49,63,.68);
}

#affwp-affiliate-dashboard .affwp-card__content { padding: 1.6rem; }

#affwp-affiliate-dashboard .affwp-card__footer {
	padding: 1.2rem 1.6rem;
	border-top: 1px solid var(--sref-line);
}

#affwp-affiliate-dashboard .affwp-card__tooltip svg {
	width: 18px;
	height: 18px;
	color: rgba(36,49,63,.45);
}


/* ---------- Tables ---------- */

#affwp-affiliate-dashboard table {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--sref-line);
	border-radius: var(--sref-radius);
	overflow: hidden;
	background: #fff;
}

#affwp-affiliate-dashboard table th {
	padding: .9rem 1.1rem;
	text-align: left;
	font-size: .82rem;
	font-weight: 600;
	color: rgba(36,49,63,.66);
	background: rgba(28,63,110,.04);
	border-bottom: 1px solid var(--sref-line);
}

#affwp-affiliate-dashboard table td {
	padding: 1rem 1.1rem;
	border-bottom: 1px solid var(--sref-line);
	font-size: .95rem;
	color: var(--sref-ink);
}

#affwp-affiliate-dashboard table tr:last-child td { border-bottom: 0; }

/* PRIVACY: hides the product description column in the Referrals
   table. It would otherwise show a referrer exactly which product
   their contact bought — reasonable in an affiliate program where
   the buyer knowingly clicked a partner link, not reasonable in a
   referral program where they just used a friend's code. */
#affwp-affiliate-dashboard:has(#affwp-affiliate-dashboard-tabs li.active a[href*="tab=referrals"]) table th:nth-child(3),
#affwp-affiliate-dashboard:has(#affwp-affiliate-dashboard-tabs li.active a[href*="tab=referrals"]) table td:nth-child(3) {
	display: none;
}


/* ---------- Status badges ---------- */

.solas-referral-page .affwp-badge {
	display: inline-block;
	padding: .25rem .7rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
}

.solas-referral-page .affwp-badge--success {
	background: #e8f6ed;
	color: #1a7f45;
}


/* ---------- Buttons and inputs ---------- */

#affwp-affiliate-dashboard .button,
#affwp-affiliate-dashboard input[type="submit"] {
	padding: .7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--sref-deep);
	color: #fff;
	font-weight: 600;
	font-size: .92rem;
	cursor: pointer;
}

#affwp-affiliate-dashboard .button:hover,
#affwp-affiliate-dashboard input[type="submit"]:hover {
	background: var(--sref-mid);
}

#affwp-affiliate-dashboard input[type="text"],
#affwp-affiliate-dashboard input[type="url"],
#affwp-affiliate-dashboard input[type="email"] {
	width: 100%;
	padding: .75rem .95rem;
	border: 1px solid var(--sref-line);
	border-radius: 10px;
	font-size: .95rem;
	color: var(--sref-ink);
	background: #fff;
}

#affwp-affiliate-dashboard label {
	display: block;
	margin-bottom: .4rem;
	font-size: .88rem;
	font-weight: 500;
	color: var(--sref-ink);
}


/* ============================================================
   7. Table stacking on narrow screens

   Below 782px a four-column table is unreadable. Each row becomes
   a card with the column name on the left and the value on the
   right, using the data-th attributes already in AffiliateWP's
   markup. This is a genuine layout change rather than a size
   tweak, which is why it is still a media query.
   ============================================================ */

@media (max-width: 782px) {

	#affwp-affiliate-dashboard table,
	#affwp-affiliate-dashboard table tbody,
	#affwp-affiliate-dashboard table tr,
	#affwp-affiliate-dashboard table td {
		display: block;
		width: 100%;
	}

	/* Header row moves into each cell via data-th, but stays in the
	   document for screen readers. */
	#affwp-affiliate-dashboard table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	#affwp-affiliate-dashboard table {
		border: 0;
		background: none;
		margin-bottom: 1rem;
	}

	#affwp-affiliate-dashboard table tr {
		margin-bottom: .85rem;
		padding: .35rem 0;
		background: #fff;
		border: 1px solid var(--sref-line);
		border-radius: var(--sref-radius);
		overflow: hidden;
	}

	#affwp-affiliate-dashboard table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		padding: .7rem 1.1rem;
		border-bottom: 1px solid rgba(28, 63, 110, .08);
		text-align: right;
		font-size: .92rem;
	}

	#affwp-affiliate-dashboard table td:last-child { border-bottom: 0; }

	#affwp-affiliate-dashboard table td::before {
		content: attr(data-th);
		flex: none;
		font-size: .8rem;
		font-weight: 600;
		color: rgba(36, 49, 63, .6);
		text-align: left;
	}

	/* Empty-state rows carry no data-th. */
	#affwp-affiliate-dashboard table td:not([data-th]) {
		justify-content: center;
		text-align: center;
		color: rgba(36, 49, 63, .7);
	}

	/* Re-apply the privacy rule — display:block above would
	   otherwise undo the hidden description column. */
	#affwp-affiliate-dashboard:has(#affwp-affiliate-dashboard-tabs li.active a[href*="tab=referrals"]) table td:nth-child(3) {
		display: none !important;
	}
}


/* ============================================================
   8. Motion

   One entrance, played once per browser session. The
   .solas-ref-animate class is added by the mu-plugin's inline
   script only on a visitor's first view, so moving between tabs
   does not replay it. Everything else responds to an action.
   ============================================================ */

@keyframes solas-ref-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.solas-ref-animate .solas-ref-hero {
	animation: solas-ref-rise .55s cubic-bezier(.22, .8, .3, 1) both;
}

.solas-ref-animate .solas-ref-hero .solas-ref-hero__code {
	animation: solas-ref-rise .55s cubic-bezier(.22, .8, .3, 1) .12s both;
}

@media (prefers-reduced-motion: reduce) {

	.solas-ref-animate .solas-ref-hero,
	.solas-ref-animate .solas-ref-hero .solas-ref-hero__code {
		animation: none !important;
	}

	/* Colour feedback is kept — it carries meaning on the copy
	   button. Only movement is removed. */
	.solas-ref-hero .solas-ref-copy,
	#affwp-affiliate-dashboard-tabs li a {
		transition: background .15s ease, color .15s ease,
		            border-color .15s ease !important;
		transform: none !important;
	}
}