<?php
if (!defined("ROOT_PATH"))
{
	header("HTTP/1.1 403 Forbidden");
	exit;
}

class pjColorHelper
{
	public static function hexToRgb($hex)
	{
		$hex = ltrim((string) $hex, '#');
		if (strlen($hex) === 3)
		{
			$hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
		}
		return array(
			'r' => hexdec(substr($hex, 0, 2)),
			'g' => hexdec(substr($hex, 2, 2)),
			'b' => hexdec(substr($hex, 4, 2))
		);
	}

	public static function rgbToHex($r, $g, $b)
	{
		return sprintf('#%02x%02x%02x',
			max(0, min(255, (int) round($r))),
			max(0, min(255, (int) round($g))),
			max(0, min(255, (int) round($b)))
		);
	}

	public static function darken($hex, $percent = 15)
	{
		$rgb = self::hexToRgb($hex);
		$factor = 1 - ($percent / 100);
		return self::rgbToHex(
			$rgb['r'] * $factor,
			$rgb['g'] * $factor,
			$rgb['b'] * $factor
		);
	}

	public static function lighten($hex, $percent = 30)
	{
		$rgb = self::hexToRgb($hex);
		$factor = $percent / 100;
		return self::rgbToHex(
			$rgb['r'] + (255 - $rgb['r']) * $factor,
			$rgb['g'] + (255 - $rgb['g']) * $factor,
			$rgb['b'] + (255 - $rgb['b']) * $factor
		);
	}

	public static function ultraLight($hex)
	{
		return self::mixWithWhite($hex, 92);
	}

	public static function mixWithWhite($hex, $whitePercent = 90)
	{
		$rgb = self::hexToRgb($hex);
		$factor = $whitePercent / 100;
		return self::rgbToHex(
			$rgb['r'] + (255 - $rgb['r']) * $factor,
			$rgb['g'] + (255 - $rgb['g']) * $factor,
			$rgb['b'] + (255 - $rgb['b']) * $factor
		);
	}

	public static function rgba($hex, $alpha)
	{
		$rgb = self::hexToRgb($hex);
		return "rgba({$rgb['r']}, {$rgb['g']}, {$rgb['b']}, {$alpha})";
	}

	public static function isDark($hex)
	{
		$rgb = self::hexToRgb($hex);
		$luminance = (0.299 * $rgb['r'] + 0.587 * $rgb['g'] + 0.114 * $rgb['b']) / 255;
		return $luminance < 0.62;
	}

	public static function contrastColor($hex)
	{
		return self::isDark($hex) ? '#ffffff' : '#000000';
	}

	public static function generateCssVariables($brand, $accent, $text, $bg = '#ffffff', $price = '#0a5114', $pageBg = '#ffffff')
	{
		$brandDark = self::darken($brand, 18);
		$brandLight = self::lighten($brand, 35);
		$brandUltraLight = self::ultraLight($brand);
		$brandContrast = self::contrastColor($brand);
		$accentDark = self::darken($accent, 15);
		$accentLight = self::lighten($accent, 30);
		$textSecondary = self::lighten($text, 25);
		$textMuted = self::lighten($text, 45);
		$surfaceSubtle = ($bg === '#ffffff' || $bg === '#fff') ? self::mixWithWhite($brand, 97) : self::lighten($bg, 3);
		$borderColor = self::mixWithWhite($brand, 85);
		$borderColorHover = self::mixWithWhite($brand, 75);
		$isLightNeutralAccent = strtolower($accent) === '#f3f4f6';
		$chromeBg = $isLightNeutralAccent ? $accent : $bg;
		$chromeBorder = $isLightNeutralAccent ? '#e5e7eb' : $borderColor;
		$chromeText = $isLightNeutralAccent ? '#4b5563' : $text;
		$chromeHeading = $isLightNeutralAccent ? '#111827' : $text;
		$alphas = array(
			'06' => 0.06, '08' => 0.08, '10' => 0.10, '12' => 0.12,
			'14' => 0.14, '15' => 0.15, '18' => 0.18, '20' => 0.20,
			'22' => 0.22, '25' => 0.25, '30' => 0.30, '35' => 0.35
		);

		$css = "\n/* Dynamic theme overrides */\n:root {\n";
		$css .= "  --brandColor: {$brand};\n";
		$css .= "  --brandColorDark: {$brandDark};\n";
		$css .= "  --brandColorLight: {$brandLight};\n";
		$css .= "  --brandColorUltraLight: {$brandUltraLight};\n";
		$css .= "  --brandContrast: {$brandContrast};\n";
		$css .= "  --accentColor: {$accent};\n";
		$css .= "  --accentColorDark: {$accentDark};\n";
		$css .= "  --accentColorLight: {$accentLight};\n";
		$css .= "  --textPrimary: {$text};\n";
		$css .= "  --textSecondary: {$textSecondary};\n";
		$css .= "  --textMuted: {$textMuted};\n";
		$css .= "  --surfaceBase: {$bg};\n";
		$css .= "  --surfaceElevated: {$bg};\n";
		$css .= "  --surfaceSubtle: {$surfaceSubtle};\n";
		$css .= "  --borderColor: {$borderColor};\n";
		$css .= "  --borderColorHover: {$borderColorHover};\n";
		$css .= "  --chromeBg: {$chromeBg};\n";
		$css .= "  --chromeBorder: {$chromeBorder};\n";
		$css .= "  --chromeText: {$chromeText};\n";
		$css .= "  --chromeHeading: {$chromeHeading};\n";
		$css .= "  --priceColor: {$price};\n";
		$css .= "  --pageBackground: {$pageBg};\n";
		$css .= "  --backgroundColor: {$brand};\n";
		$css .= "  --backgroundAltColor: {$brandDark};\n";
		foreach ($alphas as $key => $alpha)
		{
			$css .= "  --brandAlpha{$key}: " . self::rgba($brand, $alpha) . ";\n";
		}
		$css .= "  --shadowSm: 0 1px 3px " . self::rgba($brand, 0.08) . ";\n";
		$css .= "  --shadowMd: 0 4px 12px " . self::rgba($brand, 0.10) . ";\n";
		$css .= "  --shadowLg: 0 8px 24px " . self::rgba($brand, 0.14) . ";\n";
		$css .= "  --shadowHover: 0 8px 30px " . self::rgba($brand, 0.18) . ";\n";
		$css .= "}\n";
		$css .= "[id^='pjWrapperShoppingCart_'], #pjWrapper { color: var(--textPrimary); }\n";
		$css .= "body:has([id^='pjWrapperShoppingCart_']) { background-color: var(--pageBackground); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scContainer, #pjWrapper .scContainer { background-color: var(--surfaceBase); color: var(--textPrimary); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] a, #pjWrapper a, [id^='pjWrapperShoppingCart_'] .pjScProductName a, [id^='pjWrapperShoppingCart_'] .scProductLink { color: var(--brandColor); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] a:hover, #pjWrapper a:hover, [id^='pjWrapperShoppingCart_'] .pjScProductName a:hover, [id^='pjWrapperShoppingCart_'] .scProductLink:hover { color: var(--brandColorDark); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScBtnPrimary, [id^='pjWrapperShoppingCart_'] .btn-primary, [id^='pjWrapperShoppingCart_'] .scButtonDark, [id^='pjWrapperShoppingCart_'] .scSelectorCheckout, [id^='pjWrapperShoppingCart_'] .scSelectorAdd2Cart, [id^='pjWrapperShoppingCart_'] .scSelectorButton.pjScBtnPrimary, #pjWrapper .pjScBtnPrimary, #pjWrapper .btn-primary, #pjWrapper .scButtonDark { background-color: var(--brandColor) !important; border-color: var(--brandColor) !important; color: var(--brandContrast) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScBtnPrimary:hover, [id^='pjWrapperShoppingCart_'] .pjScBtnPrimary:focus, [id^='pjWrapperShoppingCart_'] .btn-primary:hover, [id^='pjWrapperShoppingCart_'] .btn-primary:focus, [id^='pjWrapperShoppingCart_'] .scButtonDark:hover, [id^='pjWrapperShoppingCart_'] .scButtonDark:focus, #pjWrapper .pjScBtnPrimary:hover, #pjWrapper .btn-primary:hover, #pjWrapper .scButtonDark:hover { background-color: var(--brandColorDark) !important; border-color: var(--brandColorDark) !important; color: var(--brandContrast) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScBtnSecondary, [id^='pjWrapperShoppingCart_'] .btn-default, [id^='pjWrapperShoppingCart_'] .scButtonAdd2Favs, [id^='pjWrapperShoppingCart_'] .scButtonSend2Friend, [id^='pjWrapperShoppingCart_'] .sc-oh-action-btn, #pjWrapper .pjScBtnSecondary, #pjWrapper .btn-default { background-color: var(--surfaceElevated) !important; border-color: var(--borderColor) !important; color: var(--brandColor) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScBtnSecondary:hover, [id^='pjWrapperShoppingCart_'] .pjScBtnSecondary:focus, [id^='pjWrapperShoppingCart_'] .btn-default:hover, [id^='pjWrapperShoppingCart_'] .btn-default:focus, [id^='pjWrapperShoppingCart_'] .scButtonAdd2Favs:hover, [id^='pjWrapperShoppingCart_'] .scButtonSend2Friend:hover, [id^='pjWrapperShoppingCart_'] .sc-oh-action-btn:hover, #pjWrapper .pjScBtnSecondary:hover, #pjWrapper .btn-default:hover { background-color: var(--brandColorUltraLight) !important; border-color: var(--brandColor) !important; color: var(--brandColorDark) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScBtnPrimary, [id^='pjWrapperShoppingCart_'] .btn.pjScBtnPrimary, [id^='pjWrapperShoppingCart_'] button.pjScBtnPrimary, [id^='pjWrapperShoppingCart_'] a.pjScBtnPrimary, #pjWrapper .pjScBtnPrimary, #pjWrapper .btn.pjScBtnPrimary { background-color: var(--brandColor) !important; border-color: var(--brandColor) !important; color: var(--brandContrast) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScBtnPrimary:hover, [id^='pjWrapperShoppingCart_'] .btn.pjScBtnPrimary:hover, [id^='pjWrapperShoppingCart_'] button.pjScBtnPrimary:hover, [id^='pjWrapperShoppingCart_'] a.pjScBtnPrimary:hover, #pjWrapper .pjScBtnPrimary:hover, #pjWrapper .btn.pjScBtnPrimary:hover { background-color: var(--brandColorDark) !important; border-color: var(--brandColorDark) !important; color: var(--brandContrast) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScBtnApply, [id^='pjWrapperShoppingCart_'] .btn-info, [id^='pjWrapperShoppingCart_'] .sc-oh-action-btn--primary, [id^='pjWrapperShoppingCart_'] .pjScBtnReorder, #pjWrapper .pjScBtnApply, #pjWrapper .btn-info { background-color: var(--accentColor) !important; border-color: var(--accentColor) !important; color: " . self::contrastColor($accent) . " !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScBtnApply:hover, [id^='pjWrapperShoppingCart_'] .btn-info:hover, [id^='pjWrapperShoppingCart_'] .sc-oh-action-btn--primary:hover, [id^='pjWrapperShoppingCart_'] .pjScBtnReorder:hover, #pjWrapper .pjScBtnApply:hover, #pjWrapper .btn-info:hover { background-color: var(--accentColorDark) !important; border-color: var(--accentColorDark) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScBtnLink, [id^='pjWrapperShoppingCart_'] .btn-link, #pjWrapper .pjScBtnLink, #pjWrapper .btn-link { color: var(--brandColor) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .navbar-default, [id^='pjWrapperShoppingCart_'] .pjScHeader, [id^='pjWrapperShoppingCart_'] .scContainer .pjScHeader, #pjWrapper .navbar-default, #pjWrapper .pjScHeader, #pjWrapper .scContainer .pjScHeader { background-color: var(--chromeBg) !important; border-color: var(--chromeBorder) !important; color: var(--chromeText) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scContainer .pjScHeader .scStoreName, [id^='pjWrapperShoppingCart_'] .scContainer .pjScHeader a, #pjWrapper .scContainer .pjScHeader .scStoreName, #pjWrapper .scContainer .pjScHeader a { color: var(--chromeText) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scContainer .pjScHeader .scStoreName, #pjWrapper .scContainer .pjScHeader .scStoreName { color: var(--chromeHeading) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scContainer .pjScHeader .scStoreName:hover, [id^='pjWrapperShoppingCart_'] .scContainer .pjScHeader a:hover, #pjWrapper .scContainer .pjScHeader .scStoreName:hover, #pjWrapper .scContainer .pjScHeader a:hover { background-color: transparent !important; color: var(--brandColor) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scContainer .scSearchForm, [id^='pjWrapperShoppingCart_'] .scContainer .btn-group.pull-right, #pjWrapper .scContainer .scSearchForm, #pjWrapper .scContainer .btn-group.pull-right { border-color: var(--chromeBorder) !important; background-color: var(--surfaceElevated) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scContainer .scSearchForm .input-group-btn .btn, #pjWrapper .scContainer .scSearchForm .input-group-btn .btn { background-color: var(--surfaceElevated) !important; border-color: var(--chromeBorder) !important; color: var(--chromeText) !important; }\n";
		$css .= ":is(#pjWrapperShoppingCart_1,#pjWrapperShoppingCart_2,#pjWrapperShoppingCart_3,#pjWrapperShoppingCart_4,#pjWrapperShoppingCart_5) .scContainer .scSearchForm .input-group-btn .btn { background-color: var(--surfaceElevated) !important; border-color: var(--chromeBorder) !important; color: var(--chromeText) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scContainer .scSearchForm .input-group-btn .btn:hover, #pjWrapper .scContainer .scSearchForm .input-group-btn .btn:hover { background-color: var(--surfaceElevated) !important; color: var(--brandColor) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scContainer .btn-group.pull-right .btn, #pjWrapper .scContainer .btn-group.pull-right .btn { color: var(--chromeText) !important; background-color: transparent !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scContainer .btn-group.pull-right .btn strong, [id^='pjWrapperShoppingCart_'] .scContainer .btn-group.pull-right .btn .text-warning, #pjWrapper .scContainer .btn-group.pull-right .btn strong, #pjWrapper .scContainer .btn-group.pull-right .btn .text-warning { color: var(--chromeHeading) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .navbar-default .navbar-nav > .active > a, [id^='pjWrapperShoppingCart_'] .navbar-default .navbar-nav > .active > a:hover, [id^='pjWrapperShoppingCart_'] .navbar-default .navbar-nav > .active > a:focus, #pjWrapper .navbar-default .navbar-nav > .active > a { background-color: var(--brandColorUltraLight); color: var(--brandColorDark); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .dropdown-menu > .active > a, [id^='pjWrapperShoppingCart_'] .dropdown-menu > .active > a:hover, [id^='pjWrapperShoppingCart_'] .dropdown-menu > li > a:hover, #pjWrapper .dropdown-menu > .active > a, #pjWrapper .dropdown-menu > li > a:hover { background-color: var(--brandColorUltraLight); color: var(--brandColorDark); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .panel, [id^='pjWrapperShoppingCart_'] .table, [id^='pjWrapperShoppingCart_'] .sc-oh-card, [id^='pjWrapperShoppingCart_'] .sc-oh-table, #pjWrapper .panel, #pjWrapper .table { background-color: var(--surfaceElevated); border-color: var(--borderColor); color: var(--textPrimary); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .panel-heading, [id^='pjWrapperShoppingCart_'] .table > thead > tr > th, [id^='pjWrapperShoppingCart_'] .sc-oh-table thead th, #pjWrapper .panel-heading, #pjWrapper .table > thead > tr > th { background-color: var(--surfaceSubtle); border-color: var(--borderColor); color: var(--textPrimary); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .table > tbody > tr > td, [id^='pjWrapperShoppingCart_'] .table > tfoot > tr > td, [id^='pjWrapperShoppingCart_'] .sc-oh-table td, #pjWrapper .table > tbody > tr > td, #pjWrapper .table > tfoot > tr > td { border-color: var(--borderColor); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .form-control, #pjWrapper .form-control { background-color: var(--surfaceElevated); border-color: var(--borderColor); color: var(--textPrimary); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .form-control:focus, #pjWrapper .form-control:focus { border-color: var(--brandColor); box-shadow: 0 0 0 3px var(--brandAlpha15); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .input-group-addon, #pjWrapper .input-group-addon { background-color: var(--surfaceSubtle); border-color: var(--borderColor); color: var(--brandColor); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scSelectorPrice, [id^='pjWrapperShoppingCart_'] .pjScProductPrice, [id^='pjWrapperShoppingCart_'] .scProductPrice, [id^='pjWrapperShoppingCart_'] .pjScCartPrice, [id^='pjWrapperShoppingCart_'] .sc-oh-total, #pjWrapper .scSelectorPrice, #pjWrapper .pjScProductPrice, #pjWrapper .scProductPrice, #pjWrapper .pjScCartPrice { color: var(--priceColor) !important; }\n";
		// Keep the price readable on hover. Generic link/card hover styles could
		// otherwise recolor the price (or text inside a hovered link) so it blends
		// into the background. Force the price colour for the price elements
		// themselves on hover, and for prices nested inside any hovered ancestor.
		$css .= "[id^='pjWrapperShoppingCart_'] .scSelectorPrice:hover, [id^='pjWrapperShoppingCart_'] .pjScProductPrice:hover, [id^='pjWrapperShoppingCart_'] .scProductPrice:hover, [id^='pjWrapperShoppingCart_'] .pjScCartPrice:hover, [id^='pjWrapperShoppingCart_'] .pjScCheckoutPrice:hover, [id^='pjWrapperShoppingCart_'] .pjScFavsProductPrice:hover, [id^='pjWrapperShoppingCart_'] .sc-oh-total:hover, [id^='pjWrapperShoppingCart_'] :hover > .scSelectorPrice, [id^='pjWrapperShoppingCart_'] :hover > .pjScProductPrice, [id^='pjWrapperShoppingCart_'] :hover > .scProductPrice, [id^='pjWrapperShoppingCart_'] :hover > .pjScCartPrice, [id^='pjWrapperShoppingCart_'] :hover > .pjScCheckoutPrice, [id^='pjWrapperShoppingCart_'] :hover > .pjScFavsProductPrice, [id^='pjWrapperShoppingCart_'] a:hover .pjScProductPrice, [id^='pjWrapperShoppingCart_'] a:hover .scSelectorPrice, [id^='pjWrapperShoppingCart_'] a:hover .pjScCartPrice, [id^='pjWrapperShoppingCart_'] a:hover .pjScFavsProductPrice, #pjWrapper .scSelectorPrice:hover, #pjWrapper .pjScProductPrice:hover, #pjWrapper .scProductPrice:hover, #pjWrapper .pjScCartPrice:hover, #pjWrapper .pjScCheckoutPrice:hover, #pjWrapper .pjScFavsProductPrice:hover, #pjWrapper a:hover .pjScProductPrice, #pjWrapper a:hover .scSelectorPrice { color: var(--priceColor) !important; background-color: transparent !important; }\n";
		// Secondary/outline buttons (incl. the header cart summary button) get a
		// pale brand-tinted background on hover. Their inner text spans have their
		// own hardcoded orange colours (e.g. .text-warning), which then blend into
		// that pale background and become unreadable. Force all descendant text in
		// hovered secondary buttons to the dark brand colour so it stays legible.
		$css .= "[id^='pjWrapperShoppingCart_'] .scSelectorViewCart:hover, [id^='pjWrapperShoppingCart_'] .scSelectorViewCart:hover *, [id^='pjWrapperShoppingCart_'] .btn-default:hover *, [id^='pjWrapperShoppingCart_'] .pjScBtnSecondary:hover *, [id^='pjWrapperShoppingCart_'] .scButtonAdd2Favs:hover *, #pjWrapper .scSelectorViewCart:hover, #pjWrapper .scSelectorViewCart:hover *, #pjWrapper .btn-default:hover *, #pjWrapper .pjScBtnSecondary:hover * { color: var(--brandColorDark) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .label-primary, [id^='pjWrapperShoppingCart_'] .badge, [id^='pjWrapperShoppingCart_'] .sc-product-badge, [id^='pjWrapperShoppingCart_'] .sc-oh-status, #pjWrapper .label-primary, #pjWrapper .badge { background-color: var(--brandColor) !important; color: var(--brandContrast) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .nav-tabs > li.active > a, [id^='pjWrapperShoppingCart_'] .nav-tabs > li.active > a:hover, [id^='pjWrapperShoppingCart_'] .nav-tabs > li.active > a:focus, #pjWrapper .nav-tabs > li.active > a { color: var(--brandColor); border-color: var(--borderColor); border-bottom-color: var(--surfaceElevated); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pagination > .active > a, [id^='pjWrapperShoppingCart_'] .pagination > .active > span, #pjWrapper .pagination > .active > a, #pjWrapper .pagination > .active > span { background-color: var(--brandColor); border-color: var(--brandColor); color: var(--brandContrast); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .scSelectorRemoveFromCart, [id^='pjWrapperShoppingCart_'] .scSelectorRemoveFromFavs, #pjWrapper .scSelectorRemoveFromCart, #pjWrapper .scSelectorRemoveFromFavs { color: var(--accentColor) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .alert-info, #pjWrapper .alert-info { background-color: var(--brandColorUltraLight); border-color: var(--borderColor); color: var(--brandColorDark); }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .text-danger, [id^='pjWrapperShoppingCart_'] .alert-danger, #pjWrapper .text-danger, #pjWrapper .alert-danger { color: #b91c1c; }\n";

		/* Storefront page titles use the Bootstrap .text-primary class which would
		   otherwise render the default Bootstrap blue (#337ab7). Force them to the
		   theme text colour so every page heading (Profile, Cart, Checkout, etc.) is
		   consistent and matches the configured palette. */
		$css .= "[id^='pjWrapperShoppingCart_'] .text-primary, #pjWrapper .text-primary { color: var(--textPrimary) !important; }\n";

		/* Category filter pills (All / categories): outlined pills rather than a
		   solid brand fill. Active pill gets a brand-coloured outline + text. */
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScFilterCat > li > a, #pjWrapper .pjScFilterCat > li > a { background-color: var(--surfaceElevated) !important; border: 1px solid var(--chromeBorder) !important; color: var(--chromeText) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScFilterCat > li > a:hover, [id^='pjWrapperShoppingCart_'] .pjScFilterCat > li > a:focus, #pjWrapper .pjScFilterCat > li > a:hover, #pjWrapper .pjScFilterCat > li > a:focus { background-color: var(--brandColorUltraLight) !important; border-color: var(--brandColor) !important; color: var(--brandColorDark) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScFilterCat > li.active > a, [id^='pjWrapperShoppingCart_'] .pjScFilterCat > li.active > a:hover, [id^='pjWrapperShoppingCart_'] .pjScFilterCat > li.active > a:focus, #pjWrapper .pjScFilterCat > li.active > a { background-color: var(--surfaceElevated) !important; border: 1px solid var(--brandColor) !important; color: var(--brandColor) !important; }\n";

		/* Order-by dropdown: neutral outlined pill (not a solid brand button). */
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScSort .dropdown-toggle, [id^='pjWrapperShoppingCart_'] .pjScSort .btn.pjScBtnPrimary, #pjWrapper .pjScSort .dropdown-toggle { background-color: var(--surfaceElevated) !important; border-color: var(--chromeBorder) !important; color: var(--chromeText) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScSort .dropdown-toggle:hover, [id^='pjWrapperShoppingCart_'] .pjScSort .dropdown-toggle:focus, [id^='pjWrapperShoppingCart_'] .pjScSort.open .dropdown-toggle, #pjWrapper .pjScSort .dropdown-toggle:hover { background-color: var(--brandColorUltraLight) !important; border-color: var(--brandColor) !important; color: var(--brandColorDark) !important; }\n";

		/* Product detail: light-grey panel wrapping the right-hand column, with the
		   options form as a white card inside it, and a full-width Buy Now button. */
		/* Neutralise the Bootstrap row's negative gutter margins on the product-detail
		   row so the grey side panel's background doesn't bleed 15px past the page
		   container; keep the image flush to the container's left edge. */
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails > .row, #pjWrapper .pjScProductDetails > .row { margin-left: 0 !important; margin-right: 0 !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails > .row > .col-md-7, #pjWrapper .pjScProductDetails > .row > .col-md-7 { padding-left: 0 !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails .col-md-5, #pjWrapper .pjScProductDetails .col-md-5 { background-color: var(--accentColor); border-radius: 12px; padding: 24px; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails .pjScProductFormContainer, #pjWrapper .pjScProductDetails .pjScProductFormContainer { background-color: var(--surfaceElevated) !important; border-color: var(--borderColor) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails .scSelectorAdd2Cart, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .pjScProductFormContainer .btn-primary, #pjWrapper .pjScProductDetails .scSelectorAdd2Cart { display: block; width: 100%; padding: 12px 16px; font-size: 16px; border-radius: 8px !important; }\n";
		/* Qty stepper buttons: neutral dark-grey controls (not brand orange). */
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails .scSelectorSpin .btn, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .scSelectorSpin .btn:hover, #pjWrapper .pjScProductDetails .scSelectorSpin .btn { color: var(--chromeText) !important; background-color: var(--surfaceElevated) !important; }\n";

		/* Product-detail social/share row sits inside the white options card: keep it
		   the same white as the card (not a tinted panel-footer), divided by a hair
		   line, with the bottom corners matching the 12px card radius. */
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails .pjScProductFormContainer .panel-footer, #pjWrapper .pjScProductDetails .pjScProductFormContainer .panel-footer { background-color: var(--surfaceElevated) !important; border-top: 1px solid var(--borderColor) !important; border-radius: 0 0 12px 12px !important; }\n";

		/* Product-detail social/share row: neutral dark-grey links & buttons (with a
		   brand-coloured hover) instead of solid brand orange, matching the design. */
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer .btn, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer a, #pjWrapper .pjScProductDetails .panel-footer .btn, #pjWrapper .pjScProductDetails .panel-footer a { background-color: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; color: var(--chromeText) !important; }\n";
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer .btn:hover, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer .btn:focus, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer a:hover, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer a:focus, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer .btn:hover *, #pjWrapper .pjScProductDetails .panel-footer .btn:hover, #pjWrapper .pjScProductDetails .panel-footer a:hover { background-color: transparent !important; border: 0 !important; color: var(--brandColor) !important; }\n";
		/* Kill the leftover \"heart pop\" zoom + faded opacity on the favourite / send
		   buttons so every share link hovers identically (colour change only). */
		$css .= "[id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer .scButtonAdd2Favs, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer .scButtonSend2Friend, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer .scButtonAdd2Favs:hover, [id^='pjWrapperShoppingCart_'] .pjScProductDetails .panel-footer .scButtonSend2Friend:hover, #pjWrapper .pjScProductDetails .panel-footer .scButtonAdd2Favs, #pjWrapper .pjScProductDetails .panel-footer .scButtonSend2Friend, #pjWrapper .pjScProductDetails .panel-footer .scButtonAdd2Favs:hover, #pjWrapper .pjScProductDetails .panel-footer .scButtonSend2Friend:hover { transform: none !important; opacity: 1 !important; }\n";

		return $css;
	}

	public static function isValidHex($hex)
	{
		return is_string($hex) && preg_match('/^#[0-9a-fA-F]{6}$/', $hex);
	}
}
?>
