/**
 * Shop Category Sidebar v3 -- monochrome PP + gold restyle.
 *
 * Additive skin for the pathways-v2 icon-card markup. Ships ONLY when the
 * gate pp_shop_sidebar_pathways_v3 is ON (default OFF, deploys dark). It does
 * NOT touch the v2 JS/markup: v2 still runs and produces the exact same DOM
 * plus its per-pathway data-pathway attributes. This stylesheet is enqueued
 * AFTER the base sidebar + the v2 pathway CSS and wins on BOTH source order
 * and a `.pp-shop-sidebar` specificity bump, so it neutralizes the nine-hue
 * rainbow to navy / gold / silver and restyles the cards to the owner-approved
 * `.after` mockup.
 *
 * DOM it reskins (unchanged, produced by assets/js/pp-shop-sidebar-pathways.js):
 *   aside#pp-shop-sidebar.pp-shop-sidebar
 *     > h3.pp-sidebar-title
 *     > ul.pp-category-list
 *         > li.pp-pathway-card[data-pathway] (+ .active on the current row)
 *             > a
 *                 > span.pp-pathway-card__icon-wrap > svg.pp-pathway-card__icon
 *                 > span.pp-pathway-card__label
 *                 > span.pp-pathway-card__count   (absent on "All Products")
 *
 * Palette (PP system): navy #16233F, gold #B0853A, gold-ink #7c5e1f,
 * silver #E8ECF4 / #EEF1F7, line #DCE3EE, muted #5A6B85.
 *
 * Every rule below is scoped under body.pp-shop-sidebar-pathways-v3.
 * One-line global revert (no deploy): wp option update pp_shop_sidebar_pathways_v3 0
 */

/* -- palette, declared on the sidebar so every row inherits it -------------- */
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar {
	--pp-v3-navy: #16233F;
	--pp-v3-gold: #B0853A;
	--pp-v3-gold-ink: #7c5e1f;
	--pp-v3-silver: #E8ECF4;
	--pp-v3-silver-2: #EEF1F7;
	--pp-v3-card: #FFFFFF;
	--pp-v3-ink: #16233F;
	--pp-v3-muted: #5A6B85;
	--pp-v3-line: #DCE3EE;
	--pp-v3-line-hover: #C9D4E6;
	--pp-v3-icon-hover: #DCE4F1;
	--pp-v3-radius: 12px;
	--pp-v3-radius-sm: 9px;
	--pp-v3-shadow: 0 1px 2px rgba(22, 35, 63, .06), 0 8px 24px rgba(22, 35, 63, .07);
	--pp-v3-shadow-hover: 0 2px 4px rgba(22, 35, 63, .08), 0 14px 34px rgba(22, 35, 63, .13);
}

/* -- panel frame (true desktop only; <=1024px the mobile-collapse feature owns
   the container chrome -- it renders `Categories` as a tap-pill and hides the
   list until .pp-cat-expanded -- so the v3 desktop frame must NOT paint there).
   Boundary is 1025px to line up with mobile-collapse's max-width:1024px, with no
   (768,769) gap. ------------------------------------------------------------- */
@media (min-width: 1025px) {
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar {
		background: var(--pp-v3-card);
		border: 1px solid var(--pp-v3-line);
		border-radius: var(--pp-v3-radius);
		padding: 18px 16px 20px;
		box-shadow: var(--pp-v3-shadow);
	}
}

/* -- section title: retire the blue rule for a short gold underline.
   Desktop-only (min-width:1025px): at <=1024px the mobile-collapse feature
   restyles this same H3 into a full-width tap-pill via #pp-shop-sidebar ID
   selectors (specificity 1,2,1) that outrank v3's class selectors (0,3,1), so
   v3 must not compete for the title there -- it would paint a gold underline
   around / through the collapsed pill. Gate it to true desktop. -------------- */
@media (min-width: 1025px) {
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-sidebar-title {
		position: relative;
		margin: 2px 2px 16px;
		padding: 0 0 12px;
		border: 0;
		border-bottom: 0;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--pp-v3-navy);
	}
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-sidebar-title::after {
		content: "";
		position: absolute;
		left: 2px;
		bottom: 0;
		width: 34px;
		height: 2px;
		border-radius: 2px;
		background: var(--pp-v3-gold);
	}
}

/* -- list ------------------------------------------------------------------- */
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li {
	margin: 0;
	padding: 0;
}

/* Neutralize the v2 per-pathway rainbow to a single navy (belt + suspenders:
   the icon/count colors below already override every consumer of this var). */
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li[data-pathway] {
	--pp-pathway-color: var(--pp-v3-navy);
}

/* -- the card (the WC anchor) -----------------------------------------------
   The always-on v2 card rule (css/overrides-base.css, css/pp-bundle-base.css,
   inc/critical-css/shop.css) sets EVERY contested property `!important`. This
   v3 selector already carries higher specificity (0,3,3 vs v2's 0,2,3), but
   specificity only decides ties AMONG `!important` declarations -- so each
   contested property here must be `!important` too or v2 wins the cascade and
   flipping the gate ON yields a broken hybrid. `border-left` gets an explicit
   longhand reset because v2 declares `border-left:4px solid var(--pp-pathway-
   color)!important` as its own later declaration; beating the shorthand alone
   would not reliably win the left edge. */
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px !important;
	padding: 11px 11px !important;
	border: 1px solid var(--pp-v3-line) !important;
	border-left: 1px solid var(--pp-v3-line) !important;
	border-radius: var(--pp-v3-radius-sm) !important;
	background: var(--pp-v3-card) !important;
	color: var(--pp-v3-ink);
	text-decoration: none;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.28 !important;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

/* Gold left-rail: fades + scales in on hover, and marks the active row. */
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	bottom: 9px;
	width: 3px;
	border-radius: 3px;
	background: var(--pp-v3-gold);
	opacity: 0;
	transform: scaleY(.4);
	transform-origin: center;
	transition: opacity .18s ease, transform .18s ease;
}

body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a:hover {
	border-color: var(--pp-v3-line-hover);
	box-shadow: var(--pp-v3-shadow-hover);
	transform: translateY(-1px);
	background: var(--pp-v3-card);
}
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a:hover::before {
	opacity: 1;
	transform: scaleY(1);
}
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a:focus-visible {
	outline: 2px solid var(--pp-v3-gold);
	outline-offset: 2px;
}

/* -- unified navy icon in a soft-silver rounded square (no per-pathway hue) -- */
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-pathway-card__icon-wrap {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pp-v3-silver);
	color: var(--pp-v3-navy);
	transition: background-color .18s ease, color .18s ease;
}
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a:hover .pp-pathway-card__icon-wrap {
	background: var(--pp-v3-icon-hover);
}
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-pathway-card__icon {
	width: 18px;
	height: 18px;
	/* The shared v2 JS renders the SVG with a stroke-width="2" PRESENTATION
	   attribute; a CSS `stroke-width` property outranks any presentation
	   attribute, so this thins the glyph to the mockup weight while staying
	   scoped to v3 (v2 keeps its 2px stroke). */
	stroke-width: 1.75;
}

/* -- name: balanced two-line wrap, navy 600 --------------------------------- */
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-pathway-card__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -.005em;
	color: var(--pp-v3-navy);
	/* No line-balancing: `balance` narrows the first line to equalize line
	   lengths, which forced long single words (Melanocortin / Mitochondrial /
	   Neuropeptide) to break mid-word in the ~232px sidebar column. `pretty`
	   only fixes orphans and lets each line use full width. hyphens:none so a
	   long word never gets a hyphenated break; overflow-wrap:break-word stays
	   purely as an anti-overflow safety net (a word can never spill the card). */
	text-wrap: pretty;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	-webkit-hyphens: none;
}

/* -- count: small silver pill, tabular figures ------------------------------ */
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-pathway-card__count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--pp-v3-silver-2);
	color: var(--pp-v3-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* -- active row: navy fill, white ink + icon, gold rail.
   v2's active rule (li.active a, specificity 0,3,3) sets background / border-
   color / border-left-color / color all `!important`; this v3 selector is
   0,4,3, so `!important` here wins the tie. `border-left` is set explicitly so
   the navy fill's left edge isn't left as v2's per-pathway color. ----------- */
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li.active a {
	background: var(--pp-v3-navy) !important;
	border-color: var(--pp-v3-navy) !important;
	border-left: 1px solid var(--pp-v3-navy) !important;
	color: #FFFFFF !important;
	box-shadow: var(--pp-v3-shadow-hover);
}
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li.active a::before {
	opacity: 1;
	transform: scaleY(1);
	background: var(--pp-v3-gold);
}
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li.active a .pp-pathway-card__label {
	color: #FFFFFF;
	font-weight: 700;
}
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li.active a .pp-pathway-card__icon-wrap {
	background: rgba(255, 255, 255, .14);
	color: #FFFFFF;
}
body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li.active a .pp-pathway-card__count {
	background: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .9);
}

/* -- mobile / tablet (<=1024px): monochrome pill treatment for the links the
   mobile-collapse feature reveals under .pp-cat-expanded. Boundary is 1024px
   (was 768px) so it (a) covers the WHOLE mobile-collapse range with no
   (768,769) gap and no 769-1024 desktop-frame mashup, and (b) shares the exact
   1024/1025 seam with mobile-collapse. v2 pins mobile padding / background /
   border-left-width `!important` and its base border-radius:8px `!important`
   persists here (v2 doesn't re-pin radius on mobile), so these must be
   `!important` for the 22px pill + white fill to actually render. ----------- */
@media (max-width: 1024px) {
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list {
		gap: 6px;
	}
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a {
		padding: 8px 12px !important;
		border: 1px solid var(--pp-v3-line) !important;
		border-radius: 22px !important;
		background: var(--pp-v3-card) !important;
		min-height: 44px !important;
	}
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a::before {
		display: none;
	}
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a:hover {
		transform: none;
	}
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-pathway-card__icon-wrap {
		flex-basis: 26px;
		width: 26px;
		height: 26px;
		border-radius: 7px;
	}
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-pathway-card__icon {
		width: 15px;
		height: 15px;
	}
}

/* -- respect reduced-motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a,
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a::before,
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-pathway-card__icon-wrap {
		transition: none;
	}
	body.pp-shop-sidebar-pathways-v3 .pp-shop-sidebar .pp-category-list li a:hover {
		transform: none;
	}
}