/* ==================================================================
   The Longevity Edge — Shop archive styles
   Loaded only on /shop, product category, and product tag archives.
   Depends on tokens.css + components.css.
   ================================================================== */

/* === Kadence wrapper trims (matches PDP approach) ===
   Strip the default content-area top margin + content-container padding so
   the shop hero hugs the header. */
body.le-shop-page .content-area { margin-top: 24px !important; }
body.le-shop-page .content-container,
body.le-shop-page .entry-content-wrap,
body.le-shop-page .site-main,
body.le-shop-page main#main { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Hide WC's default page title since we render our own hero. */
body.le-shop-page .woocommerce-products-header,
body.le-shop-page .woocommerce-result-count,
body.le-shop-page .woocommerce-ordering { display: none !important; }

/* === SHOP HERO === */
.le-shop .shop-hero {
	background: var(--canvas);
	padding: var(--s-9) 0 var(--s-7);
	border-bottom: 1px solid var(--navy-100);
	text-align: center;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.le-shop .shop-hero h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-4xl);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-tight);
	color: var(--navy-900);
	margin: 0 0 var(--s-3);
}
.le-shop .shop-hero .eyebrow { margin: 0 0 var(--s-3); }
.le-shop .shop-hero .lede {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--ink-700);
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
}

/* === TRUST LINE === */
.le-shop .shop-trust-line {
	background: var(--surface);
	border-bottom: 1px solid var(--navy-100);
	padding: var(--s-4) 0;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.le-shop .shop-trust-line p {
	margin: 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	color: var(--ink-700);
	letter-spacing: 0.01em;
}
.le-shop .shop-trust-line strong { color: var(--navy-900); margin-right: var(--s-2); }
.le-shop .shop-trust-sep { color: var(--ink-300); margin: 0 var(--s-3); }

/* === GRID SECTION === */
.le-shop .shop-grid-section {
	padding: var(--s-8) 0 var(--s-9);
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--canvas);
}
.le-shop .shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-6);
}
@media (max-width: 900px) {
	.le-shop .shop-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}
@media (max-width: 560px) {
	.le-shop .shop-grid { grid-template-columns: 1fr; }
}

/* Larger shop cards (vs. home featured strip) */
.le-shop .shop-grid .product-card { border-radius: var(--r-lg); }
.le-shop .shop-grid .product-card-img { aspect-ratio: 1 / 1.05; }
.le-shop .shop-grid .product-card-body { padding: var(--s-6); gap: var(--s-3); }
.le-shop .shop-grid .product-card-title { font-size: var(--fs-2xl); }
.le-shop .shop-grid .product-card-price { font-size: var(--fs-xl); }

/* === MECHANISM COLOR-CODED EYEBROWS ===
   Tints the product-card-eyebrow by WC category slug. Slugs must match
   the actual product_cat slugs in WC. Pat can add new tints to the list
   as new categories are introduced. */
.product-card-eyebrow.cat-cellular-energy,
.product-card-eyebrow.cat-fish-oil { color: var(--gold-600); }
.product-card-eyebrow.cat-telomere-support { color: var(--navy-700); }
.product-card-eyebrow.cat-cognitive-performance,
.product-card-eyebrow.cat-brain-cognition { color: #8B6F47; } /* bronze */
.product-card-eyebrow.cat-cardio-metabolic { color: #4a6f60; } /* deep green */
.product-card-eyebrow.cat-foundational { color: var(--navy-900); }
.product-card-eyebrow.cat-bundles,
.product-card-eyebrow.cat-bundle { color: var(--cta-600); }

/* === CARD BADGES ===
   "Dr. Dave's Pick" is a new third state — gold border, navy bg, gold text.
   Bestseller + Most Popular already styled in components.css. */
.badge.badge-doc-pick {
	background: var(--navy-900);
	color: var(--gold-300);
	border: 1px solid var(--gold-500);
	font-weight: 700;
}

/* === WHERE TO START CARD === */
.le-shop .where-to-start {
	margin: 0 0 var(--s-7);
	background: var(--surface);
	border: 1.5px solid var(--gold-100);
	border-left: 4px solid var(--gold-500);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}
.le-shop .where-to-start-inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	padding: var(--s-5) var(--s-6);
	position: relative;
}
.le-shop .where-to-start-content { flex: 1 1 auto; min-width: 0; }
.le-shop .where-to-start-eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--gold-600);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	margin: 0 0 var(--s-2);
}
.le-shop .where-to-start-body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--ink-700);
	line-height: var(--lh-relaxed);
	margin: 0 0 var(--s-3);
	max-width: 60ch;
}
.le-shop .where-to-start .btn { white-space: nowrap; }
.le-shop .where-to-start-dismiss {
	position: absolute;
	top: var(--s-3);
	right: var(--s-3);
	background: transparent;
	border: 0;
	padding: var(--s-2);
	color: var(--ink-500);
	cursor: pointer;
	border-radius: var(--r-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color var(--t-default) var(--ease-out), background var(--t-default) var(--ease-out);
}
.le-shop .where-to-start-dismiss:hover { color: var(--navy-900); background: var(--canvas); }
.le-shop .where-to-start-dismiss:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
@media (max-width: 640px) {
	.le-shop .where-to-start-inner { flex-direction: column; align-items: flex-start; }
}

/* === BUNDLE CTA — navy gradient banner === */
.le-shop .bundle-cta {
	background: linear-gradient(105deg, var(--navy-900) 0%, var(--navy-700) 100%);
	color: #fff;
	border-radius: var(--r-xl);
	padding: var(--s-8) var(--s-7);
	margin-top: var(--s-9);
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--s-7);
	align-items: center;
	position: relative;
	overflow: hidden;
}
.le-shop .bundle-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 80% 30%, rgba(229, 189, 92, 0.18) 0%, transparent 50%);
	pointer-events: none;
}
.le-shop .bundle-cta-content { position: relative; z-index: 1; }
.le-shop .bundle-cta .eyebrow { color: var(--gold-300); margin-bottom: var(--s-3); }
.le-shop .bundle-cta h2 {
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-3xl);
	margin: 0 0 var(--s-3);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-tight);
}
.le-shop .bundle-cta p {
	color: var(--navy-100);
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
	max-width: 46ch;
	margin: 0 0 var(--s-5);
}
.le-shop .bundle-cta-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.le-shop .bundle-cta-row .btn { background: var(--cta-600); border-color: var(--cta-600); color: #fff; }
.le-shop .bundle-cta-row .btn:hover { background: var(--cta-700); border-color: var(--cta-700); }
.le-shop .bundle-cta-visual {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.le-shop .bundle-cta-img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r-md);
}
@media (max-width: 900px) {
	.le-shop .bundle-cta { grid-template-columns: 1fr; padding: var(--s-7) var(--s-5); }
	.le-shop .bundle-cta-visual { margin-top: var(--s-4); }
}

/* === VALUE STRIP === */
.le-shop .value-strip {
	background: var(--surface);
	border-top: 1px solid var(--navy-100);
	padding: var(--s-9) 0;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.le-shop .value-strip-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-7);
}
.le-shop .value-item { text-align: center; }
.le-shop .value-icon {
	width: 48px;
	height: 48px;
	color: var(--gold-600);
	margin: 0 auto var(--s-3);
}
.le-shop .value-item h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-lg);
	color: var(--navy-900);
	margin: 0 0 var(--s-2);
}
.le-shop .value-item p {
	margin: 0;
	color: var(--ink-700);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}
@media (max-width: 768px) {
	.le-shop .value-strip-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Prevent horizontal scrollbar from full-bleed -50vw margins. */
html, body { overflow-x: clip; }