/*
Theme Name: MaxPeps Research Supply
Theme URI: https://maxpeps.com
Description: MaxPeps child theme v2. Navy/clinical lab aesthetic matching product vial photography: deep navy header, glass-blue accents, crisp white product cards, steel-grey typographic details.
Author: MaxPeps
Template: storefront
Version: 2.0.0
*/

/* ============================================================
   DESIGN TOKENS — pulled directly from product vial palette
   Navy cap:       #0B2545
   Navy mid:       #163763
   Navy label bar: #0B2545
   Glass body:     #DCE8F5
   Glass edge:     #AAB9CB
   White label:    #FFFFFF
   Steel grey cap: #5C6470
   Red accent:     #B30000 (disclaimer only)
   Body bg:        #F5F7FA
   Text primary:   #0B2545
   Text secondary: #4A5568
   Text muted:     #8A95A3
   Border:         #DDE3EA
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

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

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	background-color: #F5F7FA !important;
	color: #0B2545 !important;
	-webkit-font-smoothing: antialiased;
}

a { color: #163763; text-decoration: none; }
a:hover { color: #0B2545; }

/* ===== DISCLAIMER BANNER — overrides plugin default ===== */
#maxpeps-disclaimer-banner {
	font-family: 'DM Mono', monospace !important;
	font-size: 11px !important;
	letter-spacing: 0.06em !important;
	padding: 9px 20px !important;
	background: #B30000 !important;
}

/* ===== HEADER ===== */
.site-header,
#masthead {
	background: #0B2545 !important;
	border-bottom: none !important;
	box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important;
	padding: 0 !important;
}

.site-header .col-full {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 32px !important;
	height: 68px !important;
}

/* Logo / brand */
.site-branding { display: flex; align-items: center; gap: 10px; }
.site-header .site-title,
.site-header .site-title a {
	font-family: 'Inter', sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	color: #FFFFFF !important;
	text-transform: uppercase !important;
}
.site-header .site-description {
	font-size: 9px !important;
	letter-spacing: 0.14em !important;
	color: #7A93B5 !important;
	text-transform: uppercase !important;
	font-family: 'DM Mono', monospace !important;
	margin-top: 1px !important;
}

/* Nav */
.main-navigation, .storefront-primary-navigation { background: transparent !important; }
.main-navigation ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-navigation ul li a {
	color: #C7D4E3 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 6px 12px !important;
	border-radius: 6px !important;
	transition: background 0.15s, color 0.15s !important;
}
.main-navigation ul li a:hover {
	background: rgba(255,255,255,0.08) !important;
	color: #FFFFFF !important;
}
.main-navigation ul li.current-menu-item > a {
	background: rgba(255,255,255,0.12) !important;
	color: #FFFFFF !important;
}

/* Cart in header */
.site-header-cart a,
.site-header-cart .cart-contents {
	color: #C7D4E3 !important;
	font-size: 13px !important;
}
.site-header-cart .count {
	background: #B30000 !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	padding: 1px 5px !important;
	font-weight: 700 !important;
}

/* Sub-menus */
.main-navigation ul ul {
	background: #0B2545 !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
	padding: 6px !important;
	flex-direction: column !important;
}
.main-navigation ul ul li a {
	padding: 7px 12px !important;
	border-radius: 5px !important;
}

/* ===== HERO SECTION ===== */
.maxpeps-hero {
	background: linear-gradient(135deg, #0B2545 0%, #163763 60%, #1A4A7A 100%);
	padding: 72px 32px 64px;
	position: relative;
	overflow: hidden;
}
.maxpeps-hero::before {
	content: '';
	position: absolute;
	top: -80px; right: -80px;
	width: 420px; height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(220,232,245,0.07) 0%, transparent 70%);
	pointer-events: none;
}
.maxpeps-hero::after {
	content: '';
	position: absolute;
	bottom: -60px; left: 30%;
	width: 280px; height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(220,232,245,0.05) 0%, transparent 70%);
	pointer-events: none;
}
.maxpeps-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.maxpeps-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'DM Mono', monospace;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: #9FC2E0;
	border: 1px solid rgba(159,194,224,0.3);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.maxpeps-eyebrow::before {
	content: '';
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #9FC2E0;
	flex-shrink: 0;
}
.maxpeps-hero h1 {
	font-size: clamp(26px, 4vw, 42px);
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 14px;
	line-height: 1.18;
	max-width: 580px;
	letter-spacing: -0.02em;
}
.maxpeps-hero p {
	font-size: 15px;
	color: #9FB3CC;
	max-width: 480px;
	margin: 0 0 28px;
	line-height: 1.6;
}
.maxpeps-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.maxpeps-btn-primary {
	display: inline-block;
	background: #FFFFFF;
	color: #0B2545 !important;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 7px;
	letter-spacing: 0.01em;
	transition: background 0.15s, transform 0.1s;
}
.maxpeps-btn-primary:hover { background: #DCE8F5; transform: translateY(-1px); }
.maxpeps-btn-outline {
	display: inline-block;
	background: transparent;
	color: #C7D4E3 !important;
	font-size: 13px;
	font-weight: 500;
	padding: 10px 22px;
	border-radius: 7px;
	border: 1px solid rgba(199,212,227,0.35);
	transition: border-color 0.15s, color 0.15s;
}
.maxpeps-btn-outline:hover { border-color: rgba(199,212,227,0.7); color: #FFFFFF !important; }

/* ===== TRUST STRIP ===== */
.maxpeps-trust-strip {
	background: #FFFFFF;
	border-bottom: 1px solid #DDE3EA;
	display: flex;
	flex-wrap: wrap;
}
.maxpeps-trust-strip .trust-item {
	flex: 1 1 180px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 24px;
	border-right: 1px solid #DDE3EA;
	font-size: 13px;
	font-weight: 500;
	color: #0B2545;
}
.maxpeps-trust-strip .trust-item:last-child { border-right: none; }
.maxpeps-trust-strip .trust-icon {
	width: 32px; height: 32px;
	background: #F0F4F8;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	color: #0B2545;
	font-size: 15px;
}
.maxpeps-trust-strip .trust-sub {
	font-size: 11px;
	color: #8A95A3;
	font-weight: 400;
	display: block;
}

/* ===== CATEGORY PILLS ===== */
.maxpeps-pills-wrap {
	background: #FFFFFF;
	border-bottom: 1px solid #DDE3EA;
	padding: 0 24px;
}
.maxpeps-pills {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 14px 0;
	scrollbar-width: none;
}
.maxpeps-pills::-webkit-scrollbar { display: none; }
.maxpeps-pills a {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
	color: #4A5568;
	border: 1px solid #DDE3EA;
	background: #FFFFFF;
	transition: all 0.15s;
}
.maxpeps-pills a:hover,
.maxpeps-pills a.is-active {
	background: #0B2545;
	color: #FFFFFF;
	border-color: #0B2545;
}

/* ===== PRODUCT GRID ===== */
.woocommerce-products-header,
.woocommerce-breadcrumb { padding: 0 24px; }

ul.products,
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
	gap: 18px !important;
	padding: 24px !important;
	margin: 0 !important;
}

/* ===== PRODUCT CARD ===== */
ul.products li.product,
.woocommerce ul.products li.product {
	background: #FFFFFF !important;
	border: 1px solid #DDE3EA !important;
	border-radius: 12px !important;
	padding: 0 !important;
	box-shadow: 0 1px 3px rgba(11,37,69,0.05) !important;
	transition: box-shadow 0.2s, transform 0.2s !important;
	overflow: hidden !important;
	position: relative !important;
}
ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
	box-shadow: 0 6px 24px rgba(11,37,69,0.12) !important;
	transform: translateY(-2px) !important;
}

/* Product image container — glass-blue bg matching vial photos */
ul.products li.product .woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-loop-product__link {
	display: block;
}
ul.products li.product img {
	display: block !important;
	width: 100% !important;
	height: 200px !important;
	object-fit: contain !important;
	object-position: center !important;
	background: linear-gradient(160deg, #DCE8F5 0%, #EDF3FA 100%) !important;
	padding: 16px !important;
	border-bottom: 1px solid #DDE3EA !important;
	border-radius: 0 !important;
}

/* Card body */
ul.products li.product .maxpeps-card-body,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .button {
	padding-left: 14px;
	padding-right: 14px;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #0B2545 !important;
	margin: 12px 14px 2px !important;
	padding: 0 !important;
	line-height: 1.35 !important;
}
ul.products li.product .price {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #0B2545 !important;
	margin: 4px 14px 10px !important;
	padding: 0 !important;
}
.maxpeps-card-meta {
	font-size: 10px;
	font-family: 'DM Mono', monospace;
	color: #8A95A3;
	margin: 0 14px 10px;
	letter-spacing: 0.04em;
}
.maxpeps-ruo-badge {
	display: inline-block;
	font-family: 'DM Mono', monospace;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #0B2545;
	border: 1px solid #AAB9CB;
	padding: 2px 7px;
	border-radius: 4px;
	vertical-align: middle;
	margin-left: 4px;
}

/* Add to cart button */
ul.products li.product .button,
ul.products li.product a.button {
	display: block !important;
	margin: 0 14px 14px !important;
	padding: 9px 14px !important;
	background: #0B2545 !important;
	color: #FFFFFF !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	border-radius: 7px !important;
	border: none !important;
	text-align: center !important;
	letter-spacing: 0.02em !important;
	transition: background 0.15s !important;
}
ul.products li.product .button:hover,
ul.products li.product a.button:hover {
	background: #163763 !important;
}
/* "Added to cart" state */
ul.products li.product .added_to_cart {
	display: block !important;
	text-align: center !important;
	font-size: 11px !important;
	color: #163763 !important;
	margin: 0 14px 14px !important;
	font-weight: 500 !important;
}

/* ===== SINGLE PRODUCT PAGE ===== */
.woocommerce div.product div.images img {
	background: linear-gradient(160deg, #DCE8F5 0%, #EDF3FA 100%) !important;
	padding: 24px !important;
	border-radius: 12px !important;
	border: 1px solid #DDE3EA !important;
}
.woocommerce div.product .product_title {
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #0B2545 !important;
	letter-spacing: -0.02em !important;
}
.woocommerce div.product p.price {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #0B2545 !important;
}
.woocommerce div.product .single_add_to_cart_button {
	background: #0B2545 !important;
	color: #FFFFFF !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	padding: 13px 28px !important;
	font-size: 14px !important;
}
.woocommerce div.product .single_add_to_cart_button:hover {
	background: #163763 !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 2px solid #DDE3EA !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: #4A5568 !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	padding: 10px 16px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: #0B2545 !important;
	font-weight: 700 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid #0B2545 !important;
	margin-bottom: -2px !important;
}

/* ===== BUTTONS — global ===== */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	background: #0B2545 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 7px !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.02em !important;
	transition: background 0.15s !important;
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
	background: #163763 !important;
	color: #FFFFFF !important;
}

/* ===== CART & CHECKOUT ===== */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
	border-color: #DDE3EA !important;
	font-size: 13px !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	background: #FFFFFF !important;
	border: 1px solid #DDE3EA !important;
	border-radius: 10px !important;
	padding: 20px !important;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #0B2545 !important;
	letter-spacing: 0.02em !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border: 1px solid #DDE3EA !important;
	border-radius: 7px !important;
	font-size: 13px !important;
	padding: 10px 12px !important;
	background: #FFFFFF !important;
	color: #0B2545 !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: #0B2545 !important;
	box-shadow: 0 0 0 3px rgba(11,37,69,0.08) !important;
	outline: none !important;
}
#place_order {
	background: #0B2545 !important;
	font-size: 14px !important;
	padding: 13px !important;
	width: 100% !important;
	border-radius: 8px !important;
}

/* ===== CHECKOUT CERTIFICATION BOX (plugin) ===== */
.maxpeps-certification {
	border: 1.5px solid #B30000 !important;
	background: #FFF5F5 !important;
	border-radius: 8px !important;
	padding: 14px 16px !important;
	margin: 16px 0 !important;
}
.maxpeps-certification label {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #7A0000 !important;
	line-height: 1.5 !important;
}

/* ===== INLINE DISCLAIMER (plugin shortcode) ===== */
.maxpeps-disclaimer-inline {
	background: #FFF5F5 !important;
	border: 1.5px solid #B30000 !important;
	border-radius: 8px !important;
	color: #7A0000 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	padding: 12px 16px !important;
	margin: 16px 0 !important;
	line-height: 1.5 !important;
	font-family: 'Inter', sans-serif !important;
}

/* ===== FOOTER ===== */
.site-footer,
#colophon {
	background: #0B2545 !important;
	border-top: 1px solid rgba(255,255,255,0.07) !important;
	margin-top: 0 !important;
}
.site-footer .col-full { padding: 40px 32px 24px !important; }
.site-footer .widget-title {
	color: #FFFFFF !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	margin-bottom: 14px !important;
	font-family: 'DM Mono', monospace !important;
}
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
#colophon { color: #7A93B5 !important; font-size: 13px !important; }
.site-footer a:hover { color: #C7D4E3 !important; }

/* Footer disclaimer block (plugin) */
#maxpeps-disclaimer-footer {
	background: #060F1C !important;
	color: #4A6080 !important;
	font-family: 'DM Mono', monospace !important;
	font-size: 10px !important;
	letter-spacing: 0.03em !important;
	line-height: 1.7 !important;
	padding: 20px 32px !important;
	max-width: 100% !important;
	text-align: center !important;
	border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* ===== NOTICES ===== */
.woocommerce-message,
.woocommerce-info {
	border-top: 3px solid #0B2545 !important;
	border-radius: 0 0 8px 8px !important;
	font-size: 13px !important;
}
.woocommerce-error {
	border-top: 3px solid #B30000 !important;
	border-radius: 0 0 8px 8px !important;
	font-size: 13px !important;
}

/* ===== WIDGETS ===== */
.widget_product_categories ul li a,
.widget_product_search input {
	font-size: 13px !important;
}
.widget_price_filter .price_slider_wrapper .ui-slider .ui-slider-handle,
.widget_price_filter .price_slider_wrapper .ui-slider .ui-slider-range {
	background: #0B2545 !important;
}

/* ===== BREADCRUMBS ===== */
.woocommerce-breadcrumb {
	font-size: 12px !important;
	color: #8A95A3 !important;
	padding: 14px 24px 0 !important;
}
.woocommerce-breadcrumb a { color: #4A5568 !important; }

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5,h6 {
	font-family: 'Inter', sans-serif !important;
	color: #0B2545 !important;
	letter-spacing: -0.01em !important;
}
p, li, td, th, label, input, select, textarea {
	font-family: 'Inter', sans-serif !important;
}

/* ===== SALE BADGE ===== */
.woocommerce span.onsale {
	background: #B30000 !important;
	border-radius: 6px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	padding: 3px 8px !important;
	min-height: unset !important;
	min-width: unset !important;
	line-height: 1.4 !important;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
	.site-header .col-full { padding: 0 16px !important; height: 58px !important; }
	.maxpeps-hero { padding: 48px 16px 40px; }
	.maxpeps-hero h1 { font-size: 26px; }
	ul.products, .woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		padding: 14px !important;
		gap: 12px !important;
	}
	ul.products li.product img { height: 160px !important; }
	.maxpeps-trust-strip .trust-item { flex: 1 1 140px; padding: 12px 14px; font-size: 12px; }
	.site-footer .col-full { padding: 28px 16px 16px !important; }
}

@media (max-width: 480px) {
	ul.products, .woocommerce ul.products {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}
}