/*
Theme Name: Medrue
Theme URI: https://medrue.local/
Author: Medrue
Author URI: https://medrue.local/
Description: A clean, clinical full-site-editing block theme for research-grade product stores. WooCommerce-ready, with a clinical/lab aesthetic — hero value props, feature blocks, product showcase, process steps, FAQ and a compliance-focused footer.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medrue
Tags: full-site-editing, block-patterns, e-commerce, clean, custom-colors, custom-menu, editor-style, featured-images, threaded-comments, translation-ready
*/

/* Block themes are styled primarily through theme.json. The rules below are
   small enhancements that are awkward to express in theme.json. */

/* ---- Signature pill button ----
   At rest: a circular arrow on the left. On hover: the fill turns white, the
   label turns blue, and a diagonal arrow slides in on the right. */
.wp-block-button__link { white-space: nowrap; }

.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0;
	position: relative;
	transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
/* Rest state: circular right-arrow on the left */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.55em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 0.85em no-repeat;
	transition: opacity 0.22s ease, width 0.22s ease, margin 0.22s ease, transform 0.22s ease;
}
/* Hover state: diagonal arrow on the right (collapsed until hover) */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 1em;
	opacity: 0;
	margin-left: 0;
	transform: translateX(-6px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6fe5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity 0.22s ease, width 0.22s ease, margin 0.22s ease, transform 0.22s ease;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
	background-color: #fff !important;
	color: var(--wp--preset--color--accent) !important;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--accent), 0 8px 18px -10px rgba(29, 111, 229, 0.6);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::before,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible::before {
	opacity: 0;
	width: 0;
	margin-right: 0;
	transform: translateX(-6px);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::after,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible::after {
	opacity: 1;
	width: 1em;
	margin-left: 0.45em;
	transform: translateX(2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link::before { content: none; }

/* Two-tone heading helper — second phrase rendered in the brand blue */
.medrue-accent-text { color: var(--wp--preset--color--accent); }

/* ---- Hero: soft white fade at the bottom so it blends into the page ---- */
.medrue-hero { position: relative; }
.medrue-hero > .wp-block-cover__background { z-index: 1; }
.medrue-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 28%;
	background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
	z-index: 2;
	pointer-events: none;
}
.medrue-hero > .wp-block-cover__inner-container { position: relative; z-index: 3; }
.medrue-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); }

/* ---- Feature cards (text + image side by side) ----
   Fixed-height cards so images can be oversized and bleed past the card edge
   (clipped by overflow) exactly like the design. The image is positioned
   absolutely so it never stretches the card. */
.medrue-feature-card {
	position: relative;
	height: 210px;
	min-height: 210px;
	overflow: hidden;
	display: flex;
	align-items: stretch;
}
/* Text/button column fills the card height so the button always sits at the
   bottom — aligning all three cards' buttons on the same line. */
.medrue-feature-card > .wp-block-group {
	max-width: 56%;
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.medrue-feature-card > .wp-block-group > .wp-block-buttons {
	margin-top: auto;
}
.medrue-feature-img {
	position: absolute;
	margin: 0 !important;
	z-index: 1;
}
.medrue-feature-img img { width: 100%; height: auto; display: block; }

/* Compact feature-card button — smaller pill, kept on one line */
.medrue-feature-card .wp-block-button__link {
	font-size: 0.8rem;
	padding: 0.5rem 1.1rem;
	white-space: nowrap;
}

/* Cards 1 & 3 (vial, phone): tall product shots — large, top-aligned, bottom
   bleeds off the card edge so only the upper portion shows, as in the design. */
.wp-block-columns:has(.medrue-feature-card) > .wp-block-column:nth-child(1) .medrue-feature-img,
.wp-block-columns:has(.medrue-feature-card) > .wp-block-column:nth-child(3) .medrue-feature-img {
	width: 39%;
	max-width: 165px;
	right: 0.4rem;
	top: 9px;
}
/* Card 2 (molecule): landscape — fully visible, vertically centred, a touch larger */
.wp-block-columns:has(.medrue-feature-card) > .wp-block-column:nth-child(2) .medrue-feature-img {
	width: 45%;
	max-width: 215px;
	right: -0.5rem;
	top: 50%;
	transform: translateY(-46%);
}

/* ---- Explore our products: auto-scrolling slider (shows ~3⅓ cards) ----
   display:flex / gap are set here directly so the row works even though the
   slider is rendered by a dynamic block (its layout-support CSS may load late). */
.medrue-hscroll {
	display: flex;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	overflow-x: auto;
	flex-wrap: nowrap !important;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.medrue-hscroll::-webkit-scrollbar { display: none; }

/* Shared card base (used by the shop grid too) */
.medrue-prod-card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	box-sizing: border-box;
	background: linear-gradient(180deg, #fbfcfe 0%, #e9eef4 100%);
}

/* Slider cards: fixed size + dotted-grid background, matching the design
   (325 × 403, 17px top padding). */
.medrue-hscroll .medrue-prod-card {
	flex: 0 0 325px;
	width: 325px;
	height: 403px;
	min-height: 403px;
	padding: 17px 0 0 0;
	background-color: #ffffff;
	background-image:
		linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.92) 22%, rgba(255,255,255,0.35) 52%, rgba(255,255,255,0) 78%),
		radial-gradient(circle, #cfd6df 1.1px, transparent 1.6px);
	background-size: 100% 100%, 18px 18px;
	background-position: center top, center top;
}
/* Narrow screens: show ~1⅓ cards instead of cramming 3 in. */
@media (max-width: 781px) {
	.medrue-hscroll .medrue-prod-card { flex: 0 0 78vw; width: 78vw; }
}

/* Shared vial default (shop grid): centred at the bottom */
.medrue-prod-vial {
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	width: 40%;
	margin: 0;
}
/* Slider vial: large, centred, anchored below the button, bottom bleeds off the
   card edge so only the upper portion shows — matching the design. */
.medrue-hscroll .medrue-prod-vial {
	top: 150px;
	bottom: auto;
	width: 88%;
	max-width: 285px;
	z-index: 1;
}
/* Greyish overlay rising from the bottom, fading out above the card's midpoint.
   Sits above the dotted background but below the vial (z-index 1) and text. */
.medrue-hscroll .medrue-prod-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(120, 132, 148, 0.32) 0%, rgba(120, 132, 148, 0.16) 45%, rgba(120, 132, 148, 0) 100%);
}
.medrue-prod-vial img { width: 100%; height: auto; display: block; }

/* Product-card button: compact auto-width pill, centered, right chevron */
.medrue-prod-card .wp-block-button__link {
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}

/* ---- Generic light-gray content panel ---- */
.medrue-panel { box-sizing: border-box; }

/* ---- "Our Process" panel (the panel that contains photo Cover cards) ---- */
/* Header row: heading on the left, button on the right (matches the design). */
.medrue-panel:has(.wp-block-cover) > .wp-block-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
/* Photo cards: larger rounded corners + image visible at the top, with a dark
   gradient only at the bottom behind the caption (instead of a flat grey tint). */
.medrue-panel .wp-block-cover {
	border-radius: 18px !important;
	min-height: 250px;
	overflow: hidden;
}
.medrue-panel .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(
		to top,
		rgba(16, 24, 36, 0.88) 0%,
		rgba(16, 24, 36, 0.55) 30%,
		rgba(16, 24, 36, 0.12) 62%,
		rgba(16, 24, 36, 0) 100%
	) !important;
}
/* STEP label (first line in each process card) */
.medrue-panel .wp-block-cover__inner-container > p:first-child {
	color: #ffffff !important;
	margin-bottom: 0.3rem !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
}

/* ---- FAQ panel header: heading + subtitle on the left, button top-right ---- */
.medrue-panel:has(.wp-block-details) > .wp-block-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.medrue-panel:has(.wp-block-details) > .wp-block-group .wp-block-heading {
	font-size: 1.85rem;
}

/* =========================================================================
   Age-verification gate (21+)
   ========================================================================= */
html.medrue-age-lock,
html.medrue-age-lock body { overflow: hidden !important; }

.medrue-agegate {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(15, 26, 39, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
/* Returning (confirmed) visitors: hidden instantly, no flash. */
html.medrue-age-ok .medrue-agegate { display: none !important; }

.medrue-agegate__box {
	background: #fff;
	border-radius: 20px;
	max-width: 460px;
	width: 100%;
	padding: 2.5rem 2rem;
	text-align: center;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
}
.medrue-agegate__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	margin-bottom: 1rem;
	background: var(--wp--preset--color--accent, #1d6fe5);
	color: #fff;
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: 0.02em;
}
.medrue-agegate__box h2 {
	margin: 0 0 0.6rem;
	font-size: 1.5rem;
	color: var(--wp--preset--color--primary, #1b2533);
}
.medrue-agegate__box > p {
	margin: 0 0 1.4rem;
	color: var(--wp--preset--color--muted, #6b7682);
	font-size: 0.95rem;
	line-height: 1.6;
}
.medrue-agegate__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 1.1rem;
}
.medrue-agegate__yes,
.medrue-agegate__no {
	border-radius: 999px;
	padding: 0.85rem 1.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}
.medrue-agegate__yes {
	background: var(--wp--preset--color--accent, #1d6fe5);
	color: #fff;
	border: 0;
}
.medrue-agegate__yes:hover { background: var(--wp--preset--color--accent-700, #1657bd); }
.medrue-agegate__no {
	background: transparent;
	color: var(--wp--preset--color--muted, #6b7682);
	border: 1px solid var(--wp--preset--color--border, #e4e9f0);
}
.medrue-agegate__no:hover { color: var(--wp--preset--color--primary, #1b2533); }
.medrue-agegate__fine {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #6b7682);
}
.medrue-agegate__fine a { color: var(--wp--preset--color--accent-700, #1657bd); }

/* ---- FAQ accordion items: chevron marker that rotates ---- */
.medrue-faq-item { list-style: none; }
.medrue-faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--wp--preset--color--primary);
}

/* Footer logo: no stray underline/border, slightly larger */
footer .wp-block-image,
footer .wp-block-image figure { margin: 0; border: 0; }
footer .wp-block-image img { border: 0; box-shadow: none; }
.medrue-foot-logo { margin-bottom: 2.5rem; }
.medrue-foot-logo img { border: 0; box-shadow: none; }
.medrue-faq-item summary::-webkit-details-marker { display: none; }
.medrue-faq-item summary::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	margin-left: 1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7682' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform 0.2s ease;
}
.medrue-faq-item[open] summary::after { transform: rotate(180deg); }

@media (max-width: 781px) {
	/* Stacked layout: give cards room and let the image sit inline again */
	.medrue-feature-card { height: 230px !important; min-height: 230px !important; }
	.medrue-feature-card > .wp-block-group { max-width: 62%; }
}

.medrue-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

/* Subtle card lift on the product / feature grids */
.medrue-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.medrue-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(15, 61, 76, 0.45);
	border-color: var(--wp--preset--color--accent);
}

/* Pill / badge used for CAS numbers and "Research Use Only" tags */
.medrue-badge {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* Sticky, slightly translucent header */
.medrue-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(8px);
	background: rgba(255, 255, 255, 0.92);
}

.medrue-logo img {
	display: block;
	height: auto;
}

/* Kill any stray border / underline / box-shadow around the logo in the
   header and footer (figure, the wrapping link, and the image itself). */
.medrue-header .wp-block-image,
.medrue-header .wp-block-image figure,
.medrue-header .wp-block-image a,
.medrue-header .wp-block-image img,
footer .wp-block-image,
footer .wp-block-image figure,
footer .wp-block-image a,
footer .wp-block-image img {
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	background: none !important;
	margin-top: 0;
	margin-bottom: 0;
}

/* Footer legal nav: thin separator between Privacy Policy | Terms of Service */
.medrue-footnav .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
	border-left: 1px solid var(--wp--preset--color--border);
	padding-left: 1.25rem;
}

/* Active nav item rendered in the brand blue, like the reference */
.medrue-header .wp-block-navigation .current-menu-item > a,
.medrue-header .wp-block-navigation .current_page_item > a,
.medrue-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* =========================================================================
   Mobile navigation — collapse to a hamburger + left slide-in drawer
   ========================================================================= */
@media (max-width: 781px) {
	/* Tighter header gutters on phones/tablets. backdrop-filter is removed here
	   because it creates a containing block that would trap the fixed drawer
	   inside the header — without it the drawer spans the full viewport height. */
	.medrue-header {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	/* Force the collapsed (hamburger) state up to tablet width: hide the inline
	   menu, always show the open (hamburger) button. */
	.medrue-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.medrue-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
		color: var(--wp--preset--color--primary);
	}

	/* The opened menu becomes a left-hand drawer with a dimmed backdrop. */
	.medrue-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: 290px;
		max-width: 84vw;
		padding: 1.5rem 1.5rem 2rem !important;
		background: #fff !important;
		color: var(--wp--preset--color--primary) !important;
		box-shadow: 0 0 0 100vmax rgba(15, 26, 39, 0.55), 10px 0 40px -10px rgba(0, 0, 0, 0.35);
		animation: medrue-drawer-in 0.25s ease both;
		align-items: flex-start;
		justify-content: flex-start;
		overflow-y: auto;
	}
	.medrue-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		display: block;
	}
	/* Stack the items, full width, with dividers */
	.medrue-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		width: 100%;
	}
	.medrue-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}
	.medrue-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		display: block;
		width: 100%;
		padding: 0.95rem 0.25rem;
		font-size: 1.05rem;
		font-weight: 600;
		color: var(--wp--preset--color--primary);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.medrue-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
		color: var(--wp--preset--color--accent);
	}
	/* Close (×) button top-right of the drawer */
	.medrue-header .wp-block-navigation__responsive-container-close {
		top: 1.25rem;
		right: 1.25rem;
		left: auto;
		color: var(--wp--preset--color--primary);
	}
}
@keyframes medrue-drawer-in {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

/* Logo + social links injected into the mobile drawer — hidden in the desktop
   inline nav, shown only inside the open drawer. */
.medrue-header .medrue-drawer-logo,
.medrue-header .medrue-drawer-social { display: none; }

@media (max-width: 781px) {
	.medrue-header .wp-block-navigation__responsive-container.is-menu-open .medrue-drawer-logo {
		display: block;
		margin: 0 0 1.75rem;
	}
	.medrue-drawer-logo img { max-width: 150px; height: auto; display: block; }
	.medrue-header .wp-block-navigation__responsive-container.is-menu-open .medrue-drawer-social {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		margin-top: 1.75rem;
	}
}

/* Social icon buttons (shared by the drawer and the footer) */
.medrue-drawer-social a,
.medrue-foot-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.medrue-drawer-social a:hover,
.medrue-foot-social a:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

/* Footer social row */
.medrue-foot-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

/* Language selector: globe glyph before, caret after */
/* Language switcher dropdown */
.medrue-lang { position: relative; display: inline-flex; }
.medrue-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: 0;
	padding: 0.25rem 0.1rem;
	margin: 0;
	font: inherit;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #6b7682);
	cursor: pointer;
}
.medrue-lang__toggle:hover { color: var(--wp--preset--color--primary, #1b2533); }
.medrue-lang__chev { transition: transform 0.18s ease; }
.medrue-lang.is-open .medrue-lang__chev { transform: rotate(180deg); }
.medrue-lang__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 150px;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #e4e9f0);
	border-radius: 12px;
	box-shadow: 0 16px 40px -18px rgba(15, 30, 50, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	z-index: 300;
}
.medrue-lang.is-open .medrue-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.medrue-lang__item { margin: 0; }
.medrue-lang__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0.7rem;
	border-radius: 8px;
	font-size: 0.88rem;
	color: var(--wp--preset--color--primary, #1b2533);
	text-decoration: none;
}
.medrue-lang__item a:hover { background: var(--wp--preset--color--surface, #f6f8fb); }
.medrue-lang__item.is-current a { color: var(--wp--preset--color--accent, #1d6fe5); font-weight: 600; }
.medrue-lang__item.is-current a::after { content: "\2713"; font-size: 0.85em; }
/* Static fallback (Polylang inactive) */
.medrue-lang--static { align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--wp--preset--color--muted, #6b7682); }

/* WooCommerce auto-injects its Mini-Cart and Customer-Account blocks into the
   header navigation. We use a custom cart drawer and no account icon, so hide
   both wherever they appear in the header. */
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart,
.wp-block-woocommerce-customer-account,
.wc-block-customer-account {
	display: none !important;
}

/* Remove the root block-gap between the sticky header and the page content so
   the hero sits flush under the header. Templates supply their own top padding. */
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* Header cart toggle button + count badge */
.medrue-cart-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--primary);
}
.medrue-cart-toggle:hover { color: var(--wp--preset--color--accent); }
.medrue-cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/* =========================================================================
   Cart drawer (Shopping cart / Checkout overlay)
   ========================================================================= */
.medrue-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}
.medrue-cart-drawer.is-open { display: block; }
.medrue-cart-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 28, 40, 0.55);
}
.medrue-cart-panel {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: none;
	background: #fff;
	border-radius: 0 0 18px 18px;
	box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.6);
	padding: 2.5rem 1.5rem 3rem;
	animation: medrue-cart-in 0.25s ease;
}
@keyframes medrue-cart-in {
	from { transform: translateY(-24px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
.medrue-cart-x {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--muted);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}
.medrue-cart-x:hover { background: var(--wp--preset--color--border); }
.medrue-cart-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	max-width: 1040px;
	margin: 0 auto;
}
.medrue-cart-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1.25rem;
}

/* Left: line items */
.medrue-cart-item {
	display: grid;
	grid-template-columns: 56px 1fr auto auto;
	align-items: start;
	gap: 0.85rem;
	padding-bottom: 1.1rem;
}
.medrue-cart-thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
}
.medrue-cart-item-name { font-weight: 600; color: var(--wp--preset--color--primary); }
.medrue-cart-item-variation,
.medrue-cart-qty { font-size: 0.85rem; color: var(--wp--preset--color--muted); margin-top: 0.15rem; }
.medrue-cart-qty select {
	border: 0;
	background: none;
	font: inherit;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}
.medrue-cart-item-price { font-weight: 600; white-space: nowrap; }
.medrue-cart-remove {
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}
.medrue-cart-empty { color: var(--wp--preset--color--muted); padding: 0.5rem 0 1rem; }

/* Left: totals */
.medrue-cart-totals {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 1rem;
	margin-top: 0.5rem;
}
.medrue-cart-row {
	display: flex;
	justify-content: space-between;
	padding: 0.2rem 0;
	font-size: 0.95rem;
}
.medrue-cart-row--total {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--primary);
	margin-top: 0.3rem;
}

/* Left: coupon + continue */
.medrue-cart-coupon {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 1rem;
	padding-top: 1.1rem;
}
.medrue-cart-coupon h3 { font-size: 1rem; margin: 0 0 0.6rem; color: var(--wp--preset--color--primary); }
.medrue-cart-coupon-row { display: flex; align-items: center; gap: 0.5rem; }
.medrue-cart-coupon-row input {
	flex: 1;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0.55rem 0.7rem;
	font: inherit;
}
.medrue-cart-redeem {
	border: 0;
	background: none;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	cursor: pointer;
}
.medrue-cart-continue {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	font-size: 0.95rem;
}
.medrue-cart-continue a { color: var(--wp--preset--color--accent); }

/* Right: checkout */
.medrue-cart-lead { color: var(--wp--preset--color--primary); margin: 0 0 0.9rem; }
.medrue-cart-email {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0.7rem 0.85rem;
	font: inherit;
	margin-bottom: 0.9rem;
}
.medrue-cart-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.92rem;
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.1rem;
}
.medrue-cart-check input { accent-color: var(--wp--preset--color--accent); width: 17px; height: 17px; }
.medrue-cart-checkout-row { display: flex; align-items: center; gap: 1rem; }
.medrue-cart-checkout-btn {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 0.85rem 2.2rem;
	font-weight: 600;
	cursor: pointer;
}
.medrue-cart-checkout-btn:hover { background: var(--wp--preset--color--primary-700); }
.medrue-cart-tls { font-size: 0.78rem; color: var(--wp--preset--color--accent); max-width: 11rem; line-height: 1.4; }
.medrue-cart-next {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	font-size: 1.2rem;
	color: var(--wp--preset--color--primary);
}
.medrue-cart-step { margin-bottom: 0.9rem; }
.medrue-cart-step strong { display: block; color: var(--wp--preset--color--primary); font-weight: 600; }
.medrue-cart-step span { font-size: 0.9rem; color: var(--wp--preset--color--muted); }

@media (max-width: 781px) {
	.medrue-cart-grid { grid-template-columns: 1fr; gap: 2rem; }
	.medrue-cart-panel { padding: 2rem 1.25rem 2.5rem; border-radius: 0; min-height: 100%; }
	.medrue-cart-drawer { overflow-y: auto; }
}

/* Pill badge tweak so CAS / test badges read like the mockups */
.medrue-badge {
	line-height: 1.4;
}

/* =========================================================================
   COA directory rows
   ========================================================================= */
.medrue-coa-row {
	gap: 1rem;
}
.medrue-coa-row .wp-block-button__link {
	background: var(--wp--preset--color--accent, #1d6fe5);
}

/* =========================================================================
   Shop / Blog sidebars
   ========================================================================= */
.medrue-shop-sidebar .wc-block-product-categories-list,
.medrue-shop-sidebar ul,
.medrue-blog-sidebar .wp-block-latest-posts {
	list-style: none;
	margin: 0;
	padding: 0;
}
.medrue-shop-sidebar li,
.medrue-blog-sidebar li {
	margin: 0 0 0.55rem;
	line-height: 1.35;
}
.medrue-shop-sidebar a,
.medrue-blog-sidebar a {
	color: var(--wp--preset--color--muted, #6b7682);
	text-decoration: none;
	font-size: 0.9rem;
}
.medrue-shop-sidebar a:hover,
.medrue-blog-sidebar a:hover {
	color: var(--wp--preset--color--accent, #1d6fe5);
}

@media (max-width: 781px) {
	.medrue-shop-sidebar,
	.medrue-blog-sidebar {
		flex-basis: 100% !important;
	}
}

/* Most-recent article highlighted in the sidebar list */
.medrue-blog-sidebar .wp-block-latest-posts li:first-child a {
	color: var(--wp--preset--color--accent, #1d6fe5);
	font-weight: 600;
}

/* =========================================================================
   Blog post grid cards (home / posts index)
   ========================================================================= */
.medrue-blog-card {
	display: flex;
	flex-direction: column;
	text-align: center;
	border: 0;
}
.medrue-blog-card:hover {
	border-color: transparent;
}
.medrue-blog-card .wp-block-post-title {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.medrue-blog-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.medrue-blog-card .wp-block-post-date {
	color: var(--wp--preset--color--muted);
}
/* Illustration anchored to the bottom of the card, equal height across the row */
.medrue-blog-card .wp-block-post-featured-image {
	margin-top: auto;
	margin-bottom: 0;
}
.medrue-blog-card .wp-block-post-featured-image img {
	width: 100%;
	height: 190px;
	object-fit: contain;
	border-radius: 10px;
	background: var(--wp--preset--color--base);
}

@media (max-width: 1024px) {
	.medrue-blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
	.medrue-blog-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   Single blog post (article detail)
   ========================================================================= */
/* Category tags rendered as subtle centered pills */
.medrue-post-terms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.medrue-post-terms a {
	display: inline-block;
	padding: 0.28em 0.85em;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-2, #eef2f7);
	color: var(--wp--preset--color--muted, #6b7682);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 500;
}
.medrue-post-terms a:hover {
	background: var(--wp--preset--color--surface, #f6f8fb);
	color: var(--wp--preset--color--accent, #1d6fe5);
}
/* The term separator between tags is redundant with pills */
.medrue-post-terms .wp-block-post-terms__separator { display: none; }

/* Featured image card */
.medrue-post-hero { box-sizing: border-box; }
.medrue-post-hero .wp-block-post-featured-image { margin: 0; }
.medrue-post-hero .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

/* Next-post link, centered under the article */
.wp-block-post-navigation-link {
	font-weight: 600;
}
.wp-block-post-navigation-link a { text-decoration: none; }

/* =========================================================================
   Blog CTA — "Have questions? Text us" (dark) + "Made in the USA" (light)
   ========================================================================= */
.medrue-cta-dark {
	position: relative;
	overflow: hidden;
	height: 100%;
	box-sizing: border-box;
}
.medrue-cta-dark-text {
	position: relative;
	z-index: 1;
	max-width: 58%;
}
.medrue-cta-phone {
	position: absolute;
	right: 1.5rem;
	bottom: 0;
	width: 38%;
	max-width: 230px;
	margin: 0;
	z-index: 0;
}
.medrue-cta-phone img {
	width: 100%;
	height: auto;
	display: block;
}
.medrue-cta-usa { box-sizing: border-box; }
.medrue-cta-box { margin-top: auto; margin-bottom: 0; }
.medrue-cta-box img {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: block;
}

@media (max-width: 781px) {
	.medrue-cta-dark-text { max-width: 100%; }
	.medrue-cta-phone { position: static; width: 60%; margin: 1.5rem auto 0; }
}

/* =========================================================================
   Sticky product buy bar (single product)
   ========================================================================= */
.medrue-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	background: rgba(255, 255, 255, 0.97);
	border-top: 1px solid var(--wp--preset--color--border, #e4e9f0);
	box-shadow: 0 -10px 30px -20px rgba(15, 23, 42, 0.4);
	transform: translateY(100%);
	transition: transform 0.25s ease;
	backdrop-filter: saturate(140%) blur(8px);
}
.medrue-buybar.is-visible {
	transform: translateY(0);
}
.medrue-buybar__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.5rem;
}
.medrue-buybar__name {
	font-weight: 700;
	color: var(--wp--preset--color--primary, #1b2533);
	font-size: 1.05rem;
}
.medrue-buybar__cas {
	margin-left: 0.75rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted, #6b7682);
}
.medrue-buybar__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.medrue-buybar__price {
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--wp--preset--color--primary, #1b2533);
}
.medrue-buybar__btn {
	background: var(--wp--preset--color--accent, #1d6fe5);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 1.6rem;
	font-weight: 600;
	cursor: pointer;
}
.medrue-buybar__btn:hover {
	background: var(--wp--preset--color--accent-700, #1657bd);
}
@media (max-width: 600px) {
	.medrue-buybar__cas { display: none; }
	.medrue-buybar__inner { padding: 0.6rem 1rem; }
}

/* =========================================================================
   WooCommerce — styled to match the clinical / lab aesthetic
   ========================================================================= */

/* Constrain Woo content to the theme content width and add breathing room */
.woocommerce-page .wp-block-woocommerce-classic-template,
.woocommerce-page .woocommerce {
	margin-left: auto;
	margin-right: auto;
}

/* ---- Product loop (shop / category grids) ---- */
.woocommerce ul.products {
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
}

.woocommerce ul.products li.product {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #dbe4e8);
	border-radius: 16px;
	padding: 1.25rem;
	margin: 0 !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(15, 61, 76, 0.45);
	border-color: var(--wp--preset--color--accent, #12a594);
}

.woocommerce ul.products li.product img {
	border-radius: 10px;
	margin-bottom: 0.9rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #0f3d4c);
	padding: 0.25rem 0;
	letter-spacing: -0.01em;
}

.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--contrast, #13242b);
	font-weight: 600;
}

.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--muted, #5a6b72);
	opacity: 0.7;
}

.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
}

/* CAS line + Research Use Only badge (output via hooks) */
.medrue-cas {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted, #5a6b72);
	margin: 0.15rem 0 0.5rem;
	letter-spacing: 0.03em;
}

.medrue-badge--ruo {
	background: var(--wp--preset--color--surface-2, #e9eff2);
	color: var(--wp--preset--color--accent-700, #0d8678);
	margin-bottom: 0.6rem;
	align-self: flex-start;
}

/* ---- Buttons ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--accent, #12a594);
	color: #fff;
	border-radius: 10px;
	font-weight: 600;
	padding: 0.75rem 1.4rem;
	border: 0;
	transition: background 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--wp--preset--color--accent-700, #0d8678);
}

/* ---- Single product ---- */
.woocommerce div.product .product_title {
	color: var(--wp--preset--color--primary, #0f3d4c);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--contrast, #13242b);
	font-size: 1.6rem;
	font-weight: 700;
}

.woocommerce div.product .woocommerce-product-gallery {
	border-radius: 16px;
}

.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: 12px;
}

.woocommerce .woocommerce-tabs ul.tabs li {
	border-radius: 999px 999px 0 0;
}

.woocommerce .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--wp--preset--color--accent, #12a594);
}

/* Compliance notice block on single product */
.medrue-ruo-notice {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--surface, #f4f7f9);
	border: 1px solid var(--wp--preset--color--border, #dbe4e8);
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted, #5a6b72);
}

.medrue-ruo-notice strong {
	color: var(--wp--preset--color--primary, #0f3d4c);
}

/* ---- Notices / messages ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--accent, #12a594);
	border-radius: 10px;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--accent, #12a594);
}

/* =========================================================================
   Cart & Checkout block pages — themed to match the rest of the site
   ========================================================================= */

/* Section headings ("Contact information", "Billing address", …) */
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper > .wc-block-components-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
}
.wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--muted);
}

/* Form fields: rounded, bordered, generous padding, accent focus ring */
.wc-block-components-text-input input,
.wc-block-components-text-input .components-text-control__input,
.wc-block-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .components-form-token-field__input-container,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-textarea {
	border-radius: 12px !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	background: var(--wp--preset--color--base) !important;
	/* Extra top padding leaves room for the floating label so the value text
	   never overlaps it; less padding at the bottom keeps the field balanced. */
	padding-top: 1.6rem !important;
	padding-bottom: 0.45rem !important;
	min-height: 56px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Keep the floating label pinned near the top of the taller field */
.wc-block-components-text-input label,
.wc-block-components-select label {
	top: 0.5rem;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-select.is-active label {
	transform: translateY(-38%) scale(0.75);
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-block-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 0 0 3px rgba(29, 111, 229, 0.15) !important;
	outline: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-select label {
	color: var(--wp--preset--color--muted);
}

/* The order-summary sidebar as a clean surface card */
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
	background: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 18px !important;
	padding: 1.75rem !important;
}
.wc-block-checkout__sidebar { position: sticky; top: 96px; }

/* Collapsible rows (coupons), totals */
.wc-block-components-totals-item {
	color: var(--wp--preset--color--contrast);
}
.wc-block-components-totals-footer-item {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.wc-block-components-panel__button { color: var(--wp--preset--color--primary); }

/* Product thumbnails in the summary */
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img {
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

/* Primary actions — full-width on-brand pill (matches site buttons) */
.wc-block-components-button.contained,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--accent) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	min-height: 56px;
	padding: 0.9rem 1.75rem !important;
	box-shadow: 0 10px 24px -12px rgba(29, 111, 229, 0.6);
	transition: background 0.18s ease;
}
.wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--accent-700) !important;
}

/* Links (Terms, Privacy, "Add apartment…") on-brand */
.wp-block-woocommerce-checkout a,
.wp-block-woocommerce-cart a {
	color: var(--wp--preset--color--accent-700);
}

/* Page title spacing */
.woocommerce-checkout .wc-block-checkout,
.woocommerce-cart .wc-block-cart { margin-top: 0.5rem; }

@media (max-width: 900px) {
	.wc-block-checkout__sidebar { position: static; }
}

/* ---- Result count / ordering bar ---- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	color: var(--wp--preset--color--muted, #5a6b72);
	margin-bottom: 1.5rem;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
	border-radius: 8px;
	border-color: var(--wp--preset--color--border, #dbe4e8);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--wp--preset--color--accent, #12a594);
	color: #fff;
}

/* =========================================================================
   Single product detail (PDP) — custom layout matching the Medrue design
   ========================================================================= */
.medrue-pdp {
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	gap: 3.5rem;
	align-items: start;
	/* Span the wide (1200px) area, not the narrow 760px content size. */
	max-width: 1200px;
	width: 100%;
	margin-inline: auto;
}
.medrue-pdp__media { position: sticky; top: 96px; }
.medrue-pdp__gallery { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.medrue-pdp__img { margin: 0; width: 100%; text-align: center; }
.medrue-pdp__img img { width: 100%; max-width: 540px; height: auto; max-height: none; display: block; margin: 0 auto; }

.medrue-pdp__main { max-width: 560px; }
.medrue-pdp__title {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.35rem;
	letter-spacing: -0.01em;
}
.medrue-pdp__cas {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	margin: 0 0 1.6rem;
}

/* ---- Size / Quantity selectors ---- */
.medrue-atc { margin: 0; }
.medrue-opt { margin-bottom: 1.1rem; display: inline-block; vertical-align: top; }
.medrue-opt + .medrue-opt { margin-left: 3.5rem; }
.medrue-opt__label {
	display: block;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.5rem;
}
.medrue-toggle { display: inline-flex; gap: 0.6rem; }
.medrue-toggle__btn {
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 9px;
	background: #fff;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}
.medrue-toggle__btn:hover { border-color: #b9c6da; }
.medrue-toggle__btn.is-active {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

/* ---- Price box + Add to cart ---- */
.medrue-pricebox {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.25rem 1rem;
	background: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: 1.4rem 1.5rem 1.5rem;
	margin: 1rem 0 1.4rem;
}
.medrue-pricebox__left { display: flex; flex-direction: column; }
.medrue-pricebox__name { font-size: 1.35rem; font-weight: 800; color: var(--wp--preset--color--primary); line-height: 1.2; }
.medrue-pricebox__ships { font-size: 0.86rem; color: var(--wp--preset--color--muted); margin-top: 0.2rem; }
.medrue-pricebox__right { text-align: right; }
.medrue-pricebox__price { display: block; font-size: 1.55rem; font-weight: 800; color: var(--wp--preset--color--primary); line-height: 1.1; }
.medrue-pricebox__price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
.medrue-pricebox__freq { font-size: 0.86rem; color: var(--wp--preset--color--muted); }
.medrue-pricebox__cta { grid-column: 1 / -1; margin-top: 1rem; }
.medrue-atc__btn {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 1.02rem;
	font-weight: 700;
	padding: 0.95rem 1rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.medrue-atc__btn:hover { background: var(--wp--preset--color--accent-700); }

/* ---- Research Use Only ---- */
.medrue-ruo {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 1.25rem 1.4rem;
	margin-bottom: 1.3rem;
}
.medrue-ruo strong { display: block; color: var(--wp--preset--color--primary); font-size: 1.02rem; margin-bottom: 0.45rem; }
.medrue-ruo p { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.92rem; line-height: 1.6; }

/* ---- Certificate of Analysis ---- */
.medrue-coa {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 1.25rem 1.4rem;
	margin-bottom: 2.4rem;
}
.medrue-coa__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.medrue-coa__tabs .medrue-toggle__btn,
.medrue-coa__sizes .medrue-toggle__btn { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.medrue-coa__title { font-size: 1.05rem; font-weight: 700; color: var(--wp--preset--color--primary); margin: 0 0 0.3rem; }
.medrue-coa__sub { font-size: 0.85rem; color: var(--wp--preset--color--muted); margin: 0 0 1rem; }
.medrue-coa__codes { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.medrue-coa__btn {
	display: inline-flex; align-items: center; gap: 0.4rem;
	flex: 0 1 auto;
	justify-content: center;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.5rem 0.9rem;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.15s ease;
}
.medrue-coa__btn:hover { background: var(--wp--preset--color--accent-700); color: #fff; }
.medrue-coa__viewall { color: var(--wp--preset--color--muted); font-size: 0.88rem; text-decoration: none; white-space: nowrap; }
.medrue-coa__viewall:hover { color: var(--wp--preset--color--accent); }

/* ---- Document content (overview / history / structure / findings / refs) ---- */
.medrue-doc { margin-bottom: 1.8rem; }
.medrue-doc h2 { font-size: 1.45rem; font-weight: 800; color: var(--wp--preset--color--primary); margin: 0 0 0.7rem; }
.medrue-doc h3 { font-size: 1.2rem; font-weight: 800; color: var(--wp--preset--color--primary); margin: 0 0 0.6rem; }
.medrue-doc p { font-size: 0.95rem; line-height: 1.7; color: #3a4654; margin: 0 0 0.7rem; }
.medrue-doc__ref { display: inline-block; color: var(--wp--preset--color--accent); font-size: 0.9rem; text-decoration: none; }
.medrue-doc__ref:hover { text-decoration: underline; }
.medrue-doc__lead { font-weight: 700; color: var(--wp--preset--color--primary); margin-bottom: 0.4rem !important; }
.medrue-doc__list { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.medrue-doc__list li { font-size: 0.95rem; line-height: 1.6; color: #3a4654; margin-bottom: 0.25rem; }

.medrue-struct__img { margin: 0.5rem 0 1.5rem; text-align: left; }
.medrue-struct__img img { max-width: 100%; height: auto; }
.medrue-struct__data { margin: 0 0 0.5rem; }
.medrue-struct__data div { display: flex; gap: 0.4rem; margin-bottom: 0.45rem; }
.medrue-struct__data dt { font-weight: 700; color: var(--wp--preset--color--primary); font-size: 0.85rem; margin: 0; }
.medrue-struct__data dd { color: var(--wp--preset--color--primary); font-size: 0.85rem; margin: 0; }

.medrue-refs ul { list-style: none; margin: 0; padding: 0; }
.medrue-refs li { margin-bottom: 0.9rem; font-size: 0.9rem; line-height: 1.55; }
.medrue-refs__label { color: var(--wp--preset--color--accent); font-weight: 700; }
.medrue-refs__text { color: var(--wp--preset--color--accent); font-style: italic; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.medrue-pdp { grid-template-columns: 1fr; gap: 2rem; }
	.medrue-pdp__media { position: static; max-width: 420px; margin: 0 auto; }
	.medrue-pdp__main { max-width: none; }
}
@media (max-width: 480px) {
	.medrue-opt + .medrue-opt { margin-left: 1.5rem; }
	.medrue-pdp__title { font-size: 2rem; }
}

/* ---- Sticky buy bar (single product) ---- */
.medrue-buybar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 200;
	background: #fff;
	border-top: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -10px 30px -18px rgba(15, 30, 50, 0.35);
	transform: translateY(110%);
	transition: transform 0.25s ease;
}
.medrue-buybar.is-visible { transform: translateY(0); }
.medrue-buybar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.9rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.medrue-buybar__name { font-size: 1.15rem; font-weight: 800; color: var(--wp--preset--color--primary); }
.medrue-buybar__toggle .medrue-toggle__btn { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.medrue-buybar__buy { margin-left: auto; display: flex; align-items: center; gap: 0.4rem 1rem; }
.medrue-buybar__price { font-size: 1.3rem; font-weight: 800; color: var(--wp--preset--color--primary); }
.medrue-buybar__price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
.medrue-buybar__freq { font-size: 0.8rem; color: var(--wp--preset--color--muted); }
.medrue-buybar__btn {
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 0.98rem;
	font-weight: 700;
	padding: 0.8rem 1.8rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.medrue-buybar__btn:hover { background: var(--wp--preset--color--accent-700); }
@media (max-width: 781px) {
	.medrue-buybar__toggle { display: none; }
	.medrue-buybar__inner { gap: 1rem; padding: 0.7rem 1rem; }
	.medrue-buybar__name { font-size: 1rem; }
	.medrue-buybar__btn { padding: 0.7rem 1.2rem; }
}

/* =========================================================================
   Shop page (archive-product → medrue/shop pattern)
   ========================================================================= */

/* Sidebar catalog list */
/* Shop heading — smaller than the default H1 to match the design */
.medrue-shop-main > h1 { font-size: 2rem; line-height: 1.15; font-weight: 800; }

.medrue-catalog-list { list-style: none; margin: 0; padding: 0; }
.medrue-catalog-list li { margin: 0 0 0.55rem; line-height: 1.35; }
.medrue-catalog-list a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: 0.9rem;
}
.medrue-catalog-list a:hover { color: var(--wp--preset--color--accent); }

/* Search bar */
.medrue-shop-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.6rem 0.9rem;
	margin-bottom: 1.75rem;
}
.medrue-shop-search svg { flex: 0 0 auto; }
.medrue-shop-search input[type="search"] {
	flex: 1;
	border: 0;
	outline: 0;
	background: none;
	font: inherit;
	color: var(--wp--preset--color--primary);
}

/* Product grid (3-up) */
.medrue-shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 3rem;
}
.medrue-shop-grid .medrue-prod-card { flex: initial; width: auto; min-height: 0; height: 353px; max-width: 325px; border-radius: 16px; border: 1px solid var(--wp--preset--color--border); }
.medrue-prod-top { padding: 15px 16px !important; text-align: center; position: relative; z-index: 2; }
.medrue-prod-label { margin: 0; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--wp--preset--color--muted); }
.medrue-prod-name { margin: 0.2rem 0 0.7rem; font-size: 1.3rem; font-weight: 700; color: var(--wp--preset--color--primary); }
.medrue-prod-btnwrap { display: flex; justify-content: center; }

/* Shop cards: large product image filling the card, anchored to the bottom
   (overrides the homepage slider's small 40%-width vial styling). */
.medrue-shop-grid .medrue-prod-vial {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 66%;
	transform: none;
	margin: 0;
}
.medrue-shop-grid .medrue-prod-vial img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

@media (max-width: 900px) {
	.medrue-shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.medrue-shop-grid { grid-template-columns: 1fr; }
}

/* Text Us / Made in the USA row */
.medrue-madeusa-row {
	display: grid;
	grid-template-columns: 1.12fr 1fr;
	gap: 1.5rem;
	margin-bottom: 3rem;
}
.medrue-madeusa-card {
	position: relative;
	min-height: 248px;
	border-radius: 22px;
	padding: 2rem 2.25rem;
	overflow: hidden;
}
/* Dark card: heading/subtext at the top, contact block pinned to the bottom. */
.medrue-madeusa-card--dark { display: flex; flex-direction: column; background: var(--wp--preset--color--primary); color: #fff; }
.medrue-madeusa-card--light { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); }
.medrue-madeusa-card h3,
.medrue-madeusa-card p { position: relative; z-index: 2; }
.medrue-madeusa-card h3 { margin: 0 0 0.55rem; font-size: 1.3rem; font-weight: 700; }
.medrue-madeusa-card--dark h3,
.medrue-madeusa-card--dark p { max-width: 62%; }
.medrue-madeusa-card--dark h3 { color: #fff; }
.medrue-madeusa-card--light h3 { color: var(--wp--preset--color--primary); }
.medrue-madeusa-card--dark p { color: #c4cdd8; margin: 0; font-size: 0.95rem; line-height: 1.55; }
.medrue-madeusa-card--light p { color: var(--wp--preset--color--muted); margin: 0; font-size: 0.95rem; line-height: 1.55; }
/* Contact block (phone + button) sits at the bottom-left of the dark card. */
.medrue-madeusa-text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 62%;
}
.medrue-madeusa-card--dark .medrue-madeusa-text { margin-top: auto; }
.medrue-madeusa-card--light .medrue-madeusa-text { max-width: 100%; }
.medrue-madeusa-phone { margin: 0 0 1rem; color: #6fa8ff; font-weight: 700; font-size: 1.3rem; text-decoration: none; }
.medrue-madeusa-btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: var(--wp--preset--color--accent);
	color: #fff;
	border-radius: 999px;
	padding: 0.7rem 1.8rem;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
}
.medrue-madeusa-btn:hover { background: var(--wp--preset--color--accent-700); color: #fff; }

/* Phone chat mockup: anchored to the bottom-right, slightly cropped. */
.medrue-madeusa-phoneimg {
	position: absolute;
	right: 1.75rem;
	bottom: 0;
	width: 38%;
	max-width: 215px;
	height: auto;
	z-index: 1;
}
/* MedRue box: large, anchored near the bottom of the card. */
.medrue-madeusa-box {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	width: 90%;
	max-width: 460px;
	height: auto;
}

@media (max-width: 781px) {
	.medrue-madeusa-row { grid-template-columns: 1fr; }
	.medrue-madeusa-card { min-height: 340px; }
	.medrue-madeusa-text { max-width: 60%; }
}

/* Shop FAQ (single column, plain) */
.medrue-shop-faqtitle { font-size: 1.6rem; font-weight: 700; color: var(--wp--preset--color--primary); margin: 0 0 1.25rem; }
.medrue-shop-faq .medrue-faq-item {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.95rem 1.15rem;
	margin-bottom: 0.85rem;
}
.medrue-shop-faq summary { font-weight: 600; font-size: 0.95rem; }
.medrue-shop-faq p { color: var(--wp--preset--color--muted); font-size: 0.88rem; margin: 0.6rem 0 0; }

/* ---- COA buttons as image-viewer triggers ---- */
.medrue-coa__btn { border: 0; cursor: pointer; font: inherit; }
.medrue-coa__btn[disabled] { opacity: 0.55; cursor: default; }
.medrue-coa__empty { color: var(--wp--preset--color--muted); font-size: 0.85rem; align-self: center; }

/* ---- COA image viewer (lightbox) ---- */
.medrue-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}
.medrue-lightbox.is-open { display: flex; }
.medrue-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 20, 32, 0.85);
	backdrop-filter: blur(2px);
}
.medrue-lightbox__stage {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: min(92vw, 900px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.medrue-lightbox__img {
	max-width: 100%;
	max-height: 80vh;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.medrue-lightbox__cap {
	color: #fff;
	font-size: 0.9rem;
	margin-top: 0.9rem;
	letter-spacing: 0.02em;
}
.medrue-lightbox__close {
	position: absolute;
	top: 1.1rem;
	right: 1.3rem;
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}
.medrue-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.medrue-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
.medrue-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.medrue-lightbox__nav--prev { left: 1.5rem; }
.medrue-lightbox__nav--next { right: 1.5rem; }
.medrue-lightbox.is-single .medrue-lightbox__nav { display: none; }

/* =========================================================================
   Certificate of Analysis page (medrue/coa)
   ========================================================================= */
.medrue-coa { max-width: 1200px; margin: 0 auto; }
.medrue-coa-title { font-size: 1.85rem; font-weight: 700; color: var(--wp--preset--color--primary); margin: 0 0 0.25rem; }
.medrue-coa-sub { color: var(--wp--preset--color--muted); margin: 0 0 1.5rem; }

/* Search row */
.medrue-coa-searchrow { display: flex; gap: 1rem; align-items: stretch; margin-bottom: 1.75rem; }
.medrue-coa-search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.65rem 0.9rem;
}
.medrue-coa-search input[type="search"] { flex: 1; border: 0; outline: 0; background: none; font: inherit; color: var(--wp--preset--color--primary); }
.medrue-coa-validate {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 10px;
	padding: 0.65rem 1.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.medrue-coa-validate:hover { background: var(--wp--preset--color--primary-700); color: #fff; }

/* Rows */
.medrue-coa-list { margin-bottom: 3rem; }
.medrue-coa-row {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 0.9rem 1.25rem;
	margin-bottom: 0.85rem;
}
.medrue-coa-badges { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.medrue-coa-badge {
	font-size: 0.68rem;
	font-weight: 600;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	border: 1px solid transparent;
}
.medrue-coa-badge--blue { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); background: rgba(29,111,229,0.06); }
.medrue-coa-badge--gray { color: var(--wp--preset--color--muted); border-color: var(--wp--preset--color--border); }

.medrue-coa-cols {
	display: grid;
	grid-template-columns: 1.5fr 1.1fr 1.5fr auto;
	align-items: center;
	gap: 1.25rem;
}
.medrue-coa-collabel { display: block; font-size: 0.65rem; color: var(--wp--preset--color--muted); margin-bottom: 0.25rem; }
.medrue-coa-product { display: flex; align-items: center; gap: 0.85rem; }
.medrue-coa-thumb { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: var(--wp--preset--color--surface); flex: 0 0 auto; }
.medrue-coa-name { font-weight: 700; color: var(--wp--preset--color--primary); }

.medrue-coa-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.medrue-coa-pill {
	font-size: 0.75rem;
	padding: 0.25em 0.7em;
	border-radius: 7px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}
.medrue-coa-pill.is-active { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.medrue-coa-lotbtns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.medrue-coa-lot {
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.45rem 0.9rem;
	border-radius: 7px;
	text-decoration: none;
	white-space: nowrap;
}
.medrue-coa-lot:hover { background: var(--wp--preset--color--accent-700); color: #fff; }
.medrue-coa-viewall {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 7px;
	padding: 0.45rem 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}
.medrue-coa-viewall:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

@media (max-width: 900px) {
	.medrue-coa-cols { grid-template-columns: 1fr; gap: 0.75rem; }
	.medrue-coa-searchrow { flex-direction: column; }
}

/* COA validate button works as a <button> */
.medrue-coa-validate { border: 0; cursor: pointer; font: inherit; line-height: 1.2; }
.medrue-coa-validate svg { flex: 0 0 auto; }

/* =========================================================================
   COA "How to validate" modal
   ========================================================================= */
.medrue-coa-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.medrue-coa-modal.is-open { display: block; }
.medrue-coa-modal__overlay { position: absolute; inset: 0; background: rgba(18, 25, 36, 0.78); }
.medrue-coa-modal__panel {
	position: relative;
	max-width: 940px;
	width: calc(100% - 2rem);
	margin: 4vh auto;
	background: #fff;
	border-radius: 26px;
	padding: 2.5rem 1.5rem 3rem;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 40px 90px -40px rgba(15, 23, 42, 0.6);
	animation: medrue-cart-in 0.25s ease;
	overflow: hidden;
}
.medrue-coa-modal__x {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
	color: var(--wp--preset--color--muted);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
}
.medrue-coa-modal__x:hover { background: var(--wp--preset--color--surface); }
.medrue-coa-modal__vial { max-height: 78vh; width: auto; display: block; }
.medrue-coa-modal__step {
	position: absolute;
	background: rgba(238, 242, 247, 0.96);
	backdrop-filter: blur(2px);
	border-radius: 16px;
	padding: 0.9rem 1.25rem;
	font-size: 1.25rem;
	line-height: 1.35;
	color: var(--wp--preset--color--primary);
	max-width: 370px;
	box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.4);
}
.medrue-coa-modal__step strong { color: var(--wp--preset--color--accent); font-weight: 700; }
.medrue-coa-modal__step--1 { top: 22%; left: 3%; }
.medrue-coa-modal__step--2 { bottom: 12%; right: 3%; }

@media (max-width: 600px) {
	.medrue-coa-modal__step { font-size: 1rem; max-width: 60%; }
	.medrue-coa-modal__panel { min-height: 80vh; }
}

/* =========================================================================
   COA: expandable lot lists + lot lightbox
   ========================================================================= */
/* Lot + View-all are now <button>s (keep them small — only inherit the font family) */
.medrue-coa-lot {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.78rem;
	line-height: 1.1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.medrue-coa-viewall {
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.78rem;
	line-height: 1.1;
}

/* Collapsed: only the first two lots show */
.medrue-coa-lotbtns .medrue-coa-lot:nth-child(n+3) { display: none; }

/* Expanded row */
.medrue-coa-row.is-expanded {
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}
.medrue-coa-row.is-expanded .medrue-coa-cols { align-items: start; }
.medrue-coa-row.is-expanded .medrue-coa-lotbtns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
}
.medrue-coa-row.is-expanded .medrue-coa-lotbtns .medrue-coa-lot { display: inline-flex; }

/* Lightbox */
.medrue-coa-lightbox { position: fixed; inset: 0; z-index: 10000; display: none; }
.medrue-coa-lightbox.is-open { display: block; }
.medrue-coa-lightbox__overlay { position: absolute; inset: 0; background: rgba(15, 22, 33, 0.86); }
.medrue-coa-lightbox__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 6vh 4.5rem 4vh;
	overflow: auto;
}
.medrue-coa-lightbox__stage img {
	max-width: 780px;
	width: 100%;
	height: auto;
	background: #fff;
	border-radius: 8px;
	transform-origin: top center;
	transition: transform 0.18s ease;
	box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.6);
}
.medrue-coa-lightbox__bar {
	position: absolute;
	top: 1.1rem;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border-radius: 10px;
	padding: 0.45rem 1.1rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	z-index: 2;
}
.medrue-coa-lightbox__x {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
}
.medrue-coa-lightbox__x:hover { background: rgba(255, 255, 255, 0.3); }
.medrue-coa-lightbox__tools {
	position: absolute;
	top: 4.5rem;
	right: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 3;
}
.medrue-coa-lightbox__tools button,
.medrue-coa-lightbox__tools a {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	border: 0;
	background: #fff;
	color: var(--wp--preset--color--primary);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.medrue-coa-lightbox__tools button:hover,
.medrue-coa-lightbox__tools a:hover { background: var(--wp--preset--color--surface); }
.medrue-coa-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.9);
	color: var(--wp--preset--color--primary);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
}
.medrue-coa-lightbox__nav:hover { background: #fff; }
.medrue-coa-lightbox__prev { left: 1.1rem; }
.medrue-coa-lightbox__next { right: 1.1rem; }
/* Single-page COAs: hide page bar + arrows */
.medrue-coa-lightbox:not(.is-multi) .medrue-coa-lightbox__nav,
.medrue-coa-lightbox:not(.is-multi) .medrue-coa-lightbox__bar { display: none; }

/* Text Us chat bubbles: shrink to their text, blue right / gray left */
.medrue-chat { display: flex; flex-direction: column; align-items: stretch; }
.medrue-chat > p { width: fit-content; max-width: 88%; margin: 0; }
.medrue-chat > p:nth-child(1) { align-self: flex-end; text-align: right; }
.medrue-chat > p:nth-child(2) { align-self: flex-start; }

/* Align the hero content with the page's 1180px content column.
   A Cover is a flexbox; "center-left" pins its inner content to the viewport's
   left edge and shrinks it to content. So we center the inner-container flex
   item to 1180px (auto margins work on flex items) and let the group fill it. */
.medrue-hero .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: 1180px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}
.medrue-hero .wp-block-cover__inner-container > .wp-block-group {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
@media (max-width: 1180px) {
	.medrue-hero .wp-block-cover__inner-container {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}
}

/* ---- Cart drawer: reliable close button + mobile fixes ---- */
/* Sit above the WP admin bar (z 99999) so the drawer + its close button are
   never covered. */
.medrue-cart-drawer { z-index: 100001; }

/* Close button always visible (fixed), even while the drawer scrolls. */
.medrue-cart-x {
	position: fixed;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 5;
	width: 42px;
	height: 42px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.25);
	font-size: 1.5rem;
}

@media (max-width: 781px) {
	.medrue-cart-drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.medrue-cart-panel {
		min-height: 100vh;
		padding-top: 4rem; /* clears the fixed close button */
		border-radius: 0;
	}
	.medrue-cart-grid { grid-template-columns: 1fr; gap: 2.25rem; }
	/* Checkout button + TLS note stack neatly on small screens */
	.medrue-cart-checkout-row { flex-wrap: wrap; }
	.medrue-cart-tls { max-width: 100%; }
}

/* ---- Cart drawer: stop columns/rows overflowing the panel (esp. mobile) ---- */
.medrue-cart-grid { max-width: 100%; box-sizing: border-box; }
.medrue-cart-grid > * { min-width: 0; }
.medrue-cart-col { min-width: 0; max-width: 100%; box-sizing: border-box; }
.medrue-cart-item { min-width: 0; }
.medrue-cart-item-name { overflow-wrap: anywhere; }
.medrue-cart-row { min-width: 0; }
.medrue-cart-coupon-row { min-width: 0; flex-wrap: wrap; }
.medrue-cart-coupon-row input { min-width: 0; flex: 1 1 6rem; }
.medrue-cart-panel { overflow-x: hidden; }