:root {
	/* Brand palette — Brandon-confirmed (see precision_context.md) */
	--plv-blue-light: #00a2e6;
	--plv-blue: #007fa8;
	--plv-blue-dark: #1b1464;
	--plv-gray-100: #d8d3da;
	--plv-gray-300: #818594;
	--plv-gray-600: #4f5762;
	--plv-gray-900: #1d2729;
	--plv-accent: #e64500;
	--plv-highlight: #ee0020;

	/* Neutral/UI tokens — mapped to values Shadows already uses natively,
	   since this Shadows build has no CSS custom properties of its own. */
	--plv-white: #fff;
	--plv-neutral-100: #eaeaea;
	--plv-neutral-200: #c0c0c0;
	--plv-black: #000;
	--plv-spacing-unit: 16px;
	--plv-border-width: 1px;
	--plv-radius: 0.125em;
	--plv-font-bold: 700;

	--plv-text-muted: #767676; /* Shadows' own gray-30 value — used for the lighter grandchild links */
}

/* utilities */

.bg-white { background-color: var(--plv-white) !important; }
.bg-black { background-color: var(--plv-black) !important; }
.bg-neutral-100 { background-color: var(--plv-neutral-100) !important; }
.bg-neutral-200 { background-color: var(--plv-neutral-200) !important; }
.bg-gray-100 { background-color: var(--plv-gray-100) !important; }
.bg-gray-300 { background-color: var(--plv-gray-300) !important; }
.bg-gray-600 { background-color: var(--plv-gray-600) !important; }
.bg-gray-900 { background-color: var(--plv-gray-900) !important; }
.bg-blue-light { background-color: var(--plv-blue-light) !important; }
.bg-blue { background-color: var(--plv-blue) !important; }
.bg-blue-dark { background-color: var(--plv-blue-dark) !important; }

/* =============================================================================
   UTILITIES -- Borders, Margin & Padding (Bootstrap 5-derived)
   Ported from Bootstrap 5's border/margin/padding utilities
   (github.com/twbs/bootstrap/blob/main/dist/css/bootstrap-utilities.css),
   renamed to Shadows conventions:
     - "" prefix (not bare, not "plv-") -- matches every other utility in
       this file and in core Shadows.
     - left/right instead of BS5's logical start/end -- Shadows' own
       positioning utilities already use left/right, so start/end would be
       the odd one out here.
     - Shadows' breakpoint SUFFIXES (--s --m --l --xl --w) instead of BS5's
       responsive INFIXES (-sm- -md- -lg-, etc).

   Breakpoints (mirror PLV's core shadows.css, mobile-first / min-width):
     --s   min-width: 40em  (640px)
     --m   min-width: 48em  (768px)
     --l   min-width: 60em  (960px)
     --xl  min-width: 75em  (1200px)
     --w   min-width: 90em  (1440px)
   Unsuffixed = base/mobile tier, applies at every size unless a
   breakpoint-suffixed class overrides it further down the cascade.

   Border COLOR utilities intentionally NOT ported -- Shadows already owns
   border color (border-red / border-blue / border-black / etc, see
   the Shadows cheat sheet), so re-adding Bootstrap's theme-color border
   utilities here would just create two competing systems for the same
   thing. Only BS5's structural border utilities (border, border-<side>,
   border-width) are included. Border utilities are NOT breakpoint-suffixed
   -- Bootstrap doesn't make them responsive either.

   This is meant to eventually grow into a drop-in Shadows utility
   stylesheet -- PLV is the pilot. Keep new utilities added here consistent
   with the conventions above.
   ============================================================================= */

/* Borders
   =========================================== */
.border {
	border-width: var(--plv-border-width) !important;
	border-style: solid !important;
	border-color: var(--plv-neutral-200);
}
.border-0 { border: 0 !important; }

.border-top {
	border-top-width: var(--plv-border-width) !important;
	border-top-style: solid !important;
	border-top-color: var(--plv-neutral-200);
}
.border-top-0 { border-top: 0 !important; }

.border-right {
	border-right-width: var(--plv-border-width) !important;
	border-right-style: solid !important;
	border-right-color: var(--plv-neutral-200);
}
.border-right-0 { border-right: 0 !important; }

.border-bottom {
	border-bottom-width: var(--plv-border-width) !important;
	border-bottom-style: solid !important;
	border-bottom-color: var(--plv-neutral-200);
}
.border-bottom-0 { border-bottom: 0 !important; }

.border-left {
	border-left-width: var(--plv-border-width) !important;
	border-left-style: solid !important;
	border-left-color: var(--plv-neutral-200);
}
.border-left-0 { border-left: 0 !important; }

.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }
.border-4 { border-width: 4px !important; }
.border-5 { border-width: 5px !important; }

/* Border colors -- PLV brand tokens
   =========================================== */
.border-white { border-color: var(--plv-white) !important; }
.border-black { border-color: var(--plv-black) !important; }
.border-neutral-100 { border-color: var(--plv-neutral-100) !important; }
.border-neutral-200 { border-color: var(--plv-neutral-200) !important; }
.border-gray-100 { border-color: var(--plv-gray-100) !important; }
.border-gray-300 { border-color: var(--plv-gray-300) !important; }
.border-gray-600 { border-color: var(--plv-gray-600) !important; }
.border-gray-900 { border-color: var(--plv-gray-900) !important; }
.border-blue-light { border-color: var(--plv-blue-light) !important; }
.border--blue { border-color: var(--plv-blue) !important; }
.border-blue-dark { border-color: var(--plv-blue-dark) !important; }
.border-accent { border-color: var(--plv-accent) !important; }

/* Spacing (margin & padding) -- Mobile First / base tier
   =========================================== */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.m-auto { margin: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-auto { margin-bottom: auto !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
.mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
.mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
.mx-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.mx-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Small Breakpoint [40em = 640px]
   =========================================== */
@media screen and (min-width: 40em) {
	.m-0--s { margin: 0 !important; }
	.m-1--s { margin: 0.25rem !important; }
	.m-2--s { margin: 0.5rem !important; }
	.m-3--s { margin: 1rem !important; }
	.m-4--s { margin: 1.5rem !important; }
	.m-5--s { margin: 3rem !important; }
	.m-auto--s { margin: auto !important; }

	.mt-0--s { margin-top: 0 !important; }
	.mt-1--s { margin-top: 0.25rem !important; }
	.mt-2--s { margin-top: 0.5rem !important; }
	.mt-3--s { margin-top: 1rem !important; }
	.mt-4--s { margin-top: 1.5rem !important; }
	.mt-5--s { margin-top: 3rem !important; }
	.mt-auto--s { margin-top: auto !important; }

	.mr-0--s { margin-right: 0 !important; }
	.mr-1--s { margin-right: 0.25rem !important; }
	.mr-2--s { margin-right: 0.5rem !important; }
	.mr-3--s { margin-right: 1rem !important; }
	.mr-4--s { margin-right: 1.5rem !important; }
	.mr-5--s { margin-right: 3rem !important; }
	.mr-auto--s { margin-right: auto !important; }

	.mb-0--s { margin-bottom: 0 !important; }
	.mb-1--s { margin-bottom: 0.25rem !important; }
	.mb-2--s { margin-bottom: 0.5rem !important; }
	.mb-3--s { margin-bottom: 1rem !important; }
	.mb-4--s { margin-bottom: 1.5rem !important; }
	.mb-5--s { margin-bottom: 3rem !important; }
	.mb-auto--s { margin-bottom: auto !important; }

	.ml-0--s { margin-left: 0 !important; }
	.ml-1--s { margin-left: 0.25rem !important; }
	.ml-2--s { margin-left: 0.5rem !important; }
	.ml-3--s { margin-left: 1rem !important; }
	.ml-4--s { margin-left: 1.5rem !important; }
	.ml-5--s { margin-left: 3rem !important; }
	.ml-auto--s { margin-left: auto !important; }

	.mx-0--s { margin-right: 0 !important; margin-left: 0 !important; }
	.mx-1--s { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
	.mx-2--s { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
	.mx-3--s { margin-right: 1rem !important; margin-left: 1rem !important; }
	.mx-4--s { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
	.mx-5--s { margin-right: 3rem !important; margin-left: 3rem !important; }
	.mx-auto--s { margin-right: auto !important; margin-left: auto !important; }

	.my-0--s { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-1--s { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-2--s { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-3--s { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-4--s { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-5--s { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-auto--s { margin-top: auto !important; margin-bottom: auto !important; }

	.p-0--s { padding: 0 !important; }
	.p-1--s { padding: 0.25rem !important; }
	.p-2--s { padding: 0.5rem !important; }
	.p-3--s { padding: 1rem !important; }
	.p-4--s { padding: 1.5rem !important; }
	.p-5--s { padding: 3rem !important; }

	.pt-0--s { padding-top: 0 !important; }
	.pt-1--s { padding-top: 0.25rem !important; }
	.pt-2--s { padding-top: 0.5rem !important; }
	.pt-3--s { padding-top: 1rem !important; }
	.pt-4--s { padding-top: 1.5rem !important; }
	.pt-5--s { padding-top: 3rem !important; }

	.pr-0--s { padding-right: 0 !important; }
	.pr-1--s { padding-right: 0.25rem !important; }
	.pr-2--s { padding-right: 0.5rem !important; }
	.pr-3--s { padding-right: 1rem !important; }
	.pr-4--s { padding-right: 1.5rem !important; }
	.pr-5--s { padding-right: 3rem !important; }

	.pb-0--s { padding-bottom: 0 !important; }
	.pb-1--s { padding-bottom: 0.25rem !important; }
	.pb-2--s { padding-bottom: 0.5rem !important; }
	.pb-3--s { padding-bottom: 1rem !important; }
	.pb-4--s { padding-bottom: 1.5rem !important; }
	.pb-5--s { padding-bottom: 3rem !important; }

	.pl-0--s { padding-left: 0 !important; }
	.pl-1--s { padding-left: 0.25rem !important; }
	.pl-2--s { padding-left: 0.5rem !important; }
	.pl-3--s { padding-left: 1rem !important; }
	.pl-4--s { padding-left: 1.5rem !important; }
	.pl-5--s { padding-left: 3rem !important; }

	.px-0--s { padding-right: 0 !important; padding-left: 0 !important; }
	.px-1--s { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
	.px-2--s { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
	.px-3--s { padding-right: 1rem !important; padding-left: 1rem !important; }
	.px-4--s { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
	.px-5--s { padding-right: 3rem !important; padding-left: 3rem !important; }

	.py-0--s { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-1--s { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-2--s { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-3--s { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-4--s { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-5--s { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* Medium Breakpoint [48em = 768px]
   =========================================== */
@media screen and (min-width: 48em) {
	.m-0--m { margin: 0 !important; }
	.m-1--m { margin: 0.25rem !important; }
	.m-2--m { margin: 0.5rem !important; }
	.m-3--m { margin: 1rem !important; }
	.m-4--m { margin: 1.5rem !important; }
	.m-5--m { margin: 3rem !important; }
	.m-auto--m { margin: auto !important; }

	.mt-0--m { margin-top: 0 !important; }
	.mt-1--m { margin-top: 0.25rem !important; }
	.mt-2--m { margin-top: 0.5rem !important; }
	.mt-3--m { margin-top: 1rem !important; }
	.mt-4--m { margin-top: 1.5rem !important; }
	.mt-5--m { margin-top: 3rem !important; }
	.mt-auto--m { margin-top: auto !important; }

	.mr-0--m { margin-right: 0 !important; }
	.mr-1--m { margin-right: 0.25rem !important; }
	.mr-2--m { margin-right: 0.5rem !important; }
	.mr-3--m { margin-right: 1rem !important; }
	.mr-4--m { margin-right: 1.5rem !important; }
	.mr-5--m { margin-right: 3rem !important; }
	.mr-auto--m { margin-right: auto !important; }

	.mb-0--m { margin-bottom: 0 !important; }
	.mb-1--m { margin-bottom: 0.25rem !important; }
	.mb-2--m { margin-bottom: 0.5rem !important; }
	.mb-3--m { margin-bottom: 1rem !important; }
	.mb-4--m { margin-bottom: 1.5rem !important; }
	.mb-5--m { margin-bottom: 3rem !important; }
	.mb-auto--m { margin-bottom: auto !important; }

	.ml-0--m { margin-left: 0 !important; }
	.ml-1--m { margin-left: 0.25rem !important; }
	.ml-2--m { margin-left: 0.5rem !important; }
	.ml-3--m { margin-left: 1rem !important; }
	.ml-4--m { margin-left: 1.5rem !important; }
	.ml-5--m { margin-left: 3rem !important; }
	.ml-auto--m { margin-left: auto !important; }

	.mx-0--m { margin-right: 0 !important; margin-left: 0 !important; }
	.mx-1--m { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
	.mx-2--m { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
	.mx-3--m { margin-right: 1rem !important; margin-left: 1rem !important; }
	.mx-4--m { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
	.mx-5--m { margin-right: 3rem !important; margin-left: 3rem !important; }
	.mx-auto--m { margin-right: auto !important; margin-left: auto !important; }

	.my-0--m { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-1--m { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-2--m { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-3--m { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-4--m { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-5--m { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-auto--m { margin-top: auto !important; margin-bottom: auto !important; }

	.p-0--m { padding: 0 !important; }
	.p-1--m { padding: 0.25rem !important; }
	.p-2--m { padding: 0.5rem !important; }
	.p-3--m { padding: 1rem !important; }
	.p-4--m { padding: 1.5rem !important; }
	.p-5--m { padding: 3rem !important; }

	.pt-0--m { padding-top: 0 !important; }
	.pt-1--m { padding-top: 0.25rem !important; }
	.pt-2--m { padding-top: 0.5rem !important; }
	.pt-3--m { padding-top: 1rem !important; }
	.pt-4--m { padding-top: 1.5rem !important; }
	.pt-5--m { padding-top: 3rem !important; }

	.pr-0--m { padding-right: 0 !important; }
	.pr-1--m { padding-right: 0.25rem !important; }
	.pr-2--m { padding-right: 0.5rem !important; }
	.pr-3--m { padding-right: 1rem !important; }
	.pr-4--m { padding-right: 1.5rem !important; }
	.pr-5--m { padding-right: 3rem !important; }

	.pb-0--m { padding-bottom: 0 !important; }
	.pb-1--m { padding-bottom: 0.25rem !important; }
	.pb-2--m { padding-bottom: 0.5rem !important; }
	.pb-3--m { padding-bottom: 1rem !important; }
	.pb-4--m { padding-bottom: 1.5rem !important; }
	.pb-5--m { padding-bottom: 3rem !important; }

	.pl-0--m { padding-left: 0 !important; }
	.pl-1--m { padding-left: 0.25rem !important; }
	.pl-2--m { padding-left: 0.5rem !important; }
	.pl-3--m { padding-left: 1rem !important; }
	.pl-4--m { padding-left: 1.5rem !important; }
	.pl-5--m { padding-left: 3rem !important; }

	.px-0--m { padding-right: 0 !important; padding-left: 0 !important; }
	.px-1--m { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
	.px-2--m { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
	.px-3--m { padding-right: 1rem !important; padding-left: 1rem !important; }
	.px-4--m { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
	.px-5--m { padding-right: 3rem !important; padding-left: 3rem !important; }

	.py-0--m { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-1--m { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-2--m { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-3--m { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-4--m { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-5--m { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* Large Breakpoint [60em = 960px]
   =========================================== */
@media screen and (min-width: 60em) {
	.m-0--l { margin: 0 !important; }
	.m-1--l { margin: 0.25rem !important; }
	.m-2--l { margin: 0.5rem !important; }
	.m-3--l { margin: 1rem !important; }
	.m-4--l { margin: 1.5rem !important; }
	.m-5--l { margin: 3rem !important; }
	.m-auto--l { margin: auto !important; }

	.mt-0--l { margin-top: 0 !important; }
	.mt-1--l { margin-top: 0.25rem !important; }
	.mt-2--l { margin-top: 0.5rem !important; }
	.mt-3--l { margin-top: 1rem !important; }
	.mt-4--l { margin-top: 1.5rem !important; }
	.mt-5--l { margin-top: 3rem !important; }
	.mt-auto--l { margin-top: auto !important; }

	.mr-0--l { margin-right: 0 !important; }
	.mr-1--l { margin-right: 0.25rem !important; }
	.mr-2--l { margin-right: 0.5rem !important; }
	.mr-3--l { margin-right: 1rem !important; }
	.mr-4--l { margin-right: 1.5rem !important; }
	.mr-5--l { margin-right: 3rem !important; }
	.mr-auto--l { margin-right: auto !important; }

	.mb-0--l { margin-bottom: 0 !important; }
	.mb-1--l { margin-bottom: 0.25rem !important; }
	.mb-2--l { margin-bottom: 0.5rem !important; }
	.mb-3--l { margin-bottom: 1rem !important; }
	.mb-4--l { margin-bottom: 1.5rem !important; }
	.mb-5--l { margin-bottom: 3rem !important; }
	.mb-auto--l { margin-bottom: auto !important; }

	.ml-0--l { margin-left: 0 !important; }
	.ml-1--l { margin-left: 0.25rem !important; }
	.ml-2--l { margin-left: 0.5rem !important; }
	.ml-3--l { margin-left: 1rem !important; }
	.ml-4--l { margin-left: 1.5rem !important; }
	.ml-5--l { margin-left: 3rem !important; }
	.ml-auto--l { margin-left: auto !important; }

	.mx-0--l { margin-right: 0 !important; margin-left: 0 !important; }
	.mx-1--l { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
	.mx-2--l { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
	.mx-3--l { margin-right: 1rem !important; margin-left: 1rem !important; }
	.mx-4--l { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
	.mx-5--l { margin-right: 3rem !important; margin-left: 3rem !important; }
	.mx-auto--l { margin-right: auto !important; margin-left: auto !important; }

	.my-0--l { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-1--l { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-2--l { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-3--l { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-4--l { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-5--l { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-auto--l { margin-top: auto !important; margin-bottom: auto !important; }

	.p-0--l { padding: 0 !important; }
	.p-1--l { padding: 0.25rem !important; }
	.p-2--l { padding: 0.5rem !important; }
	.p-3--l { padding: 1rem !important; }
	.p-4--l { padding: 1.5rem !important; }
	.p-5--l { padding: 3rem !important; }

	.pt-0--l { padding-top: 0 !important; }
	.pt-1--l { padding-top: 0.25rem !important; }
	.pt-2--l { padding-top: 0.5rem !important; }
	.pt-3--l { padding-top: 1rem !important; }
	.pt-4--l { padding-top: 1.5rem !important; }
	.pt-5--l { padding-top: 3rem !important; }

	.pr-0--l { padding-right: 0 !important; }
	.pr-1--l { padding-right: 0.25rem !important; }
	.pr-2--l { padding-right: 0.5rem !important; }
	.pr-3--l { padding-right: 1rem !important; }
	.pr-4--l { padding-right: 1.5rem !important; }
	.pr-5--l { padding-right: 3rem !important; }

	.pb-0--l { padding-bottom: 0 !important; }
	.pb-1--l { padding-bottom: 0.25rem !important; }
	.pb-2--l { padding-bottom: 0.5rem !important; }
	.pb-3--l { padding-bottom: 1rem !important; }
	.pb-4--l { padding-bottom: 1.5rem !important; }
	.pb-5--l { padding-bottom: 3rem !important; }

	.pl-0--l { padding-left: 0 !important; }
	.pl-1--l { padding-left: 0.25rem !important; }
	.pl-2--l { padding-left: 0.5rem !important; }
	.pl-3--l { padding-left: 1rem !important; }
	.pl-4--l { padding-left: 1.5rem !important; }
	.pl-5--l { padding-left: 3rem !important; }

	.px-0--l { padding-right: 0 !important; padding-left: 0 !important; }
	.px-1--l { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
	.px-2--l { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
	.px-3--l { padding-right: 1rem !important; padding-left: 1rem !important; }
	.px-4--l { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
	.px-5--l { padding-right: 3rem !important; padding-left: 3rem !important; }

	.py-0--l { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-1--l { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-2--l { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-3--l { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-4--l { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-5--l { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* Extra-Large Breakpoint [75em = 1200px]
   =========================================== */
@media screen and (min-width: 75em) {
	.m-0--xl { margin: 0 !important; }
	.m-1--xl { margin: 0.25rem !important; }
	.m-2--xl { margin: 0.5rem !important; }
	.m-3--xl { margin: 1rem !important; }
	.m-4--xl { margin: 1.5rem !important; }
	.m-5--xl { margin: 3rem !important; }
	.m-auto--xl { margin: auto !important; }

	.mt-0--xl { margin-top: 0 !important; }
	.mt-1--xl { margin-top: 0.25rem !important; }
	.mt-2--xl { margin-top: 0.5rem !important; }
	.mt-3--xl { margin-top: 1rem !important; }
	.mt-4--xl { margin-top: 1.5rem !important; }
	.mt-5--xl { margin-top: 3rem !important; }
	.mt-auto--xl { margin-top: auto !important; }

	.mr-0--xl { margin-right: 0 !important; }
	.mr-1--xl { margin-right: 0.25rem !important; }
	.mr-2--xl { margin-right: 0.5rem !important; }
	.mr-3--xl { margin-right: 1rem !important; }
	.mr-4--xl { margin-right: 1.5rem !important; }
	.mr-5--xl { margin-right: 3rem !important; }
	.mr-auto--xl { margin-right: auto !important; }

	.mb-0--xl { margin-bottom: 0 !important; }
	.mb-1--xl { margin-bottom: 0.25rem !important; }
	.mb-2--xl { margin-bottom: 0.5rem !important; }
	.mb-3--xl { margin-bottom: 1rem !important; }
	.mb-4--xl { margin-bottom: 1.5rem !important; }
	.mb-5--xl { margin-bottom: 3rem !important; }
	.mb-auto--xl { margin-bottom: auto !important; }

	.ml-0--xl { margin-left: 0 !important; }
	.ml-1--xl { margin-left: 0.25rem !important; }
	.ml-2--xl { margin-left: 0.5rem !important; }
	.ml-3--xl { margin-left: 1rem !important; }
	.ml-4--xl { margin-left: 1.5rem !important; }
	.ml-5--xl { margin-left: 3rem !important; }
	.ml-auto--xl { margin-left: auto !important; }

	.mx-0--xl { margin-right: 0 !important; margin-left: 0 !important; }
	.mx-1--xl { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
	.mx-2--xl { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
	.mx-3--xl { margin-right: 1rem !important; margin-left: 1rem !important; }
	.mx-4--xl { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
	.mx-5--xl { margin-right: 3rem !important; margin-left: 3rem !important; }
	.mx-auto--xl { margin-right: auto !important; margin-left: auto !important; }

	.my-0--xl { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-1--xl { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-2--xl { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-3--xl { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-4--xl { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-5--xl { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-auto--xl { margin-top: auto !important; margin-bottom: auto !important; }

	.p-0--xl { padding: 0 !important; }
	.p-1--xl { padding: 0.25rem !important; }
	.p-2--xl { padding: 0.5rem !important; }
	.p-3--xl { padding: 1rem !important; }
	.p-4--xl { padding: 1.5rem !important; }
	.p-5--xl { padding: 3rem !important; }

	.pt-0--xl { padding-top: 0 !important; }
	.pt-1--xl { padding-top: 0.25rem !important; }
	.pt-2--xl { padding-top: 0.5rem !important; }
	.pt-3--xl { padding-top: 1rem !important; }
	.pt-4--xl { padding-top: 1.5rem !important; }
	.pt-5--xl { padding-top: 3rem !important; }

	.pr-0--xl { padding-right: 0 !important; }
	.pr-1--xl { padding-right: 0.25rem !important; }
	.pr-2--xl { padding-right: 0.5rem !important; }
	.pr-3--xl { padding-right: 1rem !important; }
	.pr-4--xl { padding-right: 1.5rem !important; }
	.pr-5--xl { padding-right: 3rem !important; }

	.pb-0--xl { padding-bottom: 0 !important; }
	.pb-1--xl { padding-bottom: 0.25rem !important; }
	.pb-2--xl { padding-bottom: 0.5rem !important; }
	.pb-3--xl { padding-bottom: 1rem !important; }
	.pb-4--xl { padding-bottom: 1.5rem !important; }
	.pb-5--xl { padding-bottom: 3rem !important; }

	.pl-0--xl { padding-left: 0 !important; }
	.pl-1--xl { padding-left: 0.25rem !important; }
	.pl-2--xl { padding-left: 0.5rem !important; }
	.pl-3--xl { padding-left: 1rem !important; }
	.pl-4--xl { padding-left: 1.5rem !important; }
	.pl-5--xl { padding-left: 3rem !important; }

	.px-0--xl { padding-right: 0 !important; padding-left: 0 !important; }
	.px-1--xl { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
	.px-2--xl { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
	.px-3--xl { padding-right: 1rem !important; padding-left: 1rem !important; }
	.px-4--xl { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
	.px-5--xl { padding-right: 3rem !important; padding-left: 3rem !important; }

	.py-0--xl { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-1--xl { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-2--xl { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-3--xl { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-4--xl { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-5--xl { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* Wide-Screen Breakpoint [90em = 1440px]
   =========================================== */
@media screen and (min-width: 90em) {
	.m-0--w { margin: 0 !important; }
	.m-1--w { margin: 0.25rem !important; }
	.m-2--w { margin: 0.5rem !important; }
	.m-3--w { margin: 1rem !important; }
	.m-4--w { margin: 1.5rem !important; }
	.m-5--w { margin: 3rem !important; }
	.m-auto--w { margin: auto !important; }

	.mt-0--w { margin-top: 0 !important; }
	.mt-1--w { margin-top: 0.25rem !important; }
	.mt-2--w { margin-top: 0.5rem !important; }
	.mt-3--w { margin-top: 1rem !important; }
	.mt-4--w { margin-top: 1.5rem !important; }
	.mt-5--w { margin-top: 3rem !important; }
	.mt-auto--w { margin-top: auto !important; }

	.mr-0--w { margin-right: 0 !important; }
	.mr-1--w { margin-right: 0.25rem !important; }
	.mr-2--w { margin-right: 0.5rem !important; }
	.mr-3--w { margin-right: 1rem !important; }
	.mr-4--w { margin-right: 1.5rem !important; }
	.mr-5--w { margin-right: 3rem !important; }
	.mr-auto--w { margin-right: auto !important; }

	.mb-0--w { margin-bottom: 0 !important; }
	.mb-1--w { margin-bottom: 0.25rem !important; }
	.mb-2--w { margin-bottom: 0.5rem !important; }
	.mb-3--w { margin-bottom: 1rem !important; }
	.mb-4--w { margin-bottom: 1.5rem !important; }
	.mb-5--w { margin-bottom: 3rem !important; }
	.mb-auto--w { margin-bottom: auto !important; }

	.ml-0--w { margin-left: 0 !important; }
	.ml-1--w { margin-left: 0.25rem !important; }
	.ml-2--w { margin-left: 0.5rem !important; }
	.ml-3--w { margin-left: 1rem !important; }
	.ml-4--w { margin-left: 1.5rem !important; }
	.ml-5--w { margin-left: 3rem !important; }
	.ml-auto--w { margin-left: auto !important; }

	.mx-0--w { margin-right: 0 !important; margin-left: 0 !important; }
	.mx-1--w { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
	.mx-2--w { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
	.mx-3--w { margin-right: 1rem !important; margin-left: 1rem !important; }
	.mx-4--w { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
	.mx-5--w { margin-right: 3rem !important; margin-left: 3rem !important; }
	.mx-auto--w { margin-right: auto !important; margin-left: auto !important; }

	.my-0--w { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-1--w { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
	.my-2--w { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
	.my-3--w { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-4--w { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-5--w { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-auto--w { margin-top: auto !important; margin-bottom: auto !important; }

	.p-0--w { padding: 0 !important; }
	.p-1--w { padding: 0.25rem !important; }
	.p-2--w { padding: 0.5rem !important; }
	.p-3--w { padding: 1rem !important; }
	.p-4--w { padding: 1.5rem !important; }
	.p-5--w { padding: 3rem !important; }

	.pt-0--w { padding-top: 0 !important; }
	.pt-1--w { padding-top: 0.25rem !important; }
	.pt-2--w { padding-top: 0.5rem !important; }
	.pt-3--w { padding-top: 1rem !important; }
	.pt-4--w { padding-top: 1.5rem !important; }
	.pt-5--w { padding-top: 3rem !important; }

	.pr-0--w { padding-right: 0 !important; }
	.pr-1--w { padding-right: 0.25rem !important; }
	.pr-2--w { padding-right: 0.5rem !important; }
	.pr-3--w { padding-right: 1rem !important; }
	.pr-4--w { padding-right: 1.5rem !important; }
	.pr-5--w { padding-right: 3rem !important; }

	.pb-0--w { padding-bottom: 0 !important; }
	.pb-1--w { padding-bottom: 0.25rem !important; }
	.pb-2--w { padding-bottom: 0.5rem !important; }
	.pb-3--w { padding-bottom: 1rem !important; }
	.pb-4--w { padding-bottom: 1.5rem !important; }
	.pb-5--w { padding-bottom: 3rem !important; }

	.pl-0--w { padding-left: 0 !important; }
	.pl-1--w { padding-left: 0.25rem !important; }
	.pl-2--w { padding-left: 0.5rem !important; }
	.pl-3--w { padding-left: 1rem !important; }
	.pl-4--w { padding-left: 1.5rem !important; }
	.pl-5--w { padding-left: 3rem !important; }

	.px-0--w { padding-right: 0 !important; padding-left: 0 !important; }
	.px-1--w { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
	.px-2--w { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
	.px-3--w { padding-right: 1rem !important; padding-left: 1rem !important; }
	.px-4--w { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
	.px-5--w { padding-right: 3rem !important; padding-left: 3rem !important; }

	.py-0--w { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-1--w { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
	.py-2--w { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.py-3--w { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-4--w { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-5--w { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}



/* Typography -- Inter over the Shadows system-ui stack, per the
   Inter-vs-DM-Sans decision that had been sitting open since early
   planning. Kept as a token rather than a bare font-family so it's a
   one-line change if this ever needs revisiting. */
:root {
	--plv-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

html {
	font-family: var(--plv-font-family);
}

/* ---------------------------------------------------------------------------
   Header -- message bar
   Consolidated, quiet utility strip -- dark navy, small uppercase
   micro-copy, restrained. Not meant to compete for attention with
   anything below it.
   --------------------------------------------------------------------------- */

.t-site-navigation {
   border-bottom: 2px solid #eaeaea;
 }

.t-site-header__message-bar {
	background-color: var(--plv-blue-dark);
	color: var(--plv-white);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	padding: 0.5rem 0;
	text-transform: uppercase;
}

.t-site-header__message-bar a {
	color: var(--plv-white);
	text-decoration: none;
}

.t-site-header__message-bar a:hover {
	color: var(--plv-blue-light);
}

.t-site-header__message-bar-segment {
	align-items: center;
	display: inline-flex;
	gap: 0.4em;
}

.t-site-header__message-bar-segment [class*="u-icon-"] {
	font-size: 0.9em;
}

.t-site-header__message-bar-divider {
	background-color: rgba(255, 255, 255, 0.25);
	display: inline-block;
	height: 0.85em;
	margin: 0 1rem;
	vertical-align: middle;
	width: 1px;
}

.t-site-header__message strong {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Header -- masthead
   --------------------------------------------------------------------------- */
.t-site-header__masthead {
	background-color: var(--plv-white);
	border-bottom: 1px solid var(--plv-neutral-200);
	font-size: 0.875rem;
	width: 100% !important;
	max-width: 100% !important;	
	position: sticky !important;
	top: 0;
	z-index: 200;
}


.t-site-header__logo {
	align-items: center;
	display: flex;
}

.t-site-header__logo-link {
	align-items: center;
	display: inline-flex;
	padding: 0.75rem 0;
}

.t-site-header__logo-link img {
	max-height: 3.25rem;
	width: auto;
}

/* Search -- the signature element of this masthead. Was fully
   transparent/borderless before (u-bg-transparent, u-border-none),
   easy to miss entirely -- removed those utility classes rather than
   fight them with specificity, and gave it real, deliberate presence
   instead. Flat corners throughout, on purpose -- no Newegg-style
   rounding anywhere in this build. */
.t-site-header__search-form {
	width: 100%;
}

.t-site-header__search-form .c-form-input {
	background-color: var(--plv-white);
	border: var(--plv-border-width) solid var(--plv-neutral-200);
	border-radius: 0;
	font-size: 0.875rem;
	padding: 0.5em 0.875em;
	transition: border-color 0.15s ease;
}

.t-site-header__search-form .c-form-input:focus {
	border-color: var(--plv-blue);
	outline: none;
}

.t-site-header__search-submit {
	background-color: var(--plv-blue-dark);
	border: var(--plv-border-width) solid var(--plv-blue-dark);
	border-left: none;
	border-radius: 0;
	color: var(--plv-white);
	padding: 0 1em;
	transition: background-color 0.15s ease;
}

.t-site-header__search-submit:hover {
	background-color: var(--plv-blue);
	border-color: var(--plv-blue);
}

/* Account / cart -- clean line-icon treatment, --plv-blue for
   interactive state instead of generic Shadows grays. No pill/rounded
   buttons here either. */
.t-site-header__masthead-links {
	align-items: center;
	display: flex;
	gap: 1.75rem;
	justify-content: flex-end;
}

.t-site-header__masthead-links > a,
.t-site-header__masthead-links > button {
	align-items: center;
	background: none;
	border: none;
	color: var(--plv-gray-900);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.4em;
	letter-spacing: 0.02em;
	padding: 0;
}

.t-site-header__masthead-links > a:hover,
.t-site-header__masthead-links > button:hover {
	color: var(--plv-blue);
}

.t-site-header__masthead-links [class*="u-icon-"] {
	color: var(--plv-blue);
	font-size: 1.25em;
}

.t-site-header__basket-link-quantity,
.t-site-header__basket-link-quantity--mobile {
	align-items: center;
	background-color: var(--plv-highlight);
	border-radius: 50%;
	color: var(--plv-white);
	display: inline-flex;
	font-size: 0.6875rem;
	font-weight: 700;
	height: 1.25em;
	justify-content: center;
	min-width: 1.25em;
	padding: 0 0.3em;
}

.t-site-header__basket-link--mobile {
	color: var(--plv-gray-900);
	position: relative;
}

.t-site-header__basket-link--mobile .u-icon-cart-empty {
	font-size: 1.5em;
}

.t-site-header__basket-link--mobile .t-site-header__basket-link-quantity--mobile {
	position: absolute;
	top: -0.4em;
	right: -0.6em;
}

/* =============================================================================
   MEGAMENU -- .c-megamenu component
   REPLACES the entire old "MEGAMENU — NAVSET-DRIVEN PANELS" +
   "SHOP BY CATEGORY" sections built on .c-navigation/.x-transfigure-
   navigation/.x-mega-panel. Wholesale replacement, not an addition --
   delete the old sections from plv.css and drop this in their place.

   REVISION 9 -- caret is back, redesigned. .c-megamenu__link is now a
   flex row (text on the left, caret pinned to the far right via
   justify-content: space-between) instead of the caret sitting right
   next to the text like the original version Scot had removed a few
   rounds back. The hard `.c-megamenu__carat { display: none !important; }`
   safety net from that removal is gone -- MVT now only renders the
   caret span when an item actually has children, so there's nothing
   to suppress.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Base scaffold
   --------------------------------------------------------------------------- */
.c-megamenu {
	position: relative;
}

.c-megamenu__wrap {
	display: flex;
	flex-direction: column;
}

.c-megamenu__content {
	width: 100%;
}

.c-megamenu__list,
.c-megamenu__panel,
.c-megamenu__column,
.c-megamenu__sublist,
.c-megamenu__auto-columns {
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-megamenu__list {
	display: flex;
	flex-wrap: wrap;
}

.c-megamenu__item {
    font-size: 1rem;
}

.c-megamenu__link {
	align-items: center;
	color: var(--plv-black);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	padding: 0.5em 1em;
	text-decoration: none !important;
}

.c-megamenu__link--highlight {
	color: var(--plv-highlight);
}

.c-megamenu__list > .c-megamenu__item > .c-megamenu__link {
	background-color: var(--plv-white);
	color: var(--plv-gray-900);
}

.c-megamenu__link--text {
	/* <span> variant for trigger-only items with no real destination. */
}

.c-megamenu__carat {
	flex-shrink: 0;
	margin-left: 0.75rem;
}

.c-megamenu__mobile-back {
	display: none;
}

.c-megamenu__mobile-back.is-visible {
	display: inline-block;
}

/* ---------------------------------------------------------------------------
   Mobile drill-down header -- title + close.
   --------------------------------------------------------------------------- */
.c-megamenu__panel-header {
	display: none;
}

.c-megamenu__panel-title {
	font-size: 1rem;
	font-weight: var(--plv-font-bold);
}

.c-megamenu__panel-close {
	background: var(--plv-white);
	border: var(--plv-border-width) solid var(--plv-neutral-200);
	border-radius: var(--plv-radius);
	cursor: pointer;
	line-height: 1;
	padding: 0.5rem 0.75rem;
}

/* ---------------------------------------------------------------------------
   Panel base -- hidden by default.
   --------------------------------------------------------------------------- */
.c-megamenu__panel,
.c-megamenu__column {
	background-color: var(--plv-white);
	border: var(--plv-border-width) solid var(--plv-neutral-200);
	box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
	display: none;
	font-weight: 400;
	margin: 0;
	padding: 1.5rem 2rem;
}


@media (min-width: 60em) {
	.c-megamenu {
		/* background-color: var(--plv-blue-light); */
	}

	.c-megamenu__item {
    	font-size: .8rem;
	}

	.c-megamenu__list > .c-megamenu__item > .c-megamenu__link {
		background-color: transparent;
		color: var(--plv-gray-900);
	}

	.c-megamenu__list > .c-megamenu__item > .c-megamenu__link:hover {
		background-image: linear-gradient(to right, currentColor 100%, transparent 100%);
		background-position: 10px 100%;
  
		background-repeat: no-repeat;
  /* Adjust this percentage to stop the underline before the carat */
  
		background-size: calc(100% - 44px) 1px; 
	}

	.c-megamenu__list > .c-megamenu__item > .c-megamenu__link--highlight {
		color: var(--plv-highlight);
	}

	.c-megamenu__panel {
		left: 0;
		min-width: 0;
		position: absolute;
		right: 0;
		top: 100%;
		white-space: normal;
		width: auto;
		z-index: 9999;
	}

	.c-megamenu__item--has-panel:hover > .c-megamenu__panel,
	.c-megamenu__item--has-panel:focus-within > .c-megamenu__panel,
	.c-megamenu__panel.is-open {
		display: block;
	}
}




/* ---------------------------------------------------------------------------
   Shop By Category -- 2-column catalog panel (desktop)
   --------------------------------------------------------------------------- */
@media (min-width: 60em) {
	.c-megamenu__panel--catalog {
		--megamenu-col1-width: 28rem;
		font-size: 0.875rem;
	}

	.c-megamenu__panel--catalog > .c-megamenu__item {
		margin-bottom: 0.375rem;
		width: var(--megamenu-col1-width);
	}

	.c-megamenu__panel--catalog > .c-megamenu__item > .c-megamenu__link {
		justify-content: flex-start;
		padding: 0.375em 0.75em;
		white-space: nowrap;
	}

	.c-megamenu__panel--catalog > .c-megamenu__item > .c-megamenu__link > .c-megamenu__carat {
		margin-left: 15px;
	}

	.c-megamenu__column {
		border-left: var(--plv-border-width) solid var(--plv-neutral-200);
		bottom: 0;
		column-count: 2;
		column-gap: 2rem;
		left: var(--megamenu-col1-width);
		padding: 1.5rem 2rem;
		position: absolute;
		right: 0;
		top: 0;
	}

	.c-megamenu__item:hover > .c-megamenu__column,
	.c-megamenu__item:focus-within > .c-megamenu__column,
	.c-megamenu__column.is-open {
		display: block;
	}

	.c-megamenu__column > .c-megamenu__item {
		break-inside: avoid;
		margin-bottom: 0.5rem;
	}

	.c-megamenu__column .c-megamenu__link {
		white-space: nowrap;
	}

	/* Level 3 -- always visible on desktop, no independent toggle, no
	   caret (leaf links only). */
	.c-megamenu__sublist {		
		padding-left: 2rem;
	}

	.c-megamenu__sublist .c-megamenu__link {
		color: var(--plv-text-muted);
		font-size: 0.8125rem;
		padding: 0.1875em 0;
	}

	.c-megamenu__sublist .c-megamenu__link:hover {
		color: var(--plv-black);
		text-decoration: underline;
	}
}

/* ---------------------------------------------------------------------------
   Panel-content link hover
   --------------------------------------------------------------------------- */
.c-megamenu__panel .c-megamenu__link:hover,
.c-megamenu__column .c-megamenu__link:hover {
			background-image: linear-gradient(to right, currentColor 100%, transparent 100%);
  
		background-position: 0px 100%;
  
		background-repeat: no-repeat;
  /* Adjust this percentage to stop the underline before the carat */
  
		background-size: calc(100% ) 1px; 
}

/* ---------------------------------------------------------------------------
   {cat} PATH -- category mega-CTA cards (Phase 1: name only)
   --------------------------------------------------------------------------- */
.c-megamenu__cat-card {
	background-color: var(--plv-neutral-100);
	border-radius: var(--plv-radius);
	display: block;
	padding: 2rem 1.5rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.c-megamenu__cat-card:hover {
	background-color: var(--plv-neutral-200);
}

.c-megamenu__cat-card-name {
	font-weight: var(--plv-font-bold);
}

.c-megamenu__cat-row {
	margin: 0 0 0 calc(-1 * var(--plv-spacing-unit));
}

@media (max-width: 59.999em) {
	.c-megamenu__cat-card {
		padding: 1rem;
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
   DEFAULT PATH -- no token, auto-column plain link list (Shop by Brand,
   Cloud Solutions, etc). Spacing matched to Shop By Category's column 2.
   --------------------------------------------------------------------------- */
.c-megamenu__auto-columns {
	column-gap: 2rem;
	columns: 12rem;
	font-size: 0.875rem;
}

.c-megamenu__auto-columns-item {
	break-inside: avoid;
	margin-bottom: 0.5rem;
}

.c-megamenu__auto-columns .c-megamenu__link {
	white-space: nowrap;
}

@media (max-width: 59.999em) {
	.c-megamenu__auto-columns {
		columns: 1;
	}
}

/* ---------------------------------------------------------------------------
   Mobile -- hamburger-gated, single fixed overlay.
   REVISION 12 -- whole menu hidden by default, shown as one full-viewport
   position:fixed overlay via .c-megamenu.is-open (toggled by the existing
   hamburger button -- no JS/markup changes needed there, it was already
   wired correctly, just had nothing CSS-side to show/hide against).
   Individual panels/columns are back to simple in-flow elements -- they
   don't need their own position:fixed anymore now that the single outer
   overlay handles that job. Previous per-panel position:fixed attempt is
   reverted; that's what caused the two-systems-fighting "crazy" result.

   REVISION 13 -- restored a chunk that went missing from this block during
   the transition-removal edit: the .c-megamenu__panel/.c-megamenu__column
   border/box-shadow/padding/width reset, the .c-megamenu__sublist hidden-
   by-default rule, and the item border-bottom divider rule. Their absence
   is what caused the "level 2/3 has a shadow, border, and too much padding"
   bug -- without the reset, the desktop base styling (border, box-shadow,
   padding: 1.5rem 2rem) was running unopposed on mobile. No transition
   properties here anymore by design -- fadeThenHide() in megamenu.js owns
   the close/recede animation inline now (height measured at runtime), so a
   stylesheet-level transition on these selectors is unused, not needed.
   --------------------------------------------------------------------------- */
@media (max-width: 59.999em) {
	.c-megamenu {
		display: none;
	}

	.c-megamenu.is-open {
		background-color: var(--plv-white);
		bottom: 0;
		display: block;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 9999;
	}

	.c-megamenu__wrap {
		height: 100%;
	}

	.c-megamenu__mobile-header {
		flex-shrink: 0;
	}

	.c-megamenu__content {
		flex: 1 1 auto;
		overflow-anchor: none;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.c-megamenu__panel,
	.c-megamenu__column {
		border: 0 none;
		box-shadow: none;
		padding: 0;
		width: 100%;
	}

	.c-megamenu__panel.is-open,
	.c-megamenu__column.is-open {
		display: block;
	}

	.c-megamenu__panel-header {
		align-items: center;
		display: flex;
		justify-content: space-between;
		padding: 1rem 1.5rem;
	}

	.c-megamenu__panel-close {
		font-size: 1.5rem;
	}

	.c-megamenu__list {
		flex-direction: column;
	}

	.c-megamenu__list > .c-megamenu__item,
	.c-megamenu__panel--catalog > .c-megamenu__item,
	.c-megamenu__column > .c-megamenu__item,
	.c-megamenu__auto-columns-item {
		border-bottom: var(--plv-border-width) solid var(--plv-neutral-200);
	}

	/* Level 3 -- collapsed by default, .is-open (JS) reveals it. */
	.c-megamenu__sublist {
		display: none;
		padding-left: 1rem;
	}

	.c-megamenu__sublist.is-open {
		display: block;
	}

	.c-megamenu__sublist .c-megamenu__link {
		color: var(--plv-text-muted);
		font-size: 0.8125rem;
		padding: 0.1875em 0 0.1875em 1rem;
	}

	.c-megamenu__item.is-active-drilldown > .c-megamenu__link {
		display: none;
	}

	.is-receded {
		display: none;
	}
}

/* c-button:hover just lightens up a button a little bit when  hovering - lots of room to grow if we need more control */
.c-button:hover {
	filter: brightness(1.1);
}