jakevan/jvb-theme.git

			@@ -6,8 +6,8 @@
			Description: A base theme for Jake Van clients
			Requires at least: 6.4
			Tested up to: 6.4
			Requires PHP: 7.0
			Version: 1.279
			Requires PHP: 8.0
			Version: 1.6.0
			License: GNU General Public License v2 or later
			License URI: http://www.gnu.org/licenses/gpl-2.0.html
			Text Domain: jv
			@@ -15,324 +15,266 @@
			/*************************************************************
			VARIABLES
			*************************************************************/
			:root{
			/* Layout */
			--narrow: min(500px, 50vw);
			--maxWidth: min(768px, 65vw);
			--alignWide: min(1024px, 90vw);
			--alignMed: min(962px, 82.5vw);
			:root {
			/*****************************
			Layout
			*****************************/
			--half: min(384px, 17.5vw);
			--narrow: min(500px, 62.5vw);
			--content: min(768px, 65vw);
			--wider: min(900px, 75vw);
			--wide: min(1024px, 90vw);
			--full: 100vw;
			/* Margin */
			--mr: auto;
			--ml: auto;
			--mt: 1rem;
			--mb: 1rem;
			--setMargin: var(--mt) var(--mr) var(--mb) var(--ml);
			--insetMargin: var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);
			--height: 4rem;
			--doubleHeight: 8rem;
			--offHeight: 5rem;
			--maxHeight: calc(100vh - var(--height) - var(--height));
			--offScreen: -200vw;

			--gap: .5rem;
			--wrap: wrap;
			/*****************************
			Sizing
			*****************************/
			--chip: 1.5rem;
			--chipchip: 3rem;
			--chip_: 2rem;
			--btn: 4rem;
			--btn_: 5rem;
			--btnbtn: 8rem;
			--maxHeight: calc(100vh - var(--btnbtn));

			/*****************************
			Flex
			*****************************/
			--dir: row;
			--justify: center;
			--align: center;
			--dir: row;
			/* Typography */
			--w: 1.2em; / Icon /
			--wrap: wrap;
			--gap: .5rem;

			--filter: grayscale(.3) sepia(.4);
			--dashed: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23151515' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
			--dashed-action: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B7332E' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
			/*****************************
			Typography
			*****************************/
			--w: 1.2em; / For icons /

			--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
			--heading: 'Aleo', var(--font-base);
			--body: 'Josefin Slab', var(--font-base);
			--hWeight: 900;
			--hlight: 400;
			--bWeight: 400;
			--bBold: 700;
			--bLight: 200;
			/* Font sizes */
			--enormous: calc(26vh - 4rem);
			--xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
			--xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem);
			--xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
			--large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
			--xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
			--medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
			--small: clamp(.95rem, .879rem + .19vw, 1.05rem);
			--extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
			/* Colours
			For best results, generate colours from base colours using: https://uicolors.app/generate/
			or sass darken/lighten by 5%: http://scg.ar-ch.org/
			*/
			--light-0: #fafafa;
			--light-50: #fcfbfb;
			--light-100: #f1eded;
			--light-200: #e6dfdf;
			--dark-0: #201313;
			--dark-50: #261717;
			--dark-100: #2d1b1b;
			--dark-200: #331e1e;
			--action-0: #B7332E;
			--action-50: #a32d29;
			--action-100: #8e2824;
			--action-200: #7a221f;
			--secondary-0: #E8A737;
			--secondary-50: #e59d20;
			--secondary-100: #d48f18;
			--secondary-200: #bd7f16;
			--fw-h-light: 400;
			--fw-h: 900;
			--fw-h-bold: 900;
			--fw-b-light: 200;
			--fw-b: 400;
			--fw-b-bold: 700;

			--success: #22C55E;
			--successBack: #d4edda;
			--successText:#155724;
			--warning: #E8A737;
			--error: #EF4444;
			--errorBack: #f8d7da;
			--errorText: #721c24;
			--txt-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);
			--txt-x-small: clamp(.95rem, .879rem + .19vw, 1.05rem);
			--txt-medium: clamp(1.1rem, .993rem + .286vw, 1.25rem);
			--txt-x-medium: clamp(1.4rem, .971rem + 1.143vw, 2rem);
			--txt-large: clamp(1.3rem, .6rem + 1.867vw, 2rem);
			--txt-x-large:clamp(1.6rem, .957rem + 1.714vw, 2.5rem);
			--txt-xx-large: clamp(2rem, 1.286rem + 1.905vw, 3rem);
			--txt-xxx-large: clamp(2.5rem, 1.429rem + 2.857vw, 4rem);
			--txt-enormous: calc(26vh - 4rem);

			/*****************************
			Colours
			*****************************/
			--filter: grayscale(.3) sepia(.4);
			--mix-blend-mode: darken;
			--coverBlend: overlay;
			--coverIndex: 2;
			--light-0: 239,239,239; /* #efefef; */
			--light-50: 226,226,226; /* #e2e2e2; */
			--light-100: 213,213,213; /* #d5d5d5; */
			--light-200: 201,201,201; /* #c9c9c9; */

			--dark-0: 21,21,21; /* #151515; */
			--dark-50: 34,34,34; /* #222222; */
			--dark-100: 46,46,46; /* #2e2e2e; */
			--dark-200: 59,59,59; /* #3b3b3b; */

			--action-0: 255,0,128; /* #ff0080; */
			--action-50: 255,38,146; /* #ff2492; */
			--action-100: 255,71,164; /* #ff47a4; */
			--action-200: 255,107,181; /* #ff6bb5; */
			--action-contrast: var(--light-0);
			--secondary-contrast: var(--light-0);
			--light-rgb: 250,250,250;
			--dark-rgb: 16,4,4;
			--action-rgb: 183,51,46;
			--secondary-rgb: 232,167,55;

			--rgba-subtle: rgba(var(--c),.5);
			--rgba-subtle-hover: rgba(var(--c),.1);
			--action-comp: oklch(from rgb(var(--action-0)) .8 .26 h);
			--action-tri: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
			--action-mono: oklch(from rgb(var(--action-0)) .3 .04 h);
			--secondary-0: 214,145,33; /* #D69121; */
			--secondary-50: 255,196,33; /* #ffc421; */
			--secondary-100: 255,205,68;/* #ffcd44; */
			--secondary-200: 255,215,104;/* #ffd768; */
			--secondary-contrast: var(--light-0);
			--secondary-comp: oklch(from rgb(var(--secondary-0)) .8 .26 h);
			--secondary-tri: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
			--secondary-mono: oklch(from rgb(var(--secondary-0)) .3 .04 h);

			--success: 76,175,80; /* #4CAF50; */
			--successLight: 234,246,235; /* #eaf6eb; */
			--successDark: 14,33,15; /* #0e210f; */
			--successBack: var(--successLight);
			--successText: var(--successDark);
			--warning: 232,167,55; /* #E8A737; */
			--warningLight: 253,247,238;/* #fdf7ee; */
			--warningDark: 52,35,6; /* #342306; */
			--warningBack: var(--warningLight);
			--warningText: var(--warningDark);
			--error: 183,51,46; /* #B7332E; */
			--errorLight: 250,235,234; /* #faebea; */
			--errorDark: 40,11,10; /* #280b0a; */
			--errorBack: var(--errorLight);
			--errorText: var(--errorDark);

			--base: var(--light-0);
			--base-50: var(--light-50);
			--base-100: var(--light-100);
			--base-200: var(--light-200);

			--contrast: var(--dark-0);
			--contrast-50: var(--dark-50);
			--contrast-100: var(--dark-100);
			--contrast-200: var(--dark-200);
			--c: var(--light-rgb);
			--base-rgb: var(--light-rgb);
			--contrast-rgb: var(--dark-rgb);

			/* Stacking */


			--contrast-comp: oklch(from rgb(var(--contrast)) .8 .26 h);
			--contrast-tri: oklch(from rgb(var(--contrast)) .82 .2 calc(h - 120));
			--contrast-mono: oklch(from rgb(var(--contrast)) .3 .04 h);
			--base-comp: oklch(from rgb(var(--base)) .8 .26 h);
			--base-tri: oklch(from rgb(var(--base)) .82 .2 calc(h - 120));
			--base-mono: oklch(from rgb(var(--base)) .3 .04 h);


			--tone-a: rgb(var(--contrast));
			--tone-b: rgb(var(--base));

			--duo-dark: oklch(from var(--tone-a) .22 c h);
			--duo-light: oklch(from var(--tone-b) .78 c h);

			--shimmer: rgba(var(--contrast),0) 0%,
			rgba(var(--contrast),.05) 50%,
			rgba(var(--contrast),0) 100%;

			--op-1: .05;
			--op-2: .15;
			--op-3: .25;
			--op-45: .45;
			--op-4: .66;
			--op-5: .75;
			--op-6: .85;

			/*****************************
			Shadows
			*****************************/
			--shdw-inset: inset 0 0 4px 1px;
			--shdw: 0 0 4px;
			--shdw-down: 0 6px 5px -5px;
			--shdw-right: 6px 0 5px -5px;
			--shdw-left: -6px 0 5px -5px;
			--shdw-up: 0 -6px 5px -5px;
			--shdw-subtle: 0 25px 20px -20px;
			--shdw-subtle-right: 10px 0 20px -20px;
			--shdw-none: transparent 0 0 0;

			/*****************************
			Stacking
			*****************************/
			--z-1: 5;
			--z-2: 10;
			--z-3: 15;
			--z-4: 20;
			--z-5: 50;
			--z-6: 100;
			--z-top: 999;
			--zz-top: 999999;
			/* Overlays */
			--rgb-subtle: .05;
			--rgb-subtle-hover: .15;
			--rgb-light: .25;
			--rgb-medium: .66;
			--rgb-heavy: .85;
			--overlay-light: rgba(var(--c), .25);
			--overlay-medium: rgba(var(--c), .66);
			--overlay-heavy: rgba(var(--c), .85);
			--shimmer: rgba(var(--dark-rgb),0) 0%,
			rgba(var(--dark-rgb),.05) 50%,
			rgba(var(--dark-rgb),0) 100%;
			/* Shadows */
			--shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px;
			--shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px; /* Bottom */
			--shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px; /* Right */
			--shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px; /* Left */
			--shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px; /* Up */
			--subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;
			--subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px;
			--shadow-none: transparent 0px 0px 0px;
			/* Rounding */
			--innerRadius: 4px;
			--outerPadding: 1rem;
			--outerRadius: calc(var(--innerRadius) + var(--outerPadding));
			/* Transitions */
			--function:cubic-bezier(.47,.24,.07,.47);
			--timing: .25s;
			--transition-base: var(--timing) var(--function);
			--transition-color: background-color var(--transition-base),
			color var(--transition-base), border var(--transition-base);
			--transition-transform: transform var(--transition-base);
			--transition-size: width var(--transition-base),
			height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base);
			--z-7: 999;
			--z-8: 1000;
			--z-9: 999999;
			--z-10: 9999999;

			--offScreen: -200vw;
			/*****************************
			Rounding
			*****************************/
			--radius: 4px;
			--p-outer: 1rem;
			--radius-outer: calc(var(--radius) + var(--p-outer));
			--p-y: var(--sp1);
			--p-x: var(--sp1);
			/*****************************
			Transitions
			*****************************/
			--trans-fn: cubic-bezier(.47,.24,.07,.47);
			--trans-t: .25s;
			--trans-base: var(--trans-t) var(--trans-fn);
			--trans-color: background-color var(--trans-base),
			color var(--trans-base), border var(--trans-base);
			--trans-transform: transform var(--trans-base);
			--trans-size: width var(--trans-base),
			height var(--trans-base),max-width var(--trans-base), max-height var(--trans-base);
			--trans-vis: opacity var(--trans-base);

			/ Icons /
			--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');
			--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');
			--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
			--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');
			--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
			--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');
			--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');
			--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');
			--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');
			--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');
			--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');
			--linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');
			--swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+');
			/*****************************
			Spacing
			*****************************/
			--sp1: clamp(0.5rem, 0.714vw + 0.321rem, 1rem); /* 8px → 16px */
			--sp2: clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem); /* 12px → 24px */
			--sp3: clamp(1rem, 1.429vw + 0.643rem, 2rem); /* 16px → 32px */
			--sp4: clamp(1.5rem, 2.143vw + 0.964rem, 3rem); /* 24px → 48px */
			--sp5: clamp(2rem, 2.857vw + 1.286rem, 4rem); /* 32px → 64px */
			--sp6: clamp(3rem, 4.286vw + 1.929rem, 6rem); /* 48px → 96px */
			--sp7: clamp(4rem, 5.714vw + 2.571rem, 8rem); /* 64px → 128px */

			/*****************************
			Scrollbar
			*****************************/
			--sb-width: 8px;
			--sb-track: rgb(var(--base-100));
			--sb-thumb: rgb(var(--action-0));
			--sb-thumb-hover: rgb(var(--action-50));
			--sb-thumb-border: 2px solid rgb(var(--base-50));
			--sb-radius: 4px;

			--scrollbar-width: 8px;
			--scrollbar-track-color: var(--base-100);
			--scrollbar-thumb-color: var(--action-0);
			--scrollbar-thumb-hover-color: var(--action-50);
			--scrollbar-thumb-border: 2px solid var(--base-50);
			--scrollbar-border-radius: 4px;

			--can-scroll: 0;
			--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');
			--link: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M238,88.18a52.42,52.42,0,0,1-15.4,35.66l-34.75,34.75A52.28,52.28,0,0,1,150.62,174h-.05A52.63,52.63,0,0,1,98,119.9a6,6,0,0,1,6-5.84h.17a6,6,0,0,1,5.83,6.16A40.62,40.62,0,0,0,150.58,162h0a40.4,40.4,0,0,0,28.73-11.9l34.75-34.74A40.63,40.63,0,0,0,156.63,57.9l-11,11a6,6,0,0,1-8.49-8.49l11-11a52.62,52.62,0,0,1,74.43,0A52.83,52.83,0,0,1,238,88.18Zm-127.62,98.9-11,11A40.36,40.36,0,0,1,70.6,210h0a40.63,40.63,0,0,1-28.7-69.36L76.62,105.9A40.63,40.63,0,0,1,146,135.77a6,6,0,0,0,5.83,6.16H152a6,6,0,0,0,6-5.84A52.63,52.63,0,0,0,68.14,97.42L33.38,132.16A52.63,52.63,0,0,0,70.56,222h0a52.26,52.26,0,0,0,37.22-15.42l11-11a6,6,0,1,0-8.49-8.48Z"></path></svg>');
			}


			body:has(#theme-switcher:checked){
			--action-50: #cb3933;
			--action-100: #d14c47;
			--action-200: #d6605c;
			--secondary-50: #ebb14e;
			--secondary-100: #edbb65;
			--secondary-200: #f0c57c;
			/*****************************
			Colours
			*****************************/
			--mixBlendMode: lighten;
			--coverBlend: multiply;
			--coverIndex: 0;

			--action-50: 219,0,110; /* #db006e; */
			--action-100: 184,0.92; /* #b8005c; */
			--action-200: 148,0,74; /* #94004a; */

			--secondary-50: 216,159,0; /* #d89f00; */
			--secondary-100: 181,133,0; /* #b58500; */
			--secondary-200: 145,106,0; /* #916a00; */

			--contrast: var(--light-0);
			--contrast-50: var(--light-50);
			--contrast-100: var(--light-100);
			--contrast-200: var(--light-200);
			--contrast: var(--light-rgb);

			--base: var(--dark-0);
			--base-50: var(--dark-50);
			--base-100: var(--dark-100);
			--base-200: var(--dark-200);
			--c: var(--dark-rgb);
			--base-rgb: var(--dark-rgb);
			--contrast-rgb: var(--light-rgb);
			--overlay-light: rgba(var(--c), .25);
			--overlay-medium: rgba(var(--c), .5);
			--overlay-heavy: rgba(var(--c), .85);
			--shimmer: rgba(var(--c),0) 0%,
			rgba(var(--c),.05) 50%,
			rgba(var(--c),0) 100%;
			--shadow: rgba(var(--light-rgb),.45) 0px 0px 4px;
			--shadow-down: rgba(var(--light-rgb),.45) 0 6px 5px -5px; /* Bottom */
			--shadow-right: rgba(var(--light-rgb),.45) 6px 0 5px -5px; /* Right */
			--shadow-left: rgba(var(--light-rgb), .45) -6px 0 5px -5px; /* Left */
			--shadow-up: rgba(var(--light-rgb), .45) 0 -6px 5px -5px; /* Up */
			--subtle: rgba(var(--light-rgb), .45) 0px 25px 20px -20px;
			--subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px;
			--base: var(--dark-rgb);

			--successBack: #155724;
			--successText:#d4edda;
			--errorBack: #721c24;
			--errorText: #f8d7da;

			--dashed: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23fafafa' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
			--successBack: var(--successDark);
			--successText: var(--successLight);
			--warningBack: var(--warningDark);
			--warningText: var(--warningLight);
			--errorBack: var(--errorDark);
			--errorText: var(--errorLight);

			--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>');
			--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>');
			--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
			--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>');
			--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>');
			--shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>');
			--style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>');
			--map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>');
			--theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>');
			--arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>');
			--colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>');
			--linkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>');
			--shimmer: rgba(var(--light-0),0) 0%,
			rgba(var(--light-0),.05) 50%,
			rgba(var(--light-0),0) 100%;
			}
			/******************************************************************
			FONTS
			******************************************************************/
			/ Download and generate from https://gwfh.mranftl.com/fonts /
			/* aleo-regular - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Aleo';
			font-style: normal;
			font-weight: 400;
			src: url('./fonts/aleo-v15-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/aleo-v15-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}
			/* aleo-italic - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Aleo';
			font-style: italic;
			font-weight: 400;
			src: url('./fonts/aleo-v15-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/aleo-v15-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}
			/* aleo-900 - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Aleo';
			font-style: normal;
			font-weight: 900;
			src: url('./fonts/aleo-v15-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/aleo-v15-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}
			/* aleo-900italic - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Aleo';
			font-style: italic;
			font-weight: 900;
			src: url('./fonts/aleo-v15-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/aleo-v15-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}

			/* josefin-slab-200 - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Josefin Slab';
			font-style: normal;
			font-weight: 200;
			src: url('./fonts/josefin-slab-v28-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/josefin-slab-v28-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}
			/* josefin-slab-200italic - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Josefin Slab';
			font-style: italic;
			font-weight: 200;
			src: url('./fonts/josefin-slab-v28-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/josefin-slab-v28-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}
			/* josefin-slab-regular - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Josefin Slab';
			font-style: normal;
			font-weight: 400;
			src: url('./fonts/josefin-slab-v28-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/josefin-slab-v28-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}
			/* josefin-slab-italic - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Josefin Slab';
			font-style: italic;
			font-weight: 400;
			src: url('./fonts/josefin-slab-v28-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/josefin-slab-v28-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}
			/* josefin-slab-700 - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Josefin Slab';
			font-style: normal;
			font-weight: 700;
			src: url('./fonts/josefin-slab-v28-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/josefin-slab-v28-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}
			/* josefin-slab-700italic - latin */
			@font-face {
			font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
			font-family: 'Josefin Slab';
			font-style: italic;
			font-weight: 700;
			src: url('./fonts/josefin-slab-v28-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
			url('./fonts/josefin-slab-v28-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
			}

			/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
			@layer reset {
			html {
			@@ -347,10 +289,6 @@

			body {
			margin: 0;
			/padding: 2rem;/
			/@media (width < 500px) {/
			/* padding: 1rem;*/
			/}/
			}

			*,
			@@ -413,13 +351,16 @@
			dl {
			margin: 0;
			padding: 0;
			list-style: inside;
			list-style: outside;
			ul,
			ol,
			dl {
			padding-inline-start: 2ch;
			}
			}
			li {
			padding-bottom: .5rem;
			}

			img,
			video,
			@@ -434,9 +375,17 @@
			inline-size: fit-content;
			margin-inline: auto;
			}
			figure img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			}
			figcaption {
			contain: inline-size;
			font-size: 90%;
			background-color: rgba(var(--base),var(--op-3));
			text-align: center;
			font-style: italic;
			}

			input,
			@@ -511,13 +460,70 @@
			padding: 1.5rem;
			}

			hr.logo::after,
			hr {
			--margin: 12.5%; /* Half of the remaining 25% */
			--baseWidth: 75%;
			border-style: solid;
			border-width: 1px 0 0;
			border-color: rgb(var(--contrast));
			color: inherit;
			height: 0;
			height: 1px;
			overflow: visible;
			margin-block: 2.5rem;
			width: var(--baseWidth);
			}

			hr.logo {
			--width: calc((rgb(var(--baseWidth)) / 2) - var(--half));
			--half: calc(var(--btn) / 2);
			width: var(--width);
			position: relative;
			margin-left: var(--margin);
			}
			hr.logo::before {
			content: '';
			--circ: calc(var(--btn) + (var(--btn) / 2));
			--rad: calc(var(--circ) / 2);
			background-color: rgb(var(--contrast-100));
			mask-image: var(--icon);
			-webkit-mask-image: var(--icon);
			mask-size: var(--btn);
			-webkit-mask-size: contain;
			mask-repeat: no-repeat;
			-webkit-mask-repeat: no-repeat;
			mask-position: center;
			-webkit-mask-position: center;
			display: block;
			width: var(--circ);
			height: var(--circ);
			position: absolute;
			border-radius: 50%;
			right: calc(-1 * (var(--circ)));
			top: 0;
			transform: translateY(-50%);

			}
			hr.logo::after {
			content: '';
			display: block;
			width: 100%;
			position: absolute;
			z-index: 0;
			top: 0;
			transform: translateY(050%);
			background-color: rgb(var(--contrast));
			height: 1px;
			right: calc((100% + var(--btn_) + 1rem) * -1);
			margin: 0;
			}
			hr.dots {
			border-color: transparent;
			display:flex;
			}
			hr.dots::before {
			content: '.\2003.\2003.';
			margin: 0 auto;
			}

			:target {
			@@ -570,417 +576,59 @@
			}
			}
			}
			/***************************************************************

			/*************************************************************
			SCROLLBAR
			***************************************************************/
			*************************************************************/
			* {
			scrollbar-width: thin;
			scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
			scrollbar-color: var(--sb-thumb) var(--sb-track);
			}

			/* For WebKit browsers (Chrome, Safari, etc.) */
			::-webkit-scrollbar {
			width: var(--scrollbar-width);
			height: var(--scrollbar-width);
			width: var(--sb-width);
			height: var(--sb-width);
			}

			::-webkit-scrollbar-track {
			background: var(--scrollbar-track-color);
			background: var(--sb-track);
			}

			::-webkit-scrollbar-thumb {
			background-color: var(--scrollbar-thumb-color);
			border-radius: var(--scrollbar-border-radius);
			border: var(--scrollbar-thumb-border);
			background-color: var(--sb-thumb);
			border-radius: var(--sb-radius);
			border: var(--sb-thumb-border);
			}

			::-webkit-scrollbar-thumb:hover {
			background-color: var(--scrollbar-thumb-hover-color);
			background-color: var(--sb-thumb-hover);
			}


			body{
			background-color: var(--base-50);
			color: var(--contrast);
			max-width: 100vw;
			overflow-x: hidden;
			/*************************************************************
			BASE
			*************************************************************/
			body {
			background-color: rgb(var(--base-50));
			color: rgb(var(--contrast));
			margin: 0;
			font-family: var(--body);
			font-weight: var(--bWeight);
			font-size: var(--medium);
			font-weight: var(--fw-b);
			font-size: var(--txt-medium);
			line-height: 1.4;
			position: relative;
			}
			body b,
			body strong {
			font-weight: var(--bBold);
			}


			*:target {
			scroll-snap-margin-top: max(6rem, 20vh);
			scroll-margin-top: max(6rem, 20vh);
			outline: double var(--action-0);
			border-radius: var(--outerRadius);
			padding: var(--outerPadding);
			}
			body.menu_item *:target h2 {
			background-color: var(--action-0);
			color: var(--action-contrast);
			max-width: 100vw;
			}
			body,
			body * {
			transition: background-color var(--transition-base);
			transition-property: background-color, border;
			transition: var(--trans-color)
			}


			/**************************************************************
			UTILITY CLASSES
			**************************************************************/
			body:has(aside.expanded),
			body:has(nav.open),
			body:has(dialog[open]),
			body.loading {
			overflow: hidden;
			}


			*[hidden] {
			display: none!important;
			}

			@media (max-width: 767px){
			.hide-small {
			display: none;
			}
			}
			.width-50 {
			width: 100%;
			}
			.width-25 {
			width: 50%;
			}
			.width-75 {
			width: 100%;
			}
			.w-full {
			width: 100%;
			}


			@media (min-width: 768px){
			.buttons li.width-50,
			.width-50 {
			width: calc(50% - .3em);
			}
			.width-25 {
			width: calc(25% - .3em);
			}
			.width-75 {
			width: calc(75% - .3em);
			}
			}

			.row:not(.icon),
			.col {
			display: flex;
			justify-content: var(--justify);
			align-items: var(--align);
			gap: var(--gap);
			flex-wrap: var(--wrap);
			flex-direction: var(--dir);
			}
			.col {
			--dir: column;
			}
			.row:not(.icon) {
			--dir: row;
			}
			.col.rev {
			--dir: column-reverse;
			}
			.row.rev {
			--dir: row-reverse;
			}

			.nowrap {
			--wrap: nowrap;
			}
			.col.a-start,
			.row.start {
			--justify: flex-start;
			}

			.col.a-end,
			.row.end {
			--justify: flex-end;
			}
			.col.btw,
			.row.btw {
			--justify: space-between;
			}
			.col.even,
			.row.even {
			--justify: space-evenly;
			}

			.col.start,
			.row.a-start {
			--align: flex-start;
			}

			.col.end,
			.row.a-end {
			--align: flex-end;
			}

			.abs {
			position: absolute;
			}
			*:has(>.abs) {
			position: relative;
			}
			.hidden {
			transform: scale(0);
			max-width: 0;
			max-height: 0;
			overflow: hidden;
			transition: var(--transition-transform), var(--transition-size);
			}

			.visible {
			transform: scale(1);
			max-width: 100%;
			max-height: 100%;
			transition: var(--transition-transform), var(--transition-size);
			}

			/******************************************************************
			THEME SWITCHER & TOGGLE
			******************************************************************/
			.toggle-switch input {
			opacity: 0;
			width: 0;
			height: 0;
			position: absolute;
			left: var(--offScreen);
			}

			.toggle-switch .slider {
			position: relative;
			width: 2rem;
			height: 1rem;
			background-color: var(--base-200);
			border-radius: .75rem;
			overflow: hidden;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			border: 4px solid transparent;
			transition: .3s;
			box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
			cursor: pointer;
			margin: 5px;
			}

			.toggle-switch .slider::before {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top:0;
			left: 0;
			background-color: var(--base);
			transform: translateX(-1rem);
			border-radius: .75rem;
			transition: .3s;
			box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
			}

			.toggle-switch input:checked ~ .slider::before {
			transform: translateX(1rem);
			box-shadow: 0 0 .25rem 3px rgb(0, 0, 0, 0.25);
			}

			.toggle-switch input:checked ~ .slider {
			background-color: var(--action-0);
			}

			.toggle-switch input:active ~ .slider::before {
			transform: translate(0);
			}


			/.theme-switcher {/
			/* position: absolute;*/
			/* opacity: 0;*/
			/* width: 0;*/
			/* height: 0;*/
			/}/
			#theme-switch {
			z-index: 99;
			margin: 0;
			--wrap: nowrap;
			--gap: 1rem;
			}
			#theme-switch .slider {
			width: 3rem;
			height: 1.5rem;
			}
			#theme-switch .slider::before {
			transform: translateX(-1.5rem);
			}
			#theme-switch input:checked ~ .slider::before {
			transform: translateX(1.5rem);
			}


			/#theme-switch,/
			/.toggle-switch {/
			/* --wrap: nowrap;*/
			/* cursor: pointer;*/
			/}/
			/#theme-switch,/
			/.toggle-switch input[type=checkbox] {/
			/* --h: 2rem;*/
			/* width: calc(var(--h) * 2);*/
			/* height: var(--h);*/
			/* margin: 0 2rem 0 0;*/
			/* left: 0;*/
			/* appearance:none;*/
			/* background: var(--base-200);*/
			/* border: 1px solid var(--base-50);*/
			/* border-radius: var(--h);*/
			/* cursor: pointer;*/
			/* transition: all .3s ease;*/
			/* opacity: 1;*/
			/}/

			/.toggle-switch input[type=checkbox] {/
			/* position: relative;*/
			/}/
			/.toggle-switch {/
			/* position: relative;*/
			/}/

			@media (max-width: 600px) {
			#theme-switch {
			left: 1rem;
			}
			.wp-site-blocks > header {
			padding: 0!important;
			}
			}

			/* Icon wrapper styling */
			/#theme-switch .icon {/
			/* --w: 1em;*/
			/* position: relative;*/
			/* top: 0;*/
			/* margin: 0 .25em;*/
			/* color: var(--contrast-200);*/
			/* z-index: 2;*/
			/* transform: translateX(0);*/
			/}/


			/#theme-switcher:not(:checked) ~ .sun-dim,/
			/#theme-switcher:checked ~ .moon {/
			/* --w: 1.5em;*/
			/* color: var(--contrast);*/
			/}/

			/#theme-switcher:not(:checked) ~ .moon,/
			/#theme-switcher:checked ~ .sun-dim {/
			/* top: -.17rem;*/
			/}/
			/* #theme-switcher:not(:checked) ~ .sun-dim {*/
			/* color: var(--secondary-0);*/
			/* transform: translate(-2px, 2px);*/
			/* }*/
			/* #theme-switcher:checked ~ .moon {*/
			/* transform: translate(4px, 4px);*/
			/* }*/

			/#theme-switch span,/
			/.toggle-switch input[type=checkbox]::before {/
			/* --m: 2px;*/
			/* content: "";*/
			/* position: absolute;*/
			/* top: var(--m);*/
			/* left: var(--m);*/
			/* width: calc(var(--h) - (var(--m) * 2));*/
			/* height: calc(var(--h) - var(--m) * 2);*/
			/* border: 1px solid rgba(var(--contrast-rgb), .2);*/
			/* border-bottom: 3px solid var(--contrast-200);*/
			/* background: var(--base-50);*/
			/* border-radius: 50%;*/
			/* z-index: 1;*/
			/* transform: rotate(360deg);*/
			/* transition: transform var(--transition-base),*/
			/* left var(--transition-base),*/
			/* top var(--transition-base),*/
			/* height var(--transition-base);*/
			/}/
			/* #theme-switch input:checked ~ span,*/
			/* .toggle-switch input[type=checkbox]:checked::before {*/
			/* left: calc(100% - (var(--h) - var(--m)));*/
			/* transform: rotate(-180deg);*/
			/* transition: transform var(--transition-base), left var(--transition-base);*/
			/* }*/
			/* .toggle-switch input[type=checkbox]:checked {*/
			/* background: var(--action-0);*/
			/* }*/

			/! Focus States !/
			/.theme-switch:focus-visible + label {/
			/* outline: 2px solid var(--action-0);*/
			/* outline-offset: 2px;*/
			/}/

			/! Icon Animations !/
			/#theme-switch .icon {/
			/* transition:*/
			/* transform var(--transition-base),*/
			/* width var(--transition-base),*/
			/* height var(--transition-base),*/
			/* top var(--transition-base),*/
			/* color var(--transition-base);*/
			/}/

			/#theme-switcher:not(:checked) ~ .icon.dark,/
			/#theme-switcher:checked ~ .icon.light {/
			/* transform: rotate(360deg);*/
			/* color: var(--contrast-200);*/
			/}/
			/#theme-switcher:not(:checked) ~ .icon.light,/
			/#theme-switcher:checked ~ .icon.dark {/
			/* transform: rotate(-360deg);*/
			/* color: var(--contrast);*/
			/}/

			/! Hover Effects !/
			/#theme-switch:hover span {/
			/* background-color: var(--base-100);*/
			/}/


			/#theme-switch:hover .icon {/
			/* color: var(--action-50);*/
			/}/

			/! Active State !/
			/#theme-switch:active span {/
			/* transform: scale(.97);*/
			/}/

			/***********************************************************
			SMOOTH SCROLLING
			***********************************************************/
			/*************************************************************
			LAYOUT
			*************************************************************/
			html {
			scroll-behavior: smooth;
			overflow-x: hidden;
			}

			@media(prefers-reduced-motion){
			@@ -992,437 +640,1442 @@
			animation: none!important;
			}
			}
			/body:has(aside.expanded),/
			/body:has(nav.open:not(.drawer)),/
			/body:has(dialog[open]),/
			/body.loading {/
			/* overflow: hidden;*/
			/* max-height: 100vh;*/
			/}/

			/*********************************************************
			SPACING
			*********************************************************/
			main {
			min-height: 60vh;
			}
			--gapNarrow: calc((var(--content) - var(--narrow)) / 2);
			--gapContent: calc((var(--wider) - var(--content)) / 2);
			--gapWide: calc((var(--wide) - var(--wider)) / 2);

			display: grid;
			grid-template-columns:
			[full-start] minmax(1rem, 1fr)
			[wide-start] minmax(0, var(--gapWide))
			[wider-start] minmax(0, var(--gapContent))
			[content-start] minmax(0, var(--gapNarrow))
			[narrow-start] min(calc(100% - 2rem), var(--narrow)) [narrow-end]
			minmax(0, var(--gapNarrow)) [content-end]
			minmax(0, var(--gapContent)) [wider-end]
			minmax(0, var(--gapWide)) [wide-end]
			minmax(1rem, 1fr) [full-end];
			min-height: var(--maxHeight);
			grid-auto-rows: max-content;
			}
			main > * {
			width: 100%;
			max-width: var(--maxWidth);
			margin: var(--setMargin);
			}
			main > .align-wide {
			max-width: var(--alignWide);
			}
			main > .align-full {
			--ml: 0;
			--mr: 0;
			max-width: var(--full);
			grid-column: content;
			}
			main > section {
			--mt: 6rem;
			padding: 3rem 0;
			grid-column: full;
			}
			main > section > * {
			width: 100%;
			max-width: var(--content);
			margin: var(--sp1) auto;
			}
			ul {
			max-width: var(--narrow);
			margin: 1rem auto 1rem 3rem;
			}
			ul ul {
			padding: .25rem 0 .25rem 1rem;
			margin: 0;
			}

			/* Nested items can use any width */
			main .align-narrow {
			grid-column: narrow;
			}

			main .align-content {
			grid-column: content;
			}

			main .align-wider {
			grid-column: wider;
			width: 100%;
			}

			main .align-wide {
			grid-column: wide;
			width: 100%;
			}

			main .align-full {
			grid-column: full;
			width: 100%;
			max-width: none;
			}

			/* First child has no top spacing */
			main > *:first-child {
			margin-top: 0;
			}

			.wp-site-blocks > header {
			position: sticky;
			top: 0;
			z-index: var(--z-8);
			background-color: rgb(var(--base));
			box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-down);
			transition: top var(--trans-base);
			}
			header a[rel="home"] {
			display: flex;
			align-items: center;
			max-height:var(--btn);
			overflow:hidden;
			margin: 0 auto;
			}
			.scroll-progress {
			position: absolute;
			inset-inline: 0;
			bottom: 0;
			height: 3px;
			display: flex;
			align-items: center;
			pointer-events: none;
			z-index: var(--z-3);
			background-color: rgb(var(--base-200));
			overflow: hidden;
			}

			.scroll-progress .bar {
			width: 100%;
			height: 1px;
			transform-origin: left center;
			transform: scaleX(0);
			background: rgb(var(--action-0));
			}

			footer {
			padding: 1rem 1rem var(--offHeight);
			background-color: var(--base-200);
			color: var(--contrast-200);
			padding: 1rem;
			background-color: rgb(var(--base));
			color: rgb(var(--contrast-200));
			text-align: center;
			margin: 4rem 0 0;
			position: relative;
			z-index: var(--z-top);
			z-index: var(--z-7);
			}
			footer p,
			footer p + p {
			margin: .5rem auto;
			}
			footer p {
			margin: 0 auto;
			}

			body:has(nav.fixed.bottom,nav.on-this-page) footer {
			padding-bottom: var(--btn_);
			}
			@media (min-width:768px) {
			footer {
			padding: 1rem 2rem var(--offHeight);
			padding: 1rem 2rem var(--btn_);
			}
			}
			/*********************************************************
			GRIDS
			*********************************************************/
			.grid-view,
			.item-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px;
			}
			.grid-view .item,
			.item-grid .item {
			border-radius: var(--outerRadius);
			aspect-ratio: 1;
			display:flex;
			filter: none;
			transition: filter var(--transition-base), padding var(--transition-base), background-color var(--transition-base);
			}
			.grid-view img,
			.item-grid img {
			border-radius: var(--innerRadius);
			}
			.item-grid.list-view {
			display: flex;
			flex-direction: column;
			gap: 2rem;
			--gap: 2rem;
			}
			.item-grid.list-view .item .col {
			--gap: .5rem;
			}
			.item-grid.list-view img {
			width: 20%;
			*:target {
			scroll-snap-margin-top: var(--btnbtn);
			scroll-margin-top: var(--btnbtn);
			outline: double rgb(var(--action-200));
			background-color: rgb(var(--base));
			}

			@media (min-width: 768px) {
			.item-grid,
			.grid-view {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
			}
			/***********************
			PRE/SUB HEADER
			***********************/
			aside.header,
			aside.footer {
			padding: 0 1rem;
			font-size: var(--txt-x-small);
			z-index: var(--z-7);
			background-color: rgb(var(--base-50));
			}

			/*********************************************************
			aside.header {
			height: var(--chip_);
			--wrap: nowrap;
			}
			aside.footer p,
			aside.header p {
			width: max-content;
			}
			aside.footer {
			--dir: column;
			background-color:rgb(var(--base-50));
			padding: 1rem;
			border-top: 1px solid rgb(var(--base-200));
			}
			aside.footer + footer {
			margin-top: 0;
			}
			aside.header p ,aside.footer p {
			margin: 0.125rem 0;
			}
			aside.pre {
			position: sticky;
			top: -2rem;
			transition: top var(--trans-base);
			}
			.scroll-up aside.pre {
			top: 0;
			}
			.scroll-up .pre ~ header {
			top: calc(var(--chip_) - 2px);
			}
			/***********************************************************
			TYPOGRAPHY
			*********************************************************/
			h1 b, h1 strong,
			h2 b, h2 strong,
			h3 b, h3 strong,
			h4 b, h4 strong,
			h5 b, h5 strong,
			h6 b, h6 strong {
			text-decoration: double;
			-webkit-text-fill-color: transparent;
			-webkit-text-stroke: 2px var(--contrast);
			***********************************************************/
			body :is(b, strong) {
			font-weight: var(--fw-b-bold);
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
			--mt: 1.5em;
			--mb: .875em;
			:is(h1, h2, h3, h4, h5, h6) {
			font-family: var(--heading);
			text-transform: uppercase;
			font-weight: var(--hWeight);
			font-weight: var(--fw-h);
			line-height: 1.3;
			margin: var(--mt) var(--mr) var(--mb) var(--ml);
			margin: 1.5em auto .25em;
			width: 100%;
			}
			h1.inline,
			h2.inline,
			h3.inline,
			h4.inline,
			h5.inline,
			h6.inline {
			:is(h1,h2,h3,h4,h5,h6), p {
			width: 100%;
			}
			.group :is(h1,h2,h3,h4,h5,h6), p {
			width: max-content;
			max-width: 100%;
			}

			:is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
			font-weight: var(--fw-h-bold);
			letter-spacing: 2px;
			}

			:is(h1, h2, h3, h4, h5, h6) small {
			display: block;
			line-height: .8;
			font-family: var(--body);
			font-size: .5em;
			}
			:is(h1, h2, h3, h4, h5, h6) small :is(b, strong) {
			font-weight: var(--fw-b-bold);
			}

			:is(h1, h2, h3, h4, h5, h6).inline {
			font-size: 1.2rem;
			font-weight: 600;
			font-weight: var(--fw-h-bold);
			display: inline-block;
			margin: 0 2rem 0 0;
			letter-spacing: .05em;
			}

			h1.inline + *,
			h2.inline + *,
			h3.inline + *,
			h4.inline + *,
			h5.inline + *,
			h6.inline + * {
			:is(h1, h2, h3, h4, h5, h6).inline + * {
			display: inline-block;
			margin: .5rem 0;
			}
			h1.inline + .term-list,
			h2.inline + .term-list,
			h3.inline + .term-list,
			h4.inline + .term-list,
			h5.inline + .term-list,
			h6.inline + .term-list {
			display: inline-flex;
			margin: .5rem 0;
			}

			h1 {
			font-size: var(--xxxlarge);
			font-weight: var(--hWeight);
			font-size: var(--txt-xxx-large);
			font-weight: var(--fw-h);
			line-height: 1;
			margin: 0 var(--mr) .25em var(--ml);
			}
			h1:first-of-type {
			margin-top: 20vh;
			}
			h1 small {
			display: block;
			font-size: var(--small);
			font-weight: var(--bWeight);
			line-height: 1;
			font-family: var(--body);
			margin: 10vh auto .25em;
			}

			h2 {
			font-size: var(--xxlarge);
			h1 small + small {
			display: inline-block;
			font-size: var(--txt-large);
			margin-right: .5rem;
			}
			h3 {
			font-size: var(--xlarge);
			}

			h2 { font-size: var(--txt-xx-large); }
			h3 { font-size: var(--txt-x-large); }
			h4 {
			/font-family: var(--body);/
			font-weight: 400;
			font-size: var(--large);
			font-size: var(--txt-large);
			}
			h5, h6 {
			/font-family: var(--body);/
			font-weight: 400;
			font-size: var(--medium);
			font-size: var(--txt-medium);
			}

			p {
			line-height: 1.6;
			}
			p + p {
			margin-top: 2.5rem;
			}

			a {
			color: var(--action-0);
			text-decoration: none;
			}
			ul a {
			display: inline-flex;
			text-decoration: none;
			}

			a:visited {
			color: var(--action-100);
			}
			a:hover {
			color: var(--action-50);
			text-decoration: underline;
			}
			/******************************************************************
			BUTTONS
			******************************************************************/
			.buttons {
			--wrap: wrap;
			--justify: flex-start;
			margin: 1rem var(--mr) 1rem var(--ml);
			width: 100%;
			padding: 0;
			}
			.buttons.fit {
			width: fit-content;
			margin: 1rem 2rem;
			}
			.buttons li {
			--justify: stretch;
			--align: stretch;
			padding: 0;
			list-style: none;
			overflow:hidden;
			}
			.buttons {
			margin: 3rem auto;
			max-width: 90%;
			}

			@media (min-width: 768px){
			.buttons {
			max-width: var(--maxWidth);
			margin: 3rem var(--mr) 3rem var(--ml);
			.drop-cap::first-letter {
			font-family: var(--heading);
			font-size: var(--btn);
			line-height: 1;
			background-color: rgb(var(--action-0));
			color: rgb(var(--action-contrast));
			float: left;
			font-weight: var(--fw-h-bold);
			margin: 0.1em 0.1em 0.2em 0;
			padding: 0.1em;
			}
			}
			.btn + label,
			[type=submit],
			a.button,
			a.wp-block-button__link,
			button {
			--justify: center;
			--align: center;
			--dir: row;
			width: fit-content;
			text-transform: uppercase;
			text-decoration: none;
			background-color: var(--base-100);
			color: var(--contrast-50);
			border: 1px solid var(--base-200);
			border-radius: var(--innerRadius);
			padding: .25rem 1rem;
			font: inherit;
			cursor: pointer;
			outline: inherit;
			display: inline-flex;
			justify-content: var(--justify);
			align-items: var(--align);
			gap: var(--gap);
			flex-wrap: var(--wrap);
			flex-direction: var(--dir);
			transition: color var(--transition-base);
			transition-property: color, border,background-color;
			position: relative;
			:not(.row >) p:has(+p) {
			margin-bottom: 0;
			}
			:not(.row >) p + p {
			margin-top: 0;
			}

			.hint {
			line-height: 1.2;
			font-style: italic;
			font-size: var(--txt-small);
			}

			.btn + label:hover,
			.btn + label:focus,
			[type=submit]:hover,
			[type=submit]:focus,
			.buttons a:hover,
			a.button:hover,
			a.button:focus,
			a.wp-block-button__link:hover,
			a.wp-block-button__link:focus,
			button:hover,
			button:focus {
			background-color: var(--action-0);
			color: var(--action-contrast);
			mark {
			background-color: rgba(var(--action-0), var(--op-45))!important;
			color: rgb(var(--action-contrast))!important;
			border-top-left-radius: .5em;
			border-bottom-right-radius: .5em;
			padding: 0 .5em;
			corner-shape: bevel;
			}



			.btn:disabled + label,
			.btn:disabled + label:hover,
			[type=submit]:disabled,
			[type=submit]:disabled:hover,
			[type=submit]:disabled:focus,
			a.button:disabled,
			a.wp-block-button__link:disabled,
			button:disabled,
			a.button:disabled:hover,
			a.wp-block-button__link:disabled:hover,
			button:disabled:hover,
			a.button:disabled:focus,
			a.wp-block-button__link:disabled:focus,
			button:disabled:focus {
			opacity: .5;
			background-color: var(--base-200)!important;
			color: var(--contrast-200)!important;
			/******************************************************
			LINKS
			******************************************************/
			a {
			color: rgb(var(--action-0));
			border-radius: 4px;
			padding: .125rem;
			}
			details .icon {
			--w: 1.5em;
			a:visited {
			color: rgb(var(--action-100));
			}
			a:hover,
			a:visited:hover {
			color: rgb(var(--contrast-50));
			text-decoration: none;
			}

			:is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {
			color: var(--action-contrast);
			background-color: rgb(var(--action-0));
			}

			a.logo {
			display: inline-flex;
			}
			.logo img {
			max-width: 150px;
			}
			/*****************************************************
			ICONS
			*****************************************************/
			i.icon {
			width: var(--w);
			height: var(--w);
			display: inline-block;
			background-color: currentColor;
			mask-image: var(--icon);
			-webkit-mask-image: var(--icon);
			mask-size: contain;
			-webkit-mask-size: contain;
			mask-repeat: no-repeat;
			-webkit-mask-repeat: no-repeat;
			mask-position: center;
			-webkit-mask-position: center;
			vertical-align: middle;
			}

			button.voted svg,
			button.favourite.favourited {
			animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
			}
			@keyframes favourite-pop {
			0% { transform: scale(1); }
			50% { transform: scale(1.3); }
			75% { transform: scale(.9); }
			100% { transform: scale(1); }
			}
			/ SWITCHING ICONS /
			/** If, say, a button has two icons, one gets hidden on one state, and one gets shown on another, add it here /

			button.filter-toggle {
			border: 1px solid var(--base-200);
			background-color: transparent;
			white-space: nowrap;
			font-size: 1rem;
			padding: .35em;
			--w: 1.2em;
			}
			.filter-toggle:hover {
			border-color: var(--action-50);
			color: var(--action-50);
			}
			.filter-toggle:focus {
			background-color: var(--action-50);
			color: var(--action-contrast);
			}

			button.favourite:not(.favourited) .heart-fill,
			button.favourite.favourited .heart,
			.toggle.notifications:not(.has) .bell-ringing,
			.toggle.notifications.has .bell,
			.favourite:not(.favourited) .heart-fill,
			.favourite.favourited .heart,
			.notifications:not(.has) .bell-ringing,
			.notifications.has .bell,
			.vote button:not(.voted) .upvoted,
			.vote button:not(.voted) .downvoted,
			.vote .voted .upvote,
			.vote .voted .downvote {
			display: none;
			}
			button.favourite:not(.favourited) .heart,
			button.favourite.favourited .heart-fill,
			.toggle.notifications:not(.has) .bell,
			.toggle.notifications.has .bell-ringing,

			.favourite:not(.favourited) .heart,
			.favourite.favourited .heart-fill,
			.notifications:not(.has) .bell,
			.notifications.has .bell-ringing,
			.vote button:not(.voted) .upvote,
			.vote button:not(.voted) .downvote,
			.vote .voted .upvoted,
			.vote .voted .downvoted {
			display: block;
			}
			/******************************************************************
			ICONS
			******************************************************************/
			.icon {
			width: var(--w);
			height: var(--w);
			display: inline-flex;
			transition: var(--transition-size), var(--transition-color);
			/*******************************************************
			LISTS
			*******************************************************/
			ol {
			list-style-type: decimal;
			}
			.icon svg {

			ul.terms {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			}
			ul.terms li {
			list-style: none;
			}

			.term-list.cloud {
			display: flex;
			gap: .25rem;
			margin: var(--sp2) auto;
			}
			.term-list.cloud a {
			border-radius: var(--radius);
			background-color: transparent;
			color: rgb(var(--action-0));
			border: 2px solid rgb(var(--action-0));
			padding: 4px 8px;
			position: relative;
			}
			.term-list.cloud a:hover,
			.term-list.cloud a:focus {
			color: var(--action-contrast);
			background-color: rgb(var(--action-0));
			}
			.term-list a:has(.count) {
			padding-right: 1rem;
			}
			.term-list .count {
			position: absolute;
			top: .25rem;
			right: .25rem;
			/border-radius: 50%;/
			/aspect-ratio: 1;/
			font-size: var(--txt-small);
			/background-color: rgb(var(--action-0));/
			/color: var(--action-contrast);/
			}

			.term-list li {
			list-style: none;
			}
			.term-list a {
			display: inline-flex;
			width: max-content;
			}
			/******************************************************
			UTILITY
			******************************************************/
			.rounded { border-radius: var(--radius-outer); }
			.font-small { font-size: var(--txt-x-small); }
			.font-medium { font-size: var(--txt-medium); }
			.font-large { font-size: var(--txt-large); }
			.font-x-large { font-size: var(--txt-x-large); }

			.text-center {text-align: center;}
			.text-right {text-align: right;}
			.text-left {text-align: left;}
			.align-center { text-align: center; margin: 0 auto;}
			.align-left { text-align: left; margin: 0 auto 0 0;}
			.align-right { text-align: right; margin: 0 0 0 auto;}


			*[hidden] { display: none!important; }

			@media (max-width: 767px){
			.hide-small { display: none; }
			}

			.width-33,
			.width-66,
			.width-50,
			.width-25,
			.width-75 {
			width: 100%;
			height: 100%;
			}
			.icon.small,
			nav ul .icon {
			--w: 24px;
			}

			.icon.colour {
			background: rgb(183, 51, 46);
			background: linear-gradient(180deg, rgba(255,0,128,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);
			mask-image: var(--colour);
			-webkit-mask-image: var(--colour);
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: contain;
			mask-repeat: no-repeat;
			mask-size: contain;
			width: 1.25rem;
			height: 1.25rem;
			.w-full{
			width: 100%;
			}
			@media (min-width: 768px){
			.width-50 {
			max-width: 50%;
			}
			.width-25 {
			max-width: 25%;
			}
			.width-75 {
			max-width: 75%;
			}
			.width-33 {
			max-width: 33.333%;
			}
			.width-66 {
			max-width: 66.666%
			}
			}
			/ SPACING TODO: maybe scan our files for which we actually use? /
			.p-1 {padding: var(--sp1);}
			.p-2 {padding: var(--sp2);}
			.p-3 {padding: var(--sp3);}
			.p-4 {padding: var(--sp4);}
			.p-5 {padding: var(--sp5);}
			.p-6 {padding: var(--sp6);}
			.p-7 {padding: var(--sp7);}

			.px-1 {padding-left: var(--sp1);padding-right: var(--sp1);}
			.px-2 {padding-left: var(--sp2);padding-right: var(--sp2);}
			.px-3 {padding-left: var(--sp3);padding-right: var(--sp3);}
			.px-4 {padding-left: var(--sp4);padding-right: var(--sp4);}
			.px-5 {padding-left: var(--sp5);padding-right: var(--sp5);}
			.px-6 {padding-left: var(--sp6);padding-right: var(--sp6);}
			.px-7 {padding-left: var(--sp7);padding-right: var(--sp7);}

			.py-1 {padding-top: var(--sp1);padding-bottom: var(--sp1);}
			.py-2 {padding-top: var(--sp2);padding-bottom: var(--sp2);}
			.py-3 {padding-top: var(--sp3);padding-bottom: var(--sp3);}
			.py-4 {padding-top: var(--sp4);padding-bottom: var(--sp4);}
			.py-5 {padding-top: var(--sp5);padding-bottom: var(--sp5);}
			.py-6 {padding-top: var(--sp6);padding-bottom: var(--sp6);}
			.py-7 {padding-top: var(--sp7);padding-bottom: var(--sp7);}

			.pt-1 { padding-top: var(--sp1); }
			.pr-1 { padding-right: var(--sp1); }
			.pl-1 { padding-left: var(--sp1); }
			.pb-1 { padding-bottom: var(--sp1); }
			.pt-2 { padding-top: var(--sp2); }
			.pr-2 { padding-right: var(--sp2); }
			.pl-2 { padding-left: var(--sp2); }
			.pb-2 { padding-bottom: var(--sp2); }
			.pt-3 { padding-top: var(--sp3); }
			.pr-3 { padding-right: var(--sp3); }
			.pl-3 { padding-left: var(--sp3); }
			.pb-3 { padding-bottom: var(--sp3); }
			.pt-4 { padding-top: var(--sp4); }
			.pr-4 { padding-right: var(--sp4); }
			.pl-4 { padding-left: var(--sp4); }
			.pb-4 { padding-bottom: var(--sp4); }
			.pt-5 { padding-top: var(--sp5); }
			.pr-5 { padding-right: var(--sp5); }
			.pl-5 { padding-left: var(--sp5); }
			.pb-5 { padding-bottom: var(--sp5); }
			.pt-6 { padding-top: var(--sp6); }
			.pr-6 { padding-right: var(--sp6); }
			.pl-6 { padding-left: var(--sp6); }
			.pb-6 { padding-bottom: var(--sp6); }
			.pt-7 { padding-top: var(--sp7); }
			.pr-7 { padding-right: var(--sp7); }
			.pl-7 { padding-left: var(--sp7); }
			.pb-7 { padding-bottom: var(--sp7); }

			/ MARGIN /
			.m-0 {margin: 0;}
			.m-1 {margin: var(--sp1);}
			.m-2 {margin: var(--sp2);}
			.m-3 {margin: var(--sp3);}
			.m-4 {margin: var(--sp4);}
			.m-5 {margin: var(--sp5);}
			.m-6 {margin: var(--sp6);}
			.m-7 {margin: var(--sp7);}

			.mx-1 {margin-left: var(--sp1);margin-right: var(--sp1);}
			.mx-2 {margin-left: var(--sp2);margin-right: var(--sp2);}
			.mx-3 {margin-left: var(--sp3);margin-right: var(--sp3);}
			.mx-4 {margin-left: var(--sp4);margin-right: var(--sp4);}
			.mx-5 {margin-left: var(--sp5);margin-right: var(--sp5);}
			.mx-6 {margin-left: var(--sp6);margin-right: var(--sp6);}
			.mx-7 {margin-left: var(--sp7);margin-right: var(--sp7);}

			.my-1 {margin-top: var(--sp1);margin-bottom: var(--sp1);}
			.my-2 {margin-top: var(--sp2);margin-bottom: var(--sp2);}
			.my-3 {margin-top: var(--sp3);margin-bottom: var(--sp3);}
			.my-4 {margin-top: var(--sp4);margin-bottom: var(--sp4);}
			.my-5 {margin-top: var(--sp5);margin-bottom: var(--sp5);}
			.my-6 {margin-top: var(--sp6);margin-bottom: var(--sp6);}
			.my-7 {margin-top: var(--sp7);margin-bottom: var(--sp7);}

			.mt-1 { margin-top: var(--sp1); }
			.mr-1 { margin-right: var(--sp1); }
			.ml-1 { margin-left: var(--sp1); }
			.mb-1 { margin-bottom: var(--sp1); }
			.mt-2 { margin-top: var(--sp2); }
			.mr-2 { margin-right: var(--sp2); }
			.ml-2 { margin-left: var(--sp2); }
			.mb-2 { margin-bottom: var(--sp2); }
			.mt-3 { margin-top: var(--sp3); }
			.mr-3 { margin-right: var(--sp3); }
			.ml-3 { margin-left: var(--sp3); }
			.mb-3 { margin-bottom: var(--sp3); }
			.mt-4 { margin-top: var(--sp4); }
			.mr-4 { margin-right: var(--sp4); }
			.ml-4 { margin-left: var(--sp4); }
			.mb-4 { margin-bottom: var(--sp4); }
			.mt-5 { margin-top: var(--sp5); }
			.mr-5 { margin-right: var(--sp5); }
			.ml-5 { margin-left: var(--sp5); }
			.mb-5 { margin-bottom: var(--sp5); }
			.mt-6 { margin-top: var(--sp6); }
			.mr-6 { margin-right: var(--sp6); }
			.ml-6 { margin-left: var(--sp6); }
			.mb-6 { margin-bottom: var(--sp6); }
			.mt-7 { margin-top: var(--sp7); }
			.mr-7 { margin-right: var(--sp7); }
			.ml-7 { margin-left: var(--sp7); }
			.mb-7 { margin-bottom: var(--sp7); }

			/******************************************************
			COLORS
			******************************************************/
			.base {
			--color: rgb(var(--base));
			}
			.base-50 {
			--color: rgb(var(--base-50));
			}
			.base-100 {
			--color: rgb(var(--base-100));
			}
			.base-200 {
			--color: rgb(var(--base-200));
			}
			.contrast {
			--color: rgb(var(--contrast));
			}
			.contrast-50 {
			--color: rgb(var(--contrast-50));
			}
			.contrast-100 {
			--color: rgb(var(--contrast-100));
			}
			.contrast-200 {
			--color: rgb(var(--contrast-200));
			}
			.action {
			--color: rgb(var(--action-0));
			}
			.action-50 {
			--color: rgb(var(--action-50));
			}
			.action-100 {
			--color: rgb(var(--action-100));
			}
			.action-200 {
			--color: rgb(var(--action-200));
			}
			.action-comp {
			--color: oklch(from rgb(var(--action-0)) l c calc(h + 180));
			}
			.action-tri {
			--color: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
			}
			.action-tri-alt {
			--color: oklch(from rgb(var(--action-0)) .82 .2 calc(h + 120));
			}
			.secondary {
			--color: rgb(var(--secondary-0));
			}
			.secondary-50 {
			--color: rgb(var(--secondary-50));
			}
			.secondary-100 {
			--color: rgb(var(--secondary-100));
			}
			.secondary-200 {
			--color: rgb(var(--secondary-200));
			}
			.secondary-comp {
			--color: oklch(from rgb(var(--secondary-0)) l c calc(h + 180));
			}
			.secondary-tri {
			--color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
			}
			.secondary-tri-alt {
			--color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h + 120));
			}
			.hvr-bck:hover,
			.hvr-bck:focus,
			.bck {
			background-color: var(--color);
			}
			.bck:not(.overlay).op-1 {
			background-color: rgba(var(--color), var(--op-1));
			}
			.bck:not(.overlay).op-2 {
			background-color: rgba(var(--color), var(--op-2));
			}
			.bck:not(.overlay).op-3 {
			background-color: rgba(var(--color), var(--op-3));
			}
			.bck:not(.overlay).op-4 {
			background-color: rgba(var(--color), var(--op-4));
			}
			.bck:not(.overlay).op-45 {
			background-color: rgba(var(--color), var(--op-45));
			}
			.bck:not(.overlay).op-5 {
			background-color: rgba(var(--color), var(--op-5));
			}
			.bck:not(.overlay).op-6 {
			background-color: rgba(var(--color), var(--op-6));
			}
			.hvr-clr:hover,
			.hvr-clr:focus,
			.clr {
			color: var(--color);
			}
			.hvr-brdr:hover,
			.hvr-brdr:focus,
			.brdr {
			border-color: var(--color);
			}

			.icon.logo-basic svg path {
			transition: fill var(--timing) var(--function);
			}
			.icon.logo-basic svg path#innerCircle,
			.icon.logo-basic svg path#outerSkull {
			fill: var(--base);
			/******************************************************************
			DUOTONE
			***************************************************************//****************************************************************/
			.duotone {
			isolation: isolate;
			position: relative;
			overflow: hidden;
			background: rgb(var(--contrast));
			}

			a .icon.logo-basic:hover svg path {
			fill: var(--base);
			}
			a .icon.logo-basic:hover svg path#innerCircle,
			a .icon.logo-basic:hover svg path#outerSkull {
			fill: var(--action-0);
			}

			.icon.grab {
			cursor: grab;
			}

			main a .icon {
			margin-right: .5em;
			}

			body:has(#theme-switcher:not(:checked)) .icon.logo-split-color {
			.cover img,
			.cover video,
			.duotone img,
			.duotone video {
			filter: grayscale(1) sepia(1) contrast(1.1) brightness(1.05);
			mix-blend-mode: multiply;
			z-index: 1;
			position: relative;
			}
			body:has(#theme-switcher:not(:checked)) .icon.logo-split-color::before{
			content: '';
			display: block;
			width:60%;
			height:60%;
			border-radius: 50%;
			background-color: var(--dark-200);
			position: absolute;
			left: 18%;
			top: 22%;
			z-index:-1;
			/.duotone::after,/
			.duotone::before {
			content: '';
			position: absolute;
			inset: 0;
			pointer-events: none;
			z-index: 2;
			}
			.duotone::before {
			mix-blend-mode: color;
			background-color: var(--duo-dark);
			opacity: var(--op-5);
			/z-index: 1;/
			}
			.duotone:not(.cover)::after {
			mix-blend-mode: screen;
			background-color: var(--duo-light);
			/z-index: 2;/
			}


			.duotone.action {
			--tone-a: rgb(var(--action-0));
			--duo-dark: oklch(from rgb(var(--base)) .18 .02 h);
			--duo-light: oklch(from rgb(var(--action-0)) .72 .28 h);
			}

			.duotone.secondary {
			--tone-a: rgb(var(--secondary-0));
			--duo-dark: oklch(from rgb(var(--base)) .2 .03 h);
			--duo-light: oklch(from rgb(var(--secondary-0)) .82 .18 h);
			}

			.duotone.complement {
			--duo-dark: oklch(from var(--tone-a) .22 .08 calc(h + 180));
			--duo-light: oklch(from var(--tone-a) .8 .26 h);
			}
			.duotone.triadic {
			--duo-dark: oklch(from var(--tone-a) .24 .1 calc(h + 120));
			--duo-light: oklch(from var(--tone-a) .82 .2 calc(h - 120));
			}
			.duotone.monochrome {
			--duo-dark: oklch(from var(--tone-a) .3 .04 h);
			--duo-light: oklch(from var(--tone-a) .88 .08 h);
			}
			.duotone.film {
			--duo-dark: oklch(from var(--tone-a) .35 .1 h);
			--duo-light: oklch(from var(--dark-0) .96 .02 h);
			}


			/****************************************************************//****************************************************************
			LAYOUT UTILITIES
			******************************************************************/
			/ Buttons /
			button,
			[type=submit],
			a.btn,
			.btn + label,
			li.btn,
			.buttons a,
			.buttons li,
			/ Item Grid /
			.item-grid .item,
			/ popups /
			aside.main,
			/ asides /
			aside.header,
			aside.footer,
			/ Defaults, of course /

			.row.row,
			.col.col {
			display: flex;
			justify-content: var(--justify);
			align-items: var(--align);
			gap: var(--gap);
			flex-wrap: var(--wrap);
			flex-direction: var(--dir);
			--align: center;
			--justify: center;
			--gap: .5rem;
			--wrap: wrap;
			width: 100%;
			}
			.stretch.stretch > * {
			flex: 1;
			}

			path#refresh {
			transform-origin: center;
			transform-box: fill-box;
			animation: spin 1s var(--function) infinite;
			.col.col { --dir: column; }
			.row.row { --dir: row; }
			.col.col.rev.rev { --dir: column-reverse; }
			.row.row.rev.rev { --dir: row-reverse; }

			.nowrap.nowrap { --wrap: nowrap; }
			.nowrap.nowrap.stack-small { --wrap: wrap;}
			@media (min-width: 768px) {
			.nowrap.nowrap.stack-small { --wrap: nowrap;}
			}

			.row.row.top,
			.col.col.left { --align: flex-start; }
			.col.col.top,
			.row.row.left { --justify: flex-start; }

			.row.row.btm,
			.col.col.right { --align: flex-end; }
			.col.col.btm,
			.row.row.right { --justify: flex-end; }

			.row.row.x-mid,
			.col.col.y-mid { --justify: center; }
			.row.row.y-mid,
			.col.col.x-mid { --align: center; }

			.row.row.x-btw,
			.col.col.y-btw { --justify: space-between; }
			.row.row.y-btw,
			.col.col.x-btw { --align: space-between; }

			.row.row.x-even,
			.col.col.y-even { --justify: space-evenly; }
			.row.row.y-even,
			.col.col.x-even { --align: space-evenly; }

			.row.row.x-around,
			.col.col.y-around { --justify: space-around; }
			.row.row.y-around,
			.col.col.x-around { --align: space-around; }

			/*************************************************
			POSITION UTILITIES
			*************************************************/
			.abs { position: absolute; }
			*:has(>.abs) { position: relative; }

			.top { top: 0; right: 0; left: 0; }
			.top-right { top: 0; right: 0; }
			.top-left { top: 0; left: 0; }
			.btm { bottom: 0; left: 0; right: 0; }
			.btm-right { bottom: 0; right: 0; }
			.btm-left { bottom: 0; left: 0; }
			.edges { inset: 0; }

			.hidden {
			transform: scale(0);
			max-width: 0;
			max-height: 0;
			overflow: hidden;
			transition: var(--trans-transform), var(--trans-size);
			}

			.visible {
			transform: scale(1);
			max-width: 100%;
			max-height: 100%;
			transition: var(--trans-transform), var(--trans-size);
			}

			/******************************************************************
			THEME SWITCHER
			******************************************************************/
			.field .switch {
			display: inline-flex;
			}
			.switch .slider {
			--trans-t: .0125s;
			position: relative;
			width: var(--chipchip);
			height: var(--chip);
			background-color: rgb(var(--base-200));
			border-radius: .75rem;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 4px solid transparent;
			box-shadow: 0 0 .25rem 0 rgba(var(--contrast), .125) inset;
			cursor: pointer;
			margin: 5px;
			transition: var(--trans-color);
			}
			.switch .slider::before {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgb(var(--base));
			transform: translateX(-1.5rem); /* NOTE: Tied to half of the width defined above */
			border-radius: .75rem;
			transition: var(--trans-transform);
			box-shadow: 0 0 .25rem 3px rgba(var(--contrast), .125);
			}
			.switch :checked ~ .slider::before {
			transform: translateX(1.5rem);
			box-shadow: 0 0 .25rem 3px rgba(var(--base), .25);
			}
			.switch :checked ~ .slider {
			background-color: rgb(var(--action-0));
			}

			.switch :active ~ .slider::before {
			transform: translateX(0);
			}
			#theme-switch {
			z-index: var(--z-6);
			margin: 0;
			--wrap: nowrap;
			--gap: 1rem;
			}
			#theme-switch [type=checkbox] {
			position: absolute;
			left: var(--offScreen);
			}
			@media (max-width: 600px) {
			#theme-switch {
			left: 1rem;
			}
			}
			:checked ~ .slider .icon-sun-dim {
			--w: .75em;
			margin-top: .25em;
			}
			.slider .icon-moon {
			--w: .666em;
			margin-top: .333em;
			}
			.slider .icon-sun-dim,
			:checked ~ .slider .icon-moon {
			--w: 1em;
			margin-top: 0;
			}
			:not(:checked) ~ .slider .icon-sun-dim {
			color: rgb(var(--action-0));
			}

			/************************************************
			GRIDS/ROWS/TABLES
			************************************************/
			/ GRID VIEW (default) /
			.item-grid{
			--columns: repeat(2, 1fr);
			display: grid;
			grid-template-columns: var(--columns);
			gap: 10px;
			}
			.item-grid:empty {
			display: none;
			}
			.no-results,
			.item-grid .empty {
			height: 15vh;
			background-color: rgb(var(--base-50));
			border-radius: var(--radius);
			border: 2px dashed rgb(var(--base-200));
			font-style: italic;
			}
			.item-grid.stats {
			--columns: repeat(2, 1fr);
			}
			@media (min-width: 768px) {
			.item-grid {
			--width: 250px;
			--columns: repeat(auto-fill, minmax(var(--width), 1fr));
			}
			.item-grid.split-2 {
			--columns: repeat(2, 1fr);
			}
			.item-grid.split-3 {
			--columns: repeat(3, 1fr);
			}
			.item-grid.split-4 {
			--columns: repeat(4, 1fr);
			}
			.item-grid.split-5 {
			--columns: repeat(5, 1fr);
			}
			.item-grid.split-6 {
			--columns: repeat(6, 1fr);
			}
			.item-grid.split-7 {
			--columns: repeat(7, 1fr);
			}
			.item-grid.split-8 {
			--columns: repeat(8, 1fr);
			}
			.item-grid.split-9 {
			--columns: repeat(9, 1fr);
			}
			}

			.item-grid .item {
			border-radius: var(--radius-outer);
			filter: none;
			position: relative;
			}
			.item-grid .item .item-actions {
			--gap: .125rem;
			z-index: 1;
			position: absolute;
			top: 0;
			right: 0;
			width: calc(100% - var(--btn));
			}
			.item-actions button,
			.item-actions .btn + label {
			min-height: var(--chipchip);
			width: var(--chipchip);
			z-index: var(--z-1);
			}
			.item-grid .item .images,
			.item-grid .item .images a {
			aspect-ratio: 1;
			width: 100%;
			height: 100%;
			display: flex;
			}
			.item-grid img {
			border-radius: var(--radius);
			}
			.item-grid .item-actions button {
			min-height: var(--chipchip);
			width: var(--chipchip);
			}

			/ LIST VIEW /
			.item-grid.list-view {
			display: flex;
			flex-direction: column;
			gap: 0;
			}
			.item-grid.list-view .item {
			aspect-ratio: unset;
			align-items: flex-start;
			border-radius: var(--radius);
			padding: 1rem 0;
			}
			.list-view .item:nth-of-type(even) {
			background-color: rgb(var(--base));
			}
			.list-view img {
			width: 20%;
			}
			.item.col {
			--wrap: nowrap;
			}

			.empty-state {
			--w: 1.2em;
			grid-column: 1 / span 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			margin: 1rem auto;
			max-width: 66%;
			background-color: rgb(var(--base-100));
			border: 2px dashed rgb(var(--base-50));
			padding: 1rem;
			}

			/***********************************************
			TABLES
			***********************************************/
			table {
			white-space: nowrap;
			width: 100%;
			display: table;
			margin: 0 0 2rem;
			border-radius: 4px;
			height: min(100%, var(--maxHeight));
			color: rgb(var(--contrast));
			overflow: auto;
			position: relative;
			}

			thead,tfoot {
			position: sticky;
			z-index: 10;
			background-color: rgb(var(--base));
			text-transform: uppercase;
			padding: .5rem 0;
			line-height: 2;
			font-weight: normal;
			}

			tr:nth-of-type(even){
			background-color: rgb(var(--base-200));
			}

			tfoot th {
			vertical-align: middle;
			}

			tfoot th:first-of-type {
			text-align: right;
			}

			thead tr, tfoot tr {
			background-color: rgba(var(--base),var(--op-6));
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
			}

			thead tr {
			border-bottom: 1px solid rgb(var(--contrast-200));
			}

			tfoot tr {
			border-top: 1px solid rgb(var(--contrast-200));
			}

			thead {
			top: 0;
			}

			tfoot {
			bottom: 0;
			}

			thead th {
			width: max-content;
			}

			th p {
			margin: 0!important;
			}

			td {
			width: max-content;
			padding: .5rem 1rem;
			}

			td .toggle input[type=checkbox] {
			margin: 0;
			}

			td .field {
			margin: .25rem 0;
			}

			td[data-id="actions"] label {
			margin: 0;
			padding: 0;
			}

			td .description {
			display: none;
			}

			td input[type=text] {
			width: fit-content;
			max-width: 40vw;
			padding: .25em!important;
			font-size: var(--txt-x-small)!important;
			}

			tbody tr {
			border: 2px solid transparent;
			}

			tbody tr:focus-within {
			background-color: rgb(var(--base-100));
			border-color: rgb(var(--action-50))
			}

			[data-stuck] {
			background-color: rgba(var(--base),var(--op-4));
			position: sticky;
			left: -1rem;
			z-index: 15;
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle-right);
			}

			tbody [data-stuck] {
			z-index: 5;
			}

			thead [data-stuck],
			tfoot [data-stuck] {
			background: rgb(var(--base));
			}
			figure:has(table) {
			width: 100%;
			height: max-content;
			}
			/***********************************************
			BUTTONS
			***********************************************/
			button,
			[type=submit],
			a.btn,
			.btn + label,
			li.btn,
			.buttons a {
			--justify:center;
			--align: center;
			--dir: row;
			--wrap: nowrap;
			width: fit-content;
			text-transform: uppercase;
			text-decoration: none;
			background-color: rgb(var(--base-100));
			color: rgb(var(--contrast-50));
			border: 1px solid rgb(var(--base-200));
			border-radius: var(--radius);
			padding: .25rem 1rem;
			font-family: var(--heading);
			cursor: pointer;
			outline: 0;
			min-height: var(--btn);
			display: inline-flex;
			position: relative;
			box-shadow: rgba(var(--base),var(--op-6)) var(--shdw-inset);
			}
			.btn.chip {
			min-height: var(--chip);
			}
			.buttons.left a {
			--justify: flex-start;
			}
			.buttons.right a {
			--justify: flex-end;
			}
			.buttons.x-btw a {
			--justify: space-between;
			}
			button.outline,
			[type=submit].outline,
			a.btn.outline,
			.filters .btn + label,
			.buttons .outline a {
			--color: rgb(var(--contrast));
			background-color: transparent;
			color: var(--color);
			border: 1px solid var(--color);
			}

			button:hover,
			button:focus,
			[type=submit]:hover,
			[type=submit]:focus,
			a.btn:hover,
			a.btn:visited:hover,
			a.btn:focus,
			.btn + label:hover,
			.btn:focus + label,
			.btn:checked + label,
			li.btn:hover,
			li.btn:focus,
			.buttons a:hover,
			.buttons a:visited:hover,
			.buttons a:focus {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			box-shadow: var(--shdw-none);
			}

			button.outline:hover,
			button.outline:focus,
			[type=submit].outline:hover,
			[type=submit].outline:focus,
			a.btn.outline:hover,
			a.btn.outline:visited:hover,
			a.btn.outline:focus,
			.filters .btn + label:hover,
			.filters .btn:focus + label,
			.buttons .outline a:hover,
			.buttons .outline a:visited:hover,
			.buttons .outline a:focus {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			border-color: rgb(var(--action-0));
			}

			button:disabled,
			button:disabled:focus,
			button:disabled:hover,
			[type=submit]:disabled,
			[type=submit]:disabled:focus,
			[type=submit]:disabled:hover,
			.btn:disabled + label,
			.btn:disabled:hover + label,
			.btn:disabled:focus + label {
			opacity: .5;
			cursor: not-allowed;
			background-color: rgb(var(--base-200));
			color: rgb(var(--contrast-200));
			}

			[type=submit] {
			margin: 1rem 0;
			}

			.filters .btn + label,
			.filters button {
			min-height:var(--chip);
			}
			.filters .btn + label {
			background-color: rgb(var(--base-100));
			border: 1px solid rgb(var(--base-200));
			color: rgb(var(--contrast-200));
			}
			.filters .btn:checked + label {
			border-color: rgb(var(--contrast));
			color: rgb(var(--contrast));
			}

			/** WP BLOCK BUTTONS **/
			.buttons {
			--wrap: wrap;
			--justify: flex-start;
			margin: 1rem auto;
			width: 100%;
			padding: 0;
			}
			.buttons li {
			--justify: stretch;
			--align: stretch;
			padding: 0;
			list-style: none;
			overflow: hidden;
			}
			.buttons a {
			width: 100%;
			}
			.buttons.fit {
			width: fit-content;
			margin: 1rem 2rem;
			}
			@media (min-width: 768px) {
			.buttons {
			max-width: var(--content);
			margin: 3rem auto;
			}
			}
			a.sticky,
			button.sticky,
			.main-actions .buttons {
			z-index: var(--z-6);
			position: fixed;
			bottom: var(--btn_);
			}
			body:has(.on-this-page) a.sticky,
			body:has(.on-this-page) button.sticky,
			body:has(.on-this-page) .main-actions .buttons {
			bottom: calc(var(--btn_) + var(--chip_));
			}
			.main-actions .buttons button,
			button.sticky {
			width: var(--btn);
			height: var(--btn);
			background-color: rgba(var(--base),var(--op-4));
			color: rgb(var(--contrast));
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
			transition: var(--trans-size), var(--trans-color);
			}
			.main-actions .buttons button:hover,
			.main-actions .buttons button:focus,
			a.sticky:hover,
			a.sticky:focus,
			button.sticky:hover,
			button.sticky:focus {
			background-color: rgba(var(--action-0),var(--op-6));
			color: var(--action-contrast);
			}
			.main-actions .buttons button:disabled,
			.main-actions .buttons button:disabled:hover,
			.main-actions .buttons button:disabled:focus,
			button.sticky:disabled,
			button.sticky:disabled:hover,
			button.sticky:disabled:focus {
			opacity: .5;
			background-color: rgba(var(--base),var(--op-3));
			color: rgb(var(--contrast));
			}

			.qtoggle {
			left: 0;
			transition: left var(--trans-base), width var(--trans-base), border var(--trans-base), var(--trans-color);
			}
			.main .m-actions .refresh {
			width: var(--btn);
			border-radius: 0;
			background-color: rgb(var(--base-50));
			color: rgb(var(--contrast));
			}
			.main .m-actions .refresh:hover,
			.main .m-actions .refresh:focus {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			}
			.main .refresh .indicator {
			background-color: rgba(var(--base), var(--op-3));
			top: 0;
			right: 0;
			height: 1.1em;
			width: 1.1em;
			}
			.refresh .countdown:not(.counting) {
			display: none;
			}

			.main h2 {
			margin: .5em 0;
			font-size: var(--txt-medium);
			}



			#back-to-top {
			min-height: var(--chip);
			bottom: -3rem;
			right: 0;
			transition: bottom var(--trans-base);
			}
			body:has(.main-actions) #back-to-top {
			right: calc(var(--btn_) + .5rem);
			}
			.scroll-up #back-to-top {
			bottom: 0;
			}
			body:has(.fixed.bottom).scroll-up #back-to-top {
			bottom: var(--btn);
			}

			body:has(.on-this-page).scroll-up.scroll-up #back-to-top {
			bottom: calc(var(--btn) + var(--chip_));
			}
			/******************************************************************
			ACCESSIBILITY
			******************************************************************/
			@@ -1438,216 +2091,284 @@
			width: 1px;
			word-wrap: normal !important;
			}
			input[type=checkbox] + label:focus,
			input[type=checkbox] + label:focus-visible,
			input[type=radio] + label:focus,
			input[type=radio] + label:focus-visible,

			input[type=checkbox]:focus + label,
			input[type=checkbox]:focus-visible + label,
			input[type=radio]:focus + label,
			input[type=radio]:focus-visible + label,
			input:focus,
			input:focus-within {
			outline: 2px solid var(--action-0) !important;
			outline: 2px solid rgb(var(--action-0)) !important;
			outline-offset: 2px !important;
			box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--rgb-light))!important;
			box-shadow: 0 0 0 4px rgba(var(--action-0), var(--op-3))!important;
			}

			[aria-busy="true"] {
			cursor: progress;
			}

			/* Disabled states */
			[aria-disabled="true"],
			[disabled] {
			cursor: not-allowed;
			opacity: .7;
			}

			/******************************************************************
			DETAILS
			******************************************************************/
			details {
			padding: .25rem 0;
			border-top: 1px solid var(--base-200);
			border-bottom: 1px solid var(--base-200);
			[type=checkbox][hidden] + label,
			[type=radio][hidden] + label,
			.btn[hidden] + label {
			display: none!important;
			}
			details[open] {
			background-color: var(--base-50);

			/**************************************************************
			FORM ELEMENTS
			**************************************************************/
			label {
			display: inline-flex;
			align-items: center;
			gap: .5em;
			}
			details summary {
			--wrap: nowrap;
			list-style: none;
			text-transform: uppercase;
			[type=radio],
			[type=checkbox] {
			position: absolute;
			opacity: 0;
			left: var(--offScreen);
			}
			[type=radio] + label,
			[type=checkbox] + label {
			cursor: pointer;
			border: 0;
			transition: background-color var(--transition-base);
			transition-property: background-color, border;
			position: relative;
			padding: .5rem 2.5rem .5rem .5rem;
			}
			.field:is(.radio,.checkbox) fieldset {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: .5rem;
			}
			details summary:hover {
			background-color: var(--base-100);
			border-color: var(--base-100);
			color: var(--contrast);
			transition: background-color var(--transition-base);
			transition-property: background-color, border,color;
			}
			details[open] > summary {
			background-color: var(--base-50);
			}
			details summary::after {
			content: "";
			background-color: var(--contrast-100);
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: contain;
			-webkit-mask-image: var(--details);
			mask-image: var(--details);
			mask-repeat: no-repeat;
			mask-size: contain;
			width: 1.25rem;
			height: 1.25rem;
			margin-left: auto;
			transition: background-color var(--transition-base);
			transition-property: background-color, transform;
			}

			details summary:hover::after,
			details[open] > summary::after {
			background-color: var(--contrast);
			}
			details[open] > summary::after {
			transform: rotate(-540deg);
			transition: background-color var(--transition-base);
			transition-property: background-color, transform;
			}

			details::details-content {
			opacity: 0;
			block-size: 0;
			overflow-y: clip;
			transition: content-visibility var(--timing) allow-discrete, opacity var(--timing), block-size var(--timing);
			}
			details[open]::details-content {
			opacity: 1;
			block-size: auto;
			}
			@media (prefers-reduced-motion: no-preference){
			details {
			interpolate-size: allow-keywords;
			@media(min-width: 768px) {
			.field:is(.radio,.checkbox) fieldset {
			grid-template-columns: repeat(3, 1fr);
			}
			}
			.field:is(.radio,.checkbox,.true-false) label {
			position: relative;
			top: unset;
			left: unset;
			padding: 0 0 0 var(--chip);
			display: inline-flex;
			border: 1px solid transparent;
			font-weight: var(--fw-b);
			font-size: var(--txt-medium);
			}
			[type=radio] + label:hover,
			[type=radio]:focus + label,
			[type=checkbox] + label:hover,
			[type=checkbox]:focus + label {
			color: rgb(var(--action-0));
			}

			[type=radio] + label::before,
			[type=radio] + label::after,
			[type=checkbox] + label::before,
			[type=checkbox] + label::after {
			content: '';
			position: absolute;
			z-index: var(--z-2);
			}
			[type=checkbox] + label::before,
			[type=radio] + label::before {
			z-index: var(--z-1);
			}
			[type=checkbox] + label::after {
			left: .666em;
			top: .125em;
			transform: rotate(45deg);
			width: .25em;
			height: .75em;
			border: solid var(--action-contrast);
			border-width: 0 2px 2px 0;
			display: none;
			}
			[type=checkbox] + label::before,
			[type=radio] + label::before {
			display: block;
			top: .3em;
			left: .3em;
			width: .75rem;
			height: .75rem;
			border: 2px solid rgb(var(--contrast-200));
			background-color: transparent;
			border-radius: var(--radius);
			}
			[type=radio] + label::before {
			border-radius: 50%;
			}

			[type=checkbox]:checked + label::before {
			background-color: rgb(var(--action-0));
			border-color: rgb(var(--base-50));
			}
			[type=checkbox]:checked + label::after {
			display: block;
			}

			[type=radio]:checked + label::before {
			background-color: rgb(var(--action-0));
			box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-inset);
			}
			/ Button checkboxes and radios /
			input.btn + label::before,
			input.btn + label::after {
			display: none;
			}

			/******************************************************************
			FORMS & FIELDS
			******************************************************************/


			textarea,
			input[type=date],
			input[type=number],
			input[type=text],
			input[type=url],
			input[type=email],
			input[type=textarea],
			input[type=tel],
			input[type=password],
			input[type=search] {
			--p-x: 1.5rem;
			input:is([type=date], [type=number], [type=text], [type=url],
			[type=email], [type=tel], [type=password], [type=search],
			[type=datetime-local], [type=time]) {
			font-family: var(--body);
			font-size: var(--medium);
			color: var(--contrast);
			padding: 1rem var(--p-x);
			border-radius: var(--innerRadius);
			background-color: var(--base);
			font-size: var(--txt-medium);
			color: rgb(var(--contrast));
			padding: var(--p-y) var(--p-x);
			border-radius: var(--radius);
			background-color: rgb(var(--base));
			outline: 0;
			border: 1px solid var(--base-100);
			border-bottom: 2px solid var(--contrast-200);
			border: 1px solid rgb(var(--base-100));
			border-bottom: 2px solid rgb(var(--contrast-200));
			width: 100%;
			max-width: 100%;
			margin: 0 4px;
			transition: background-color var(--transition-base);
			transition-property: background-color, border;
			}

			textarea:focus,
			input[type=number]:focus,
			input[type=text]:focus,
			input[type=url]:focus,
			input[type=email]:focus,
			input[type=textarea]:focus,
			input[type=tel]:focus,
			input[type=password]:focus,
			input[type=search]:focus {
			outline: var(--action-50);
			background-color: var(--base-100);
			color: var(--contrast);
			input:is([type=date], [type=number], [type=text], [type=url],
			[type=email], [type=tel], [type=password], [type=search],
			[type=datetime-local], [type=time]):focus {
			outline: rgb(var(--action-50));
			background-color: rgb(var(--base-100));
			color: rgb(var(--contrast));
			}
			textarea::placeholder,
			input::placeholder {
			font-family: var(--body);
			color: var(--base-200);
			color: rgb(var(--base-200));
			}

			.field > label {
			position: relative;
			z-index: var(--z-1);
			display:inline-block;
			top: .75em;
			left: 1em;
			padding: 0 .5em;
			background-color:rgb(var(--base));
			font-size:var(--txt-small);
			font-weight: var(--fw-b-light);
			text-transform:uppercase;
			border: 1px solid transparent;
			}
			.field.selector > label {
			top: 2.25em;
			}
			.field.selector .filter-toggle {
			width: var(--chipchip);
			min-height: var(--chipchip);
			padding: 0;
			}
			.field:not(.radio):not(.checkbox):not(.true-false):not(.taglist):focus-within > label {
			background-color:rgb(var(--action-0));
			color: var(--action-contrast);
			border-radius: 4px;
			}

			.field.taglist, .field.taglist .field {
			border: none;
			}

			.field li.btn {
			min-height: var(--chip);
			}
			/******************************************************************
			SELECT
			******************************************************************/
			select {
			/appearance: none;/
			/-webkit-appearance: none;/
			/-moz-appearance: none;/
			background: var(--base);
			border: 2px solid var(--base-100);
			border-radius: var(--innerRadius);
			color: var(--contrast);
			background: rgb(var(--base));
			border: 2px solid rgb(var(--base-100));
			border-radius: var(--radius);
			color: rgb(var(--contrast));
			cursor: pointer;
			font-family: var(--body);
			font-size: var(--small);
			padding: .5rem 1rem;
			font-size: var(--txt-small);
			padding: var(--sp1);
			width: 100%;
			transition: var(--transition-color);
			}

			select:disabled {
			background-color: var(--base-50);
			border-color: var(--base-100);
			color: var(--base-200);
			background-color: rgb(var(--base-50));
			border-color: rgb(var(--base-100));
			color: rgb(var(--base-200));
			cursor: not-allowed;
			}

			select option {
			background: var(--base);
			color: var(--contrast);
			padding: .5rem;
			background: rgb(var(--base));
			color: rgb(var(--contrast));
			padding: var(--sp1);
			}

			select option:hover,
			select option:focus,
			select option:active,
			select option:checked {
			background: var(--action-0);
			color: var(--base);
			box-shadow: 0 0 0 100px var(--action-0) inset;
			background: rgb(var(--action-0));
			color: rgb(var(--base));
			box-shadow: 0 0 0 100px rgb(var(--action-0)) inset;
			}

			select option:checked {
			background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
			color: var(--base);
			background: rgb(var(--action-0)) linear-gradient(0deg, rgb(var(--action-0)) 0%, rgb(var(--action-0)) 100%);
			color: rgb(var(--base));
			}

			select:hover {
			border-color: var(--action-0);
			border-color: rgb(var(--action-0));
			}

			select:focus {
			border-color: var(--action-0);
			border-color: rgb(var(--action-0));
			}

			/******************************************************************
			SEARCH & SPECIAL INPUTS
			******************************************************************/
			input[type=search]:focus + .clear-search {
			opacity: 1;
			cursor: pointer;
			transition: opacity var(--transition-base);
			}

			.search-container .clear-search {
			opacity: 0;
			cursor: default;
			transition: opacity var(--transition-base);
			max-width: 0;
			padding: 0;
			flex-shrink: 0;
			transition: width var(--trans-base), flex-shrink var(--trans-base);
			}
			.search-container [type="search"]:focus + .clear-search {
			max-width: unset;
			padding: .25rem 1rem;
			flex-shrink: unset;
			}

			.search-container.open.open [hidden] {
			display: block!important;
			}

			.search-container .icon.search {
			padding: 4px 8px;
			color: var(--contrast-200);
			color: rgb(var(--contrast-200));
			--w: 3rem;
			}

			input[type="search"]::-moz-search-clear-button,
			input[type="search"]::-ms-clear,
			input[type="search"]::-ms-reveal,
			@@ -1666,1739 +2387,88 @@
			-webkit-appearance:none;
			}

			.integration .label,
			label {
			text-transform: uppercase;
			font-weight: bold;
			margin-bottom: .5rem;
			display: block;
			}

			/**********************
			SPECIAL FIELDS
			**********************/
			.selected-items {
			--justify: flex-start;
			--gap: .5rem;
			margin-bottom: .5rem;
			}

			.selected-item {
			padding: .25rem .5rem;
			margin: .125em;
			background: var(--base-100);
			border-radius: .25rem;
			font-size: var(--medium);
			border: 1px solid var(--base-200);
			position: relative;
			}

			.remove-item {
			background: none;
			border: none;
			padding: .25rem;
			cursor: pointer;
			color: #666;
			border-radius: var(--innerRadius);
			width: 1.5em;
			height: 1.5em;
			}
			.remove-item .close {
			width: .5em;
			height: .5em;
			}

			.remove-item:hover {
			color: var(--action-0);
			background: #fee;
			}

			.clear-filters {
			margin-left: auto;
			border: 1px solid var(--base-200);
			}
			[type=radio],
			[type=checkbox],
			input.ch {
			position: absolute;
			opacity: 0;
			left: -200vw;
			}
			/* Pseudo checkbox */
			[type=radio] + label,
			[type=checkbox] + label,
			input.ch + label {
			position: relative;
			cursor: pointer;
			}
			[type=radio] + label:hover,
			[type=checkbox] + label:hover {
			color: var(--action-0);
			}
			[type=radio] + label::before,
			[type=checkbox] + label::before,
			input.ch + label::before,
			[type=radio] + label::after,
			[type=checkbox] + label::after,
			input.ch + label::after {
			content: '';
			position: absolute;
			top: 50%;
			}


			[type=radio] + label::after,
			[type=checkbox] + label::after,
			input.ch + label::after {
			left: 5px;
			transform: translateY(-70%) rotate(45deg);
			width: 5px;
			height: 10px;
			border: solid var(--light-0);
			border-width: 0 2px 2px 0;
			display: none;
			}




			[type=radio] + label::before,
			[type=checkbox] + label::before,
			input.ch + label::before {
			left: 0;
			transform: translateY(-50%);
			width: 1rem;
			height: 1rem;
			border: 2px solid var(--contrast-200);
			background-color: var(--base);
			border-radius: var(--innerRadius);
			transition: background-color var(--transition-base),
			border-color var(--transition-base);
			}
			[type=radio]:hover + label::before,
			[type=checkbox]:hover + label::before,
			input.ch:hover + label::before {
			border-color: var(--action-200);
			}

			[type=radio]:checked + label::before,
			[type=checkbox]:checked + label::before,
			input.ch:checked + label::before {
			background-color: var(--action-0);
			border-color: var(--action-100);
			}

			[type=radio]:checked + label::before {
			border-radius: 50%;
			}

			[type=checkbox]:checked + label::after,
			input.ch:checked + label::after {
			display: block;
			left: 5px;
			top: 50%;
			transform: translateY(-70%) rotate(45deg);
			width: .35rem;
			height: .66rem;
			border: solid var(--light-0);
			border-width: 0 2px 2px 0;
			}

			[type=radio]:disabled + label,
			[type=checkbox]:disabled + label,
			input.ch:disabled + label {
			cursor: not-allowed;
			background-color: var(--base-50);
			color: var(--base-200);
			border-color: var(--base-200);
			}
			[type=radio]:disabled + label:hover,
			[type=checkbox]:disabled + label:hover,
			input.ch:disabled + label:hover {
			background-color: var(--base-50);
			color: var(--base-200);
			border-color: var(--base-200);
			}
			[type=radio]:disabled + label::before,
			[type=checkbox]:disabled + label::before,
			input.ch:disabled + label::before {
			border-color: var(--base-200);
			}

			[type=radio]:not(.btn) + label,
			[type=checkbox]:not(.btn) + label,
			input.ch + label {
			flex: 1;
			padding-left: 2rem;
			transform-origin: top center;
			transition: transform .3s ease;
			will-change: transform;
			}

			/* Non-pseudo checkbox, that acts more like a button/pill style */
			.btn + label::before,
			.btn + label::after {
			display: none;
			}
			.btn + label {
			--w: 1.2em; /* For icons */
			border: 1px solid var(--base-200);
			border-radius: var(--innerRadius);
			min-width: 2rem;
			min-height: 2rem;
			margin: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			gap: .5rem;
			color: var(--contrast-200);
			opacity: .8;
			}
			.radio-options.status label {
			padding: 0 .5rem;
			}
			.btn:checked + label {
			border-color: var(--contrast);
			color: var(--contrast);
			opacity: 1;
			}

			.btn + label:hover {
			color: var(--action-50);
			border-color: var(--action-50);
			}

			.btn[hidden] + label {
			display: none;
			}

			/* DATE */
			.date-wrapper {
			position: relative;
			display: inline-block;
			}
			input[type=date] {
			padding: 8px 36px 8px 8px;
			/border: 1px solid #ccc;/
			border-radius: 4px;
			}
			input[type=date]::-webkit-calendar-picker-indicator {
			opacity: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			cursor: pointer;
			}
			input[type=date] + .icon {
			--w: 20px;
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			pointer-events: none; /* This allows clicks to pass through to the input below */
			}

			/ TIME /


			input[type=url] {
			background: var(--linkIcon);
			background: var(--icon);
			background-position: .5em;
			background-size: 1em;
			background-repeat: no-repeat;
			padding-left: 2em;
			}


			.field {
			margin: 2rem 0;
			position: relative;
			}
			.field:has(.has-tooltip) label {
			margin-left: 2rem;
			}
			/***************
			TOGGLE TEXT
			***************/
			.toggle-text input {
			display: none;
			}

			.toggle-text input + label {
			font-weight: normal;
			color: var(--contrast)!important;
			text-transform: none;
			cursor: pointer;
			position: relative;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			}
			.toggle-text label::before,
			.toggle-text label::after {
			display: none;
			}
			.toggle-text label {
			padding-left: 0!important;
			}

			.toggle-text input + label .text {
			position: relative;
			margin: 0 .5rem;
			font-weight: bold;
			width: fit-content;
			padding: 2px 4px;
			border: 1px solid var(--action-50);
			border-radius: 4px;
			color: var(--action-50)!important;
			}
			table .toggle-text input+label .text {
			color: var(--contrast)!important;
			border-color: var(--contrast);
			}
			.toggle-text:hover .text,
			table .toggle-text:hover .text {
			background-color: var(--action-50);
			color: var(--light-0)!important;
			border-color: var(--action-50);
			}

			.toggle-text input + label .off,
			.toggle-text input + label .on {
			/left: 0;/
			/position: absolute;/
			/top: 0;/
			-webkit-transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
			transition: opacity .125s ease-out, -webkit-transform .125s ease-out;
			transition: transform .125s ease-out, opacity .125s ease-out;
			transition: transform .125s ease-out, opacity .125s ease-out, -webkit-transform .125s ease-out;
			}

			.toggle-text input + label .off {
			opacity: 1;
			max-width: 100%;
			-webkit-transform: none;
			transform: none;
			}

			.toggle-text input + label .on {
			opacity: 0;
			max-width: 0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			}

			.toggle-text input:checked + label .off {
			opacity: 0;
			max-width: 0;
			-webkit-transform: translate3d(0, -100%, 0);
			transform: translate3d(0, -100%, 0);
			}

			.toggle-text input:checked + label .on {
			max-width: 100%;
			opacity: 1;
			-webkit-transform: none;
			transform: none;
			}


			/******************************************************************
			TAXONOMY SELECTOR
			******************************************************************/
			.items-container {
			margin: 0;
			padding: 0;
			width: 100%;
			}
			.create-new-term {
			margin-top: 1rem;
			width: 100%;
			}
			.create-new-term .field,
			.create-new-term[open] summary {
			margin-bottom: 1rem;
			}
			.create-new-term .field {
			max-width: 100%;
			}
			#jvb-selector > .wrap {
			--gap: nowrap;
			}
			/******************************************************************
			QUANTITY FIELD
			******************************************************************/
			.quantity {
			margin: 0;
			}
			.quantity label {
			margin: 0;
			font-size: var(--small);
			}
			.quantity {
			display: inline-flex;
			width: fit-content;
			align-items: center;
			justify-content: center;
			border: 1px solid transparent;
			border-radius: 4px;
			position: relative;
			}
			.quantity:focus-within {
			border-color: var(--action-0);
			}

			.quantity button {
			background: var(--base);
			padding: 0;
			width: 38px;
			height: 38px;
			z-index: 0;
			position: relative;
			border: 1px solid var(--base-200);
			color: var(--contrast-200);
			}
			.quantity button:hover:not(:disabled) {
			color: var(--action-0);
			border-color: var(--action-0);
			background-color: var(--base);
			}
			.quantity button:active:not(:disabled) {
			background-color: var(--action-0);
			color: var(--light-0);
			transform: scale(.95);
			}
			.quantity button:disabled {
			opacity: .5;
			cursor: not-allowed;
			}
			.quantity input[type=number] {
			z-index: 1;
			border: 1px solid var(--base-200);
			background: var(--base);
			text-align: center;
			font-size: 1.1rem;
			width: 60px;
			height: 48px;
			margin: 0;
			padding: 0!important;
			appearance: textfield;
			}
			.quantity input[type=number]::-webkit-outer-spin-button,
			.quantity input[type=number]::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
			}
			.quantity input[type=number]:focus {
			background-color: var(--base-50);
			}
			.quantity button.increase {
			left: -2px;
			border-radius: 0 4px 4px 0;
			}
			.quantity button.decrease {
			right: -2px;
			border-radius: 4px 0 0 4px;
			}

			/**************************************************
			LIST OVERRIDES
			**************************************************/
			.term-list {
			--justify: flex-start;
			--align: center;
			--wrap: nowrap;
			--gap: .5rem;
			--w: 1em;
			margin: 0;
			padding: 0;
			height: var(--height);
			display: flex;
			justify-content: var(--justify);
			align-items: var(--align);
			gap: var(--gap);
			flex-wrap: var(--wrap);
			flex-direction: var(--dir);
			position: relative;
			overflow: auto hidden;
			touch-action: pan-x;
			text-transform: lowercase;
			}
			/.term-list a {/
			/* color: var(--contrast);*/
			/* text-decoration: none;*/
			/* font-size: var(--small);*/
			/* }*/
			/* .term-list a:hover {*/
			/* color: var(--action-0);*/
			/* }*/
			/.term-list.shop a::before,/
			/.term-list.style a::before,/
			/.term-list.theme a::before,/
			/.term-list.city a::before,/
			/#by-city::before,/
			/#by-style::before,/
			/#by-theme::before,/
			/.term-list.all a::before{/
			/* content:"";*/
			/* display:inline-block;*/
			/* mask-repeat: no-repeat;*/
			/* mask-size: contain;*/
			/* width: 1.2em;*/
			/* height: 1.2em;*/
			/* margin-right: .5rem;*/
			/* vertical-align: middle;*/
			/* background-color: currentColor;*/
			/}/
			/.term-list a::after {/
			/* display: none;*/
			/}/

			/.term-list.shop a::before {/
			/* mask-image: var(--shop);*/
			/}/

			/.term-list.city a::before,/
			/#by-city::before {/
			/* mask-image: var(--map);*/
			/}/
			/.term-list.style a::before,/
			/#by-style::before,/
			/.term-list.all.styles a::before {/
			/* mask-image: var(--style);*/
			/}/
			/.term-list.theme a::before,/
			/#by-theme::before {/
			/* mask-image: var(--theme);*/
			/}/
			/**************************************************
			MODALS DIALOGUE
			**************************************************/
			dialog::backdrop {
			backdrop-filter: blur(5px);
			background-color: var(--overlay-medium);
			}

			dialog[open] {
			z-index:999;
			--padding: 0;
			top: 5vh;
			width: min(500px, 95vw);
			border-radius: 1rem;
			height: fit-content;
			overflow: hidden;
			max-height: 90vh;
			padding: var(--padding);
			background-color: var(--base-50);
			color: var(--contrast);
			border: 1px solid var(--base-200);
			box-shadow: var(--shadow);
			}

			dialog > .wrap,
			dialog > form {
			max-height: 100%;
			overflow: hidden auto;
			margin: 0 0 0 1.5rem;
			padding-right: 1.2rem;
			width: calc(100% - 1.5rem);
			}

			dialog label {
			font-weight: normal;
			}

			dialog h2,
			dialog h3 {
			margin: 0 0 .5rem 0;
			font-size: var(--large);
			}

			dialog:has(.m-actions){
			padding-bottom: var(--height);
			}
			.m-actions {
			--w: 1.15em;
			--justify: flex-end;
			--wrap: nowrap;
			--gap: 0;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			z-index: var(--z-6);
			background-color: var(--action-100);
			box-shadow: var(--shadow-up);
			}
			.m-actions button {
			width: 100%;
			height: 3rem;
			border-radius: 0;
			color: var(--action-contrast);
			background-color: var(--action-50);
			border: 2px solid var(--action-50);
			}
			.m-actions button:hover,
			.m-actions button:focus {
			background-color: var(--base);
			color: var(--contrast);
			}
			.m-actions button:first-of-type {
			border-bottom-left-radius: 1rem;
			}
			.m-actions button:last-of-type {
			border-bottom-right-radius: 1rem;
			}
			dialog ul {
			list-style: none;
			}

			dialog .search-container {
			padding-top: 1rem;
			width: 100%;
			gap: .5rem;
			}
			/****************
			GALLERY
			****************/
			dialog[open].gallery {
			width: calc(100vw - var(--padding) * 2);
			height: 99vh;
			background: var(--overlay-heavy);
			}

			.gallery .content {
			position: relative;
			max-width: 100%;
			max-height: 100%;
			padding: 2rem;
			}
			.gallery .favourite button.favourite {
			top: unset;
			bottom: 1rem;
			right: 1rem;
			}

			.gallery .image {
			max-width: 100%;
			max-height: calc(100vh - 4rem);
			object-fit: contain;
			}

			.gallery .cancel {
			position: absolute;
			top: 1rem;
			right: 1rem;
			background: none;
			border: none;
			color: white;
			cursor: pointer;
			padding: .5rem;
			z-index: 10;
			transition: color .3s ease;
			}

			.gallery .cancel:hover {
			color: var(--action-0);
			}

			.gallery .nav {
			position: absolute;
			top: 50%;
			height: 50%;
			z-index: 5;
			transform: translateY(-50%);
			border: none;
			color: var(--contrast);
			cursor: pointer;
			padding: 1rem;
			transition: color .3s ease;
			}
			.gallery .nav:hover {
			background-color: var(--overlay-heavy);
			}

			.gallery .nav:hover {
			color: var(--action-0);
			}

			.gallery .prev {
			left: 1rem;
			}

			.gallery .next {
			right: 1rem;
			}

			.gallery .counter {
			position: absolute;
			top: 1rem;
			left: 1rem;
			color: white;
			font-size: .875rem;
			}

			.gallery .content details {
			position:absolute;
			bottom: 1rem;
			left: 2rem;
			width: calc(100% - 4rem);
			background-color: var(--overlay-light);
			padding: 0;
			}
			.gallery .content details:hover,
			.gallery .content details[open] {
			background-color: var(--overlay-heavy);
			backdrop-filter: blur(5px);
			}
			.gallery .content details[open] summary {
			background-color: transparent;
			}
			/**************************************************
			TABLES
			**************************************************/
			table {
			white-space: nowrap;
			width: 100%;
			display: block;
			margin: 0 0 2rem;
			border-radius: 4px;
			height: var(--maxHeight);
			overflow: auto;
			position: relative;
			}
			thead,tfoot {
			position: sticky;
			z-index: 10;
			background-color: var(--base);
			text-transform: uppercase;
			padding: .5rem 0;
			line-height: 2;
			font-weight: normal;
			}

			tr:nth-of-type(even){
			background-color: var(--base-200);
			}
			tfoot th {
			vertical-align: middle;
			}
			tfoot th:first-of-type {
			text-align: right;
			}
			tbody {
			}
			thead tr, tfoot tr {
			background-color: var(--overlay-heavy);
			box-shadow: var(--shadow);
			}
			thead tr {
			border-bottom: 1px solid var(--contrast-200);
			}
			tfoot tr {
			border-top: 1px solid var(--contrast-200);
			}
			thead {
			top: 0;
			}
			tfoot {
			bottom: 0;
			}
			thead th {
			width: max-content;
			}
			th p {
			margin: 0!important;
			}
			td {
			width: max-content;
			padding: .5rem 1rem;
			}

			td .toggle input[type=checkbox] {
			margin: 0;
			}
			td .field {
			margin: .25rem 0;
			}
			td[data-id="actions"] label {
			margin: 0;
			padding: 0;
			}
			td .description {
			display: none;
			}
			td input[type=text] {
			width: fit-content;
			max-width: 40vw;
			padding: .25em!important;
			font-size: var(--small)!important;
			}

			tbody tr {
			border: 2px solid transparent;
			}
			tbody tr:focus-within {
			background-color: var(--base-100);
			border-color: var(--action-50)
			}

			[data-stuck] {
			background-color: var(--overlay-medium);
			position: sticky;
			left: -1rem;
			z-index: 15;
			box-shadow: var(--subtleRight);
			}
			tbody [data-stuck] {
			z-index: 5;
			}
			thead [data-stuck],
			tfoot [data-stuck] {
			background: var(--base);
			}

			/**************************************************
			BLOCKQUOTE
			**************************************************/
			blockquote {
			padding: var(--outerPadding);
			border-radius: var(--outerRadius);
			background-color: var(--base-50);
			}

			cite {
			width: 90%;
			margin: 1rem auto;
			}
			/**************************************************
			TOOLTIP
			**************************************************/
			[role=tooltip],
			.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
			visibility: hidden;
			position: absolute;
			bottom: 2rem;
			left: 1rem;
			width: max-content;
			height:fit-content;
			max-width: 50vw;
			padding: .5rem;
			border-radius: var(--innerRadius);
			box-shadow: var(--shadow);
			background: var(--action-0);
			color: var(--action-contrast);
			}

			body.menu_item [role=tooltip] {
			left: auto;
			right: 100%;
			top: -200%;
			z-index: var(--z-4);
			}
			[role=tooltip] p {
			margin: 0;
			}
			[role=tooltip] p + p {
			margin-top: .5rem;
			}

			/.field:has([aria-describedby]:hover) [role=tooltip],/
			.field:has([aria-describedby]:focus) [role=tooltip],
			[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
			[aria-describedby]:focus ~ .has-tooltip[role="tooltip"] {
			visibility: visible;
			display: block;
			}
			.has-tooltip {
			display: inline-flex;
			justify-content: flex-end;
			position: absolute;
			top: 0;
			left: 0;
			--w: 1.5rem
			}
			.tt-toggle {
			cursor: pointer;
			display: flex;
			border-radius: 50%;
			background-color: transparent;
			}
			.tt-toggle:hover,
			.tt-toggle:focus {
			background-color: var(--action-0);
			color: var(--action-contrast);
			}
			.tt-toggle:hover + [role=tooltip],
			.tt-toggle:focus + [role=tooltip] {
			visibility: visible;
			}

			/************************************************************
			SELECTOR
			************************************************************/
			dialog[open]#jvb-selector {
			height: 70vh;
			top: 15vh;
			display: flex;
			}
			#jvb-selector > .wrap {
			flex: 1;
			}

			/******************************************************************
			LOADING
			******************************************************************/
			dialog.loading {
			opacity: 0;
			transition: opacity var(--transition-base);
			}
			dialog.loading[open] {
			opacity: 1;
			transition: opacity var(--transition-base);
			width: 100vw;
			height: 100vh;
			display: flex;
			max-width: 100%;
			max-height: 100%;
			border-radius: 0;
			border: none;
			background-color: transparent;
			box-shadow: none;
			--w: 3em;
			justify-content: center;
			align-items: center;
			}
			dialog.loading[open]@starting-style {
			opacity: 0;
			}
			dialog.loading[open] > .col {
			height: fit-content;
			width: min(400px, 60vw);
			border-radius: var(--outerRadius);
			background-color: var(--overlay-medium);
			padding: 2rem;
			box-shadow: var(--shadow);
			position: relative;
			}

			dialog.loading[open] .spinner {
			position: absolute;
			top: 1rem;
			width: 5rem;
			height: 5rem;
			border-width: 0;
			border-top-width: 4px;
			animation: spin 1s var(--function) infinite;
			}
			.loading[open] .icon {
			color: var(--action-0);
			}

			dialog.loading[open] svg {
			animation: dance 2s ease-in-out infinite;
			transition: color .3s ease;
			}
			dialog.loading[open] h3 {
			color: var(--contrast);
			margin: 2rem 1rem auto !important;
			font-size: var(--large);
			width: -moz-fit-content;
			width: fit-content;
			/-webkit-text-stroke: 1px var(--contrast);/
			/--g: conic-gradient(var(--action-0) 0 0) no-repeat text;/
			/animation: letterOutline 1s linear infinite alternate, letterInside 2s linear infinite;/
			/background: var(--g) 0, var(--g) 1ch, var(--g) 2ch, var(--g) 3ch, var(--g) 4ch, var(--g) 5ch, var(--g) 6ch;/
			}

			dialog.loading[open] p {
			margin: .5rem auto;
			}

			dialog.loading[open]::after {
			animation: shimmer 3s ease-in-out infinite;
			background: linear-gradient(90deg, var(--shimmer));
			content: "";
			inset: 0;
			position: absolute;
			z-index: -1;
			}

			.spinner {
			width: 12px;
			height: 12px;
			border: 2px solid transparent;
			border-top: 2px solid var(--action-50);
			border-radius: 50%;
			animation: spin 1s var(--function) infinite;
			}

			@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
			}

			@keyframes shimmer {
			0% {
			left: -50%;
			}
			50% {
			left: 150%;
			}
			100% {
			left: -50%;
			}
			}


			@keyframes dance {
			0%, 100% {
			transform: rotate(-5deg) scale(1);
			}
			50% {
			transform: rotate(5deg) scale(1.1);
			}
			}

			@keyframes letterOutline {
			0% {
			background-size: 1ch 0;
			}
			100% {
			background-size: 1ch 100%;
			}
			}

			@keyframes letterInside {
			0%, 50% {
			background-position-y: 100%,0;
			}
			50.01%, 100% {
			background-position-y: 0, 100%;
			}
			}

			/******************************
			TABS
			******************************/
			**************************************************/
			.tab-content[hidden] {
			display: block!important;
			transform: scaleY(0);
			height: 0;
			max-height: 0;
			overflow: hidden;
			}
			.tab-content[hidden]:focus-within {
			transform: scaleY(1);
			height:auto;
			}

			nav.tabs h2 {
			margin: 0!important;
			line-height: 1;
			font-size: var(--medium);
			display: flex;
			color: var(--contrast);
			white-space: nowrap;
			gap: 1rem;
			}
			nav.tabs .active h2 {
			color: var(--action-contrast);
			}
			nav.tabs button {
			padding: .75rem 1.5rem;
			border-radius: 0;
			position: relative;
			border: 2px solid var(--action-0);
			}
			nav.tabs > button:first-of-type {
			border-top-left-radius: var(--innerRadius);
			}
			nav.tabs > button:last-of-type {
			border-top-right-radius: var(--innerRadius);
			}
			.tabs > button:hover,
			.tabs > button:focus {
			background-color: var(--base-200);
			}

			.tabs > button::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 0;
			height: 3px;
			background-color: var(--action-50);
			transition: width .3s;
			}
			.tabs > button:hover::after,
			.tabs > button.active::after {
			width: 100%;
			}
			.tabs > button.active::after {
			background-color: var(--action-200);
			}
			.tabs > button.active {
			background-color: var(--action-0);
			color: var(--action-contrast);
			}
			.tabs > button.active:hover,
			.tabs > button.active:focus {
			background-color: var(--action-100);
			}
			.tab-content h2 {
			display: none;
			}
			/*****************************************************************************
			MENU
			*****************************************************************************/
			.toggle-details {
			gap: 2px;
			}
			body.menu_item #top {
			z-index: var(--z-4);
			position: relative;
			}
			section .toggle-details {
			position: absolute;
			right: 0;
			top: 5rem;
			}

			[data-toggle=all] {
			position: fixed;
			bottom: calc(var(--offHeight) + var(--height) + .5rem);
			right: 0;
			z-index: var(--z-4);
			background-color: var(--action-0);
			color: var(--action-contrast);
			}
			[data-toggle] {
			z-index: var(--z-1);
			}
			body:has(#queue[hidden]) [data-toggle=all] {
			left: 1rem;
			}
			dialog:not([open]).col,
			dialog:not([open]).row {
			display: none;
			}

			@media (min-width:768px) {
			section .toggle-details {
			right: -10%;
			.tab-content[hidden]:focus-within {
			transform: scaleY(1);
			max-height: max-content;
			}
			}
			/********************************************
			TYPE TEXT
			********************************************/
			/* Cursor, for typing messages */
			.typeText::after {
			content: '\|';
			display: inline-block;
			margin-left: 0;
			animation: blink .75s step-end infinite;
			}
			@keyframes blink {
			from, to { opacity: 1; }
			50% { opacity: 0; }
			}

			/**************************************************
			POPUPS:
			- toast container
			- cart
			- queue
			CARD
			**************************************************/
			aside {
			position: fixed;
			top: var(--doubleHeight);
			bottom: var(--offHeight);
			width: min(500px, calc(100vw - 2rem));
			background-color: var(--base);
			z-index: var(--z-5);
			box-shadow: var(--shadow);
			padding-bottom: var(--height);
			overflow: visible;
			.item-grid.stats {
			margin: 1rem 0;
			}

			.qtoggle,
			/.toggle-cart,/
			.create-item {
			z-index: var(--z-6);
			position: fixed;
			bottom: var(--offHeight);
			width: var(--height);
			height: var(--height);
			background-color: var(--overlay-medium);
			color: var(--contrast);
			transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
			box-shadow: var(--shadow);
			.card {
			background-color: rgb(var(--base-100));
			border-radius: var(--radius);
			box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
			aspect-ratio: 3/2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			}
			/.toggle-cart:hover,/
			.qtoggle:hover,
			.create-item:hover,
			/.toggle-cart:focus,/
			.qtoggle:focus,
			.create-item:focus {
			background-color: rgba(var(--action-rgb),var(--rgb-heavy));
			color: var(--action-contrast);
			}
			/.toggle-cart:disabled,/
			.qtoggle:disabled,
			.create-item:disabled,
			/.toggle-cart:disabled:hover,/
			.qtoggle:disabled:hover,
			.create-item:disabled:hover,
			/.toggle-cart:disabled:focus,/
			.qtoggle:disabled:focus,
			.create-item:disabled:focus {
			opacity: .5;
			background-color: var(--overlay-light);
			color: var(--contrast);
			}
			/******************
			CART
			******************/
			.create-item,
			.toggle-cart {
			right: 0;
			border-radius: 4px 4px 4px var(--outerRadius);
			}

			body:has(#cart.expanded) .toggle-cart .icon {
			display: none;
			}

			aside#cart {
			padding-bottom: 6rem;
			}
			#cart form {
			max-height: 100%;
			overflow: hidden auto;
			}
			#cart nav.tabs {
			z-index: var(--z-6);
			top: 0;
			}
			#cart table {
			height: auto;
			}
			#cart th {
			padding: 0 1.5rem;
			}
			#cart table th:first-of-type {
			width: 100%;
			}

			#cart nav.tabs {
			position: sticky;
			box-shadow: var(--shadow);
			}
			#cart button[data-tab] {
			flex: 1;
			border-radius: 0;
			}

			#cart form > *:not(.tabs) {
			max-width: 90%;
			margin: 0 auto;
			}

			#cart form .empty p {
			margin: .5rem 0!important;
			}

			#cart .cart-total.cart-total {
			--gap: 0 1rem;
			padding-right: 1rem;
			position: absolute;
			bottom: var(--height);
			width: 100%;
			max-width: 100%;
			background-color: var(--overlay-heavy);
			z-index: var(--z-6);
			box-shadow: var(--shadow-up);
			}
			.cart-total p {
			--gap: 2rem;
			max-width: 100%;
			margin: 0;
			}
			.cart-total p span {
			width: 6rem;
			display: inline-block;
			text-align: right;
			}
			.cart-total p + p {
			font-weight: bold;
			}

			.cart-items .total {
			font-weight: bold;
			}
			#cart .restored {
			background-color: rgba(var(--action-rgb), var(--rgb-light));
			border-radius: var(--outerRadius);
			padding: 1rem;
			}
			.restored h3 {
			font-size: var(--medium);
			margin: 0;
			}
			.restored p {
			margin: 0;
			}
			.restored .row {
			--gap: 0;
			--wrap:nowrap;
			--w: 1em;
			}
			/******************
			TOAST
			******************/
			.toasts {
			position: fixed;
			top: 4rem;
			right: -350px;
			z-index: 1000;
			width: 350px;
			}

			.toast {
			background-color: var(--overlay-heavy);
			border-left: 4px solid var(--action-0);
			padding: 1rem;
			box-shadow: var(--shadow);
			left: 0;
			position: relative;
			opacity: 0;
			transition: left .3s, opacity .3s;
			}

			.toast.success {
			border-left-color: var(--success);
			}

			.toast.error {
			border-left-color: var(--error);
			}

			.toast.info {
			border-left-color: var(--warning);
			}

			.toast.show {
			left: calc(-350px - 1rem);
			opacity: 1;
			}

			.toast.hiding {
			left: 0;
			opacity: 0;
			}

			.toast-content p {
			margin: 0;
			}

			.close-toast {
			background: none;
			border: none;
			font-size: 1.25rem;
			cursor: pointer;
			opacity: .5;
			transition: opacity .2s;
			color: inherit;
			}

			.close-toast:hover {
			opacity: 1;
			}
			/******************
			QUEUE
			******************/

			.qtoggle {
			left: 0;
			border-radius: 4px 4px var(--outerRadius) 4px;
			}

			.qtoggle.expanded {
			left: var(--height);
			width: min(calc(500px - var(--height)), calc(100vw - 2rem - var(--height)));
			}

			.qtoggle.saving svg {
			color: var(--action-0);
			animation: spin .87s var(--function) infinite;
			}

			#queue .status-actions {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: var(--z-2);
			}

			#queue .status-actions .popup {
			position: absolute;
			z-index: -1;
			width: max-content;
			max-width: 300px;
			background-color: var(--action-50);
			color: var(--action-contrast);
			border-radius: var(--innerRadius);
			padding: .25em .75em;
			top: 1rem;
			left: -100vw;
			transition: left var(--transition-base);
			}
			aside#queue .popup::before{
			content: '';
			width: 10px;
			height: 10px;
			transform: rotate(-45deg);
			background-color: var(--action-50);
			z-index: -1;
			left: -5px;
			position: absolute;
			top: calc(50% - 5px);
			}

			.expanded#queue .status-actions .popup.showing {
			left: calc(100% + 1em);
			}
			#queue .status-actions .popup.showing {
			left: calc(200vw + var(--offHeight));
			max-width: 75vw;
			}

			/ BADGES /

			.refresh .countdown,
			#queue .item .status,
			.filter .count,
			.qtoggle .count,
			.qtoggle .indicator {
			z-index: var(--z-3);
			--offset: 0;
			position: absolute;
			top: var(--offset);
			background-color: var(--overlay-light);
			}
			.expanded + .qtoggle .indicator,
			.expanded + .qtoggle .count {
			--offset: .25rem;
			}
			/* Status indicator */
			.qtoggle .indicator {
			right: var(--offset);
			width: .75rem;
			height: .75rem;
			border-radius: 50%;
			}

			aside#queue.synced + .qtoggle .indicator {
			background-color: var(--success);
			}

			aside#queue.pending + .qtoggle .indicator {
			background-color: var(--warning);
			animation: pulse 2s infinite;
			}
			aside#queue.pending:not(.expanded) + .qtoggle svg {
			color: var(--error);
			animation: spin 1s var(--function) infinite;
			}

			/* Status count badge */
			.qtoggle .count {
			--align: center;
			--justify: center;
			left: var(--offset);
			min-width: 1.25rem;
			height: 1.25rem;
			padding: 0 4px;
			color: var(--contrast);
			border-radius: var(--innerRadius);
			font-size: var(--extra-small);
			}

			#queue:has(.empty-queue) + .qtoggle .count {
			display: none;
			}

			aside#queue .header {
			padding: 15px;
			border-bottom: 1px solid var(--base-200);
			flex-shrink: 0;
			}
			.qitems {
			flex: 1;
			overflow: hidden auto;
			padding: .5rem 2rem;
			--gap: .5rem;
			}

			aside#queue h3 {
			margin: 0 0 12px 0;
			font-size: 16px;
			color: var(--contrast);
			}

			#queue .filters .filter {
			background-color: transparent;
			white-space: nowrap;
			font-size: var(--small);
			}

			#queue .filters .filter.active {
			background: var(--base-200);
			border-color: transparent;
			}
			#queue .filter:hover,
			#queue .filter:focus {
			background-color: var(--action-0);
			color: var(--action-contrast);
			}


			/* Filter count badge */
			.filter .count {
			--offset: -8px;
			right: var(--offset);
			background: var(--base-200);
			color: var(--contrast-200);
			border-radius: 10px;
			min-width: 18px;
			height: 18px;
			font-size: 10px;
			}
			.filter .count:empty {
			display: none;
			}

			/* Empty state */
			.empty-queue {
			height: 100px;
			color: var(--contrast-200);
			font-size: var(--small);
			font-style: italic;
			}

			.refresh .countdown:not(.counting),
			aside#queue:has(.empty-queue) .refresh .count {
			display: none;
			}

			/* Queue items */
			#queue .item {
			padding: 15px;
			background: var(--base-100);
			border-radius: var(--innerRadius);
			transition: all .2s ease;
			box-shadow: var(--shadow-none);
			}

			#queue .item:hover {
			box-shadow: var(--shadow);
			}

			#queue .item .header {
			position: relative;
			}

			#queue .item .type {
			font-size: var(--small);
			}

			#queue .item .status {
			--w: 1em;
			--gap: 0;
			--justify:center;
			--align: center;
			--offset: -1.2rem;
			aspect-ratio: 1;
			right: var(--offset);
			border-radius: 50%;
			color: var(--contrast-200);
			background-color: var(--base-50);
			border: 1px solid var(--base-200);
			width: 1.25em;
			height: 1.25em;
			}

			#queue .item .status.pending {
			background: var(--base-100);
			color: var(--contrast-200);
			}
			#queue .item .status.processing {
			background: var(--base-200);
			color: var(--contrast-100);
			animation: pulse-color 2s infinite;
			}

			#queue .item .status.completed {
			background: var(--base-50);
			color: var(--base-200);
			}
			#queue .item .status.completed:hover {
			color: var(--contrast-200);
			}

			#queue .item .status.failed {
			background: var(--base);
			color: var(--error);
			}


			#queue .item button {
			font-size: 16px;
			padding: 0;
			line-height: 1;
			opacity: .5;
			transition: opacity .2s;
			}

			#queue .item button:hover {
			opacity: 1;
			}

			/* Item details */
			#queue .item .info {
			margin-top: 8px;
			font-size: var(--small);
			}
			#queue .item .info .time {
			--gap: 7px;
			font-size: 10px;
			}

			/* Item actions */
			#queue .item .actions {
			margin-top: 12px;
			--gap: 8px;
			}

			#queue .item .actions button {
			padding: 6px 12px;
			font-size: 12px;
			background: var(--base-200);
			border: none;
			border-radius: 4px;
			cursor: pointer;
			transition: all .2s;
			color: var(--contrast);
			}

			#queue .item .actions .retry {
			background-color: var(--secondary-200);
			color: var(--secondary-contrast);
			}


			#queue .item .actions button:hover {
			opacity: .9;
			}

			/* Queue actions footer */
			.queue-actions {
			padding: 15px;
			border-top: 1px solid var(--base-200);
			flex-shrink: 0;
			}

			.queue-actions button {
			padding: 8px 12px;
			font-size: var(--small);
			transition: all .2s;
			}


			/* Refresh area */
			.status-actions > .refresh {
			position: relative;
			font-size: var(--small);
			}

			.refresh .countdown {
			--justify:center;
			--align: center;
			--offset: 0;
			right: var(--offset);
			margin: 0 3px;
			border-radius: 50%;
			border: 1px solid var(--base-200);
			}

			.refreshNow {
			width: var(--height);
			height: var(--height);
			}

			.refreshNow:hover {
			background: var(--base-200);
			color: var(--contrast-200);
			}

			.icon.refresh {
			--w: 18px;
			}

			/* Refreshing animation */
			#queue.pending.expanded .refreshNow svg {
			animation: spin 1.5s var(--function) infinite;
			}
			/**************************************************
			DELAY
			**************************************************/
			/* Initialize counter on the parent container */
			.item-grid, #queue {
			counter-reset: delay-counter;
			}

			/* Increment counter for each item */
			.item {
			counter-increment: delay-counter;
			}

			/* Use counter value to calculate delay */
			.item .progress .fill::after {
			--delay: calc(counter(delay-counter) * .1s);
			.card h4 {
			margin: 0;
			text-transform: uppercase;
			}
			.stat-number {
			font-family: var(--heading);
			font-weight: var(--fw-h-bold);
			color: rgb(var(--action-0));
			font-size: var(--txt-xx-large);
			}
			/**************************************************
			PROGRESS
			**************************************************/
			.progress {
			width: 100%;
			}
			.progress .bar {
			height: 6px;
			display: block;
			border-radius: 6px;
			overflow: hidden;
			background: var(--base-200);
			background: rgb(var(--base-200));
			position: relative;
			}

			.progress .fill {
			height: 100%;
			background: var(--action-0);
			background: rgb(var(--action-0));
			border-radius: 6px;
			width: 0;
			transition: width .3s ease;
			}
			.completed .fill {
			background: rgb(var(--action-200));
			}

			.progress .details {
			margin-top: 5px;
			font-size: var(--small);
			color: var(--contrast);
			font-size: var(--txt-x-small);
			color: rgb(var(--contrast));
			text-align: center;
			padding: .25rem 0;
			}

			.progress .details:empty {
			display: none;
			}
			@@ -3421,139 +2491,82 @@
			);
			animation: shimmer 2.5s infinite linear var(--delay);
			}
			/**************************************************
			ACTIONS
			**************************************************/
			.additional-actions .buttons {
			position: fixed;
			bottom: var(--offHeight);
			right: 1rem;
			margin: 0;
			--gap: 1rem;
			z-index: var(--z-6);
			width: fit-content;
			/**************************************************************
			DETAILS
			**************************************************************/
			details {
			padding: .25rem 0;
			border-top: 1px solid rgb(var(--base-200));
			border-bottom: 1px solid rgb(var(--base-200));
			}
			.additional-actions .buttons button {
			height: var(--height);
			width: var(--height);
			background-color: var(--overlay-medium);
			color: var(--contrast);
			transition: width var(--transition-base), background-color var(--transition-base), color var(--transition-base), left var(--transition-base);
			box-shadow: var(--shadow);
			}
			.additional-actions .buttons button:hover {
			background-color: var(--action-0);
			color: var(--action-contrast);
			}
			.additional-actions .buttons button:disabled,
			.additional-actions .buttons button:disabled:hover,
			.additional-actions .buttons button:disabled:focus {
			opacity: .5;
			background-color: var(--overlay-light);
			color: var(--contrast);
			}
			.additional-actions .buttons button:last-of-type {
			border-radius: 4px 4px 4px var(--outerRadius);
			}
			aside {
			position: fixed;
			top: var(--doubleHeight);
			bottom: var(--offHeight);
			width: min(500px, calc(100vw - 2rem));
			background-color: var(--base);
			z-index: var(--z-5);
			box-shadow: var(--shadow);
			--wrap: nowrap;
			--align: stretch;
			overflow: hidden auto;
			padding: 1rem 1rem var(--height);
			}
			aside.left {
			left: var(--offScreen);
			transition: left var(--transition-base);
			border-radius: 0 var(--outerRadius) var(--outerRadius) 0;
			}
			aside.left.expanded {
			left: 0;
			}
			details[open] {
			background-color: rgb(var(--base-50));
			}

			aside.right {
			right: var(--offScreen);
			border-radius: var(--outerRadius) 0 0 var(--outerRadius);
			transition: right var(--transition-base);
			}
			aside.right.expanded {
			right: 0;
			}
			aside.right.expanded button.close {
			position: sticky;
			bottom: calc(var(--height) * -1);
			left: 0;
			border-bottom-left-radius: var(--outerRadius);
			width: var(--height);
			height: var(--height);
			details summary {
			list-style: none;
			text-transform: uppercase;
			cursor: pointer;
			border: 0;
			position: relative;
			padding: .5rem 2.5rem .5rem .5rem;
			gap: .5rem;
			}
			details summary:hover {
			background-color: rgb(var(--base-100));
			border-color: rgb(var(--base-100));
			color: rgb(var(--contrast));
			}
			details[open] > summary {
			background-color: rgb(var(--base-50));
			}
			details summary::after {
			content: '';
			position: absolute;
			right: .5rem;
			top: .5rem;
			background-color: rgb(var(--contrast-100));
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: contain;
			-webkit-mask-image: var(--icon);
			mask-image: var(--icon);
			mask-repeat: no-repeat;
			mask-size: contain;
			width: 1.25rem;
			height: 1.25rem;
			margin-left: auto;
			transition: var(--trans-color), var(--trans-transform);
			}
			details summary:hover::after {
			background-color: rgb(var(--action-0));
			}
			details[open]:not(.all-filters) > summary::after {
			background-color: rgb(var(--contrast));
			transform: rotate(-540deg);
			transition: background-color var(--trans-base);
			transition-property: background-color, transform;
			}
			details::details-content {
			opacity: 0;
			block-size: 0;
			overflow-y: clip;
			transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
			}

			}
			.additional-actions .buttons:has(.expanded) button:not(.expanded) {
			display: none;
			}
			.additional-actions .buttons:has(.expanded){
			right: 0;
			}
			details[open]::details-content {
			opacity: 1;
			block-size: auto;
			}

			.additional-actions .buttons .expanded {
			width: calc(min(500px, calc(100vw - 2rem)));
			background-color: var(--base);
			}
			.additional-actions .buttons button:hover,
			.additional-actions .buttons .expanded:hover {
			background-color: var(--action-0);
			color: var(--action-contrast);
			}
			@media (prefers-reduced-motion: no-preference){
			details {
			interpolate-size: allow-keywords;
			}
			}

			[type=submit] {
			width: 100%;
			height: var(--height);
			background-color: var(--action-0);
			color: var(--action-contrast);
			box-shadow: var(--shadow-none);
			font-weight: bold;
			}
			[type=submit]:hover {
			box-shadow: var(--shadow);
			border: 2px solid var(--action-0);
			color: var(--action-0);
			background-color: var(--action-contrast);
			}

			aside nav.tabs {
			position: sticky;
			bottom: unset;
			top: 0;
			left: 0;
			right: 0;
			}
			.jvb-referral nav.tabs button {
			width: 50%;
			}
			aside .tab-content.active {
			padding: 1rem;
			min-height: 100%;
			}

			aside header h3 {
			font-size: var(--medium);
			margin: 1rem 0;
			text-align: center;
			}
			aside header p {
			margin: .25rem 0;
			text-align: center;
			}
			aside h4 {
			font-size: var(--small);
			margin: 1rem 0 0 0;
			}
			/********************************************************
			CODE
			********************************************************/

			code {
			width: 100%;
			@@ -3562,118 +2575,1018 @@
			user-select: all;
			text-align: center;
			border-radius: 4px;
			background-color: var(--base-200);
			border: 1px solid var(--contrast-200);
			background-color: rgb(var(--base-200));
			}
			.restore-form {
			background-color: rgba(var(--action-rgb), var(--rgb-light));
			border: 1px solid var(--action-200);
			padding: .5rem;
			border-radius: var(--outerRadius);
			margin: 1rem 2rem;
			}
			.restore-form h3 {
			text-align: center;
			margin: 1rem 0 0;
			font-size: var(--medium);
			}
			.restore-form p {
			margin: .5rem 0;
			}
			.fstatus {
			/********************************************************
			OVERLAYS
			********************************************************/
			dialog[open],
			aside.expanded {
			background-color: rgb(var(--base));
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
			z-index: var(--z-5);
			background-color: rgba(var(--base-rgb),var(--rgb-heavy));
			border-radius: 4px;
			padding: 0 .5rem;
			position: fixed;
			bottom: var(--offHeight);
			right: calc(var(--offHeight) + 1rem);
			--w: 1em;
			box-shadow:var(--shadow);
			}
			.fstatus .spinner {
			dialog::backdrop {
			backdrop-filter: blur(5px);
			background-color: rgba(var(--base),var(--op-4));
			}
			dialog[open],
			aside.main {
			border-radius: var(--radius-outer);
			overflow: hidden;
			}
			/ DIALOG /
			dialog[open] {
			z-index: var(--z-10);
			--padding: 0;
			top: 5vh;
			width: min(500px, 95vw);
			height: fit-content;
			max-height: 90vh;
			padding: var(--padding);
			background-color: rgb(var(--base-50));
			color: rgb(var(--contrast));
			border: 1px solid rgb(var(--base-200));
			}
			dialog:is(.create,.edit,.bulkEdit)[open] {
			width: 98vw;
			max-height: 98vh;
			top: 1vh;
			}
			dialog > .wrap {
			max-height: var(--maxHeight);
			overflow: hidden auto;
			margin: 0 0 0 1.5rem;
			padding-right: 1.5rem;
			padding-bottom: var(--btn);
			width: calc(100% - 1.5rem);
			}
			dialog label {
			font-weight: normal;
			}
			dialog h2,
			dialog h3 {
			margin: 0 0 .5rem 0;
			font-size: var(--txt-large);
			}

			dialog:has(.m-actions) {
			padding-bottom: var(--btn);
			}

			.m-actions {
			--w: 1.15em;
			--justify: flex-end;
			--wrap: nowrap;
			--gap: 0;
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			height: var(--btn);
			width: 100%;
			z-index: var(--z-6);
			background-color: rgb(var(--action-100));
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-up);
			}
			.m-actions button {
			--wrap: nowrap;
			box-shadow: none;
			width: 100%;
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			--gap: .75rem;
			font-size: var(--txt-x-small);
			border-radius: 0;
			height: var(--chipchip);
			}
			.m-actions button:hover,
			.m-actions button:focus {
			background-color: rgb(var(--base));
			color: rgb(var(--contrast));
			}
			.m-actions button:first-of-type {
			border-bottom-left-radius: 1rem;
			}
			.m-actions button:last-of-type {
			border-bottom-right-radius: 1rem;
			}
			dialog ul {
			list-style: none;
			}
			dialog .search-container {
			padding-top: 1rem;
			width: 100%;
			gap: .5rem;
			}

			/ GALLERY /
			img[data-gallery] {
			cursor: pointer;
			}
			dialog.gallery[open] {
			--max: calc(100% - 2rem);
			inset: 1rem;
			margin: 0;
			border: none;
			width: 100%;
			height: 100%;
			max-height: var(--max);
			max-width: var(--max);
			border-radius: 0;
			/background-color: rgba(var(--base), var(--op-6));/
			background-color: transparent;
			}
			dialog.gallery > .wrap {
			--wrap: nowrap;
			position: relative;
			overflow: hidden;
			max-height: none;
			margin: 0;
			padding: 0;
			height: 100%;
			width: 100%;
			inset: 0;
			}
			.gallery .hint {
			position: absolute;
			top: 1rem;
			left: 50%;
			transform: translateX(-50%);
			letter-spacing: .12em;
			pointer-events: none;
			z-index: 2;
			animation: hint-fade 3s ease forwards;
			}
			@keyframes hint-fade {
			0% { opacity: 1; }
			60% { opacity: 1; }
			100% { opacity: 0; }
			}
			.gallery .controls {
			--wrap: nowrap;
			--align: flex-end;
			--justify: space-between;
			--gap: 0;
			position: absolute;
			inset: 0;
			padding: 1rem;
			z-index: 3;
			pointer-events: none;
			}
			.gallery .controls button {
			min-height: var(--chipchip);
			pointer-events: all;
			background: rgba(var(--base), var(--op-45));
			border: 1px solid rgba(var(--contrast), var(--op-1));
			color: rgba(var(--contrast), var(--op-5));
			}
			.gallery .controls button:hover,
			.gallery .controls button:focus {
			background: rgba(var(--base), var(--op-5));
			color: rgb(var(--contrast));
			}
			.gallery .controls .cancel {
			position: absolute;
			top: 1rem;
			right: 1rem;
			}



			dialog.gallery .cancel:focus,
			dialog.gallery .cancel:hover {
			background: rgba(var(--base),var(--op-4));
			}


			dialog.gallery .content {
			position: relative;
			overflow: hidden;
			flex: 1;
			display: flex;
			}
			dialog.gallery .image-left,
			dialog.gallery .image-right {
			position: absolute;
			width: 0;
			height: 0;
			opacity: 0;
			pointer-events: none;
			left: var(--offScreen);
			}

			dialog.gallery .content .image {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
			display: block;
			transform-origin: center center;
			will-change: transform;
			transition: transform 0.15s ease-out;
			touch-action: none;
			user-select: none;
			-webkit-user-drag: none;
			cursor: default;
			}
			.gallery .image[style*="scale(1)"],
			.gallery .image:not([style]) {
			cursor: default;
			}

			dialog.gallery details {
			position: absolute;
			width: 100%;
			max-width: none;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(var(--base),var(--op-45));
			color: rgb(var(--contrast));
			border-radius: 4px;
			overflow: hidden;
			z-index: 3;
			}
			dialog.gallery details:has(.item-info:empty) {
			display: none;
			}

			dialog.gallery details summary {
			padding: 0.75rem 1rem;
			cursor: pointer;
			user-select: none;
			}

			dialog.gallery details[open] .item-info {
			padding: 0.75rem 1rem 1rem;
			font-size: var(--txt-x-small);
			}

			dialog.gallery .counter {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background: rgba(var(--base),var(--op-4));
			color: rgba(var(--contrast), var(--op-3));
			padding: .4rem .8rem;
			border-radius: 3px;
			font-size: var(--txt-small);
			letter-spacing: .1em;
			z-index: 3;
			}

			dialog.gallery .favourite {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
			}

			dialog.gallery .image {
			opacity: 0;
			transition: opacity .2s ease, transform .15s ease-out;
			}

			dialog.gallery .image[src] {
			opacity: 1;
			}

			ul.gallery {
			display: flex;
			flex-wrap: wrap;
			margin: .2em;
			padding: 0;
			list-style-type: none;
			}
			ul.gallery::after {
			content: '';
			display: block;
			flex-grow: 10;
			}

			ul.gallery li {
			flex-grow: 1;
			height: 40vh;
			margin: .2em;
			overflow: hidden;
			}

			ul.gallery figure {
			min-width: 100%;
			height: 100%;
			}
			ul.gallery figure.duotone img {
			mix-blend-mode: multiply;
			}



			@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
			ul.gallery {
			flex-direction: row;
			}
			ul.gallery li {
			height: auto;
			width: 100%;
			}
			ul.gallery figure {
			width: 100%;
			max-height: 75vh;
			min-width: 0;
			}
			}
			@media (max-aspect-ratio: 1/1) {
			ul.gallery li {
			height: 30vh;
			}
			}
			@media (max-height: 480px) {
			ul.gallery li {
			height: 80vh;
			}
			}
			/* POPUPS: notifications, cart, queue */
			aside.main.main {
			--wrap: nowrap;
			--align: stretch;
			--dir: column;
			position: fixed;
			top: var(--btnbtn);
			bottom: var(--btn_);
			width: min(500px, calc(100vw - 2rem));
			padding: 0 0 var(--btn);
			}
			aside.main.left {
			border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
			left: var(--offScreen);
			transition: left var(--trans-base);
			}
			aside.main.left.expanded {
			left: 0;
			}
			aside.main.right {
			border-radius: var(--radius-outer) 0 0 var(--radius-outer);
			right: var(--offScreen);
			transition: right var(--trans-base);
			}
			aside.main.right.expanded {
			right: 0;
			}
			aside.main nav.tabs {
			--gap: 0;
			flex-shrink: 0;
			}
			aside.main > .wrap {
			max-height: 100%;
			overflow: hidden auto;
			}
			aside.main header {
			--w: 2em;
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			padding: 1rem;
			}
			.tab-content header {
			width: calc(100% + 2rem);
			left: -1rem;
			top: -1rem;
			position: relative;
			}
			.main header .icon {
			margin-right: 1em;
			}
			.main h3 {
			font-size: var(--txt-large);
			margin: .5rem 0;
			}
			aside.main nav.share {
			--dir: row;
			--align: center;
			margin: 0;
			border-bottom: 1px solid rgb(var(--base-200));
			}
			nav.share ul,
			nav.share li,
			nav.share a {
			height: var(--chipchip);
			}
			nav.share a:hover {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			}
			aside.main h4,
			aside.main .hint {
			text-align: center;
			}
			aside.main .tab-content {
			flex-shrink: 0;
			}
			aside.main .tab-content.active {
			flex: 1;
			overflow: hidden auto;
			padding: 1rem;
			}
			.main section {
			padding: 1rem;
			}
			.main section + section {
			border-top: 1px solid rgb(var(--base-200));
			}

			.qtoggle .count,
			.indicator {
			position: absolute;
			top: -.5em;
			right: -.5em;
			width: .75em;
			height: .75em;
			border-radius: 50%;
			}
			.qtoggle .indicator {
			top: 0;
			right: 0;
			}
			.qtoggle .count {
			right:unset;
			left: .25rem;
			top: .25rem;
			font-size: var(--txt-small);
			}
			#queue.synced + .qtoggle .indicator {
			background-color: rgb(var(--success));
			}

			#queue.pending + .qtoggle .indicator {
			background-color: rgb(var(--warning));
			animation: pulse 2s infinite;
			}

			.refresh.fetching .icon,
			#queue.pending:not(.expanded) + .qtoggle .icon {
			background-color: rgb(var(--action-0));
			animation: spin 1s var(--trans-fn) infinite;
			}
			.main.expanded + .qtoggle {
			width: calc(min(500px, calc(100vw - 2rem)) - var(--btn));
			}

			.main-actions .buttons:has(.expanded) {
			width: calc(min(500px, calc(100vw - 2rem)));
			}
			.main.expanded + .qtoggle {
			left: var(--btn);
			border-bottom-right-radius: var(--radius-outer);
			}
			.main-actions .buttons:has(.expanded) {
			right: 0;
			}
			.main-actions button.expanded {
			border-bottom-left-radius: var(--radius-outer);
			width: 100%;
			}
			.buttons:has(.expanded) > button:not(.expanded) {
			display: none;
			}
			.fstatus.loading .spinner {
			display: inline-block;

			.main nav.filters {
			width: 100%;
			height: var(--chipchip);
			--justify: flex-start;
			--align: flex-end;
			}
			.main nav.filters li {
			overflow: visible;
			}
			.main .btn + label {
			min-height: var(--chip);
			min-width: var(--chip);
			overflow: visible;
			}
			.btn + label .indicator:not(:empty) {
			font-size: var(--txt-small);
			background-color: rgb(var(--base));
			border: 1px solid rgb(var(--contrast));
			width: 1.75em;
			height: 1.75em;
			padding: .3em;
			}

			.fstatus p {
			.main > .header {
			border-bottom: 1px solid rgb(var(--base-200));
			padding: 1rem 0;
			flex-shrink: 0;
			}
			.main .item-grid {
			flex: 1;
			overflow: hidden auto;
			overflow-anchor: none;
			padding: .5rem 2rem;
			--gap: .5rem;
			}
			.queue-actions {
			flex-shrink: 0;
			border-top: 1px solid rgb(var(--base-200));
			}
			.queue-actions button {
			width: 100%;
			}

			.main .item {
			background-color: rgb(var(--base-50));
			padding: 15px;
			border-radius: var(--radius);
			box-shadow: var(--shdw-none);
			font-size: var(--txt-x-small);
			}
			.main .item .header {
			position: relative;
			padding: .25rem 0;
			}
			.main .item .actions {
			width: 100%;
			}
			.main .item button {
			min-height: var(--chip);
			font-size: var(--txt-x-small);
			--w: var(--txt-x-small);
			}
			.main .item .time {
			padding: .5rem 0;
			font-size: var(--txt-small);
			border: 1px solid rgb(var(--base-200));
			border-width: 1px 0;
			margin: .25rem 0;
			}
			.main .item .progress .details {
			text-align: right;
			font-size: var(--txt-small);
			width: 100%;
			}
			/* MAIN ACTIONS */
			.main-actions .buttons {
			transition: width var(--trans-base), right var(--trans-base);
			right: .5rem;
			width: var(--btn);
			margin: 0;
			padding: .25rem;
			}
			/**************************************************
			RESPONSES
			**************************************************/
			/dialog.create-response {/
			/* width: min(650px, calc(95vw - (var(--padding) * 2)));*/
			/}/
			/dialog.create-response .original {/
			/* height: 20vh;*/
			/* overflow-y: scroll;*/
			/* padding: 1rem;*/
			/* background-color: var(--base-100);*/
			/* border-radius: var(--innerRadius);*/
			/}/
			/dialog.create-response .editor-container .ql-container {/
			/* height: 30vh;*/
			/}/
			.attn {
			animation: pulse-color 5s infinite;
			animation-delay: 1s;
			}
			.attn.expanded {
			animation: none;
			}

			/.responses summary {/
			/* text-transform: none;*/
			/* display: block;*/
			/}/
			/.news .header {/
			/* margin-right: 2rem;*/
			/}/
			/.news > summary::after,/
			/.responses summary::after {/
			/* display: block;*/
			/* position: absolute;*/
			/* top: 0;*/
			/* right: 0;*/
			/* mask-image: var(--chevron);*/
			/}/
			/.responses[open] > summary {/
			/* background-color: inherit;*/
			/}/
			/.responses[open] {/
			/* background-color: var(--base-200);*/
			/}/
			/.responses {/
			/* margin: 1rem 0;*/
			/}/
			/********************************************************
			CALLOUTS
			********************************************************/
			.callalt.callalt,
			.callout.callout {
			padding: 2rem;
			margin: 0;
			max-width: none;
			grid-column: full;
			}

			/.response {/
			/* background-color: inherit;*/
			/}/
			/.response[open] {/
			/* background-color: var(--base-100);*/
			/}/
			/.response[open] > summary {/
			/* background-color: inherit;*/
			/}/
			/.news[open] > summary::after,/
			/.responses[open] > summary::after,/
			/.response[open] > summary::after {/
			/* mask-image: var(--chevron);*/
			/}/
			/.response > summary::after {/
			/* display: none;*/
			/}/
			/.response:has(.response) > summary::after {/
			/* display: block;*/
			/}/
			/.response:nth-of-type(even) {/
			/* background-color: var(--base-50);*/
			/}/
			/button.reply {/
			/* margin-left: auto;*/
			/}/
			/**************************************************
			ANIMATIONS
			**************************************************/
			/ Used for Loading /
			@media (min-width: 768px){
			.callout.callout {
			padding: 2rem 20vw;
			}
			}

			.callout.callout {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			}

			.callalt.callalt {
			background-color: rgb(var(--secondary-0));
			color: var(--secondary-contrast);
			}

			.callalt :is(h1, h2, h3, h4, h5, h6),
			.callout :is(h1, h2, h3, h4, h5, h6) {
			font-family: var(--body);
			font-weight: var(--fw-b-bold);
			margin: 1rem 0 0;
			width: 100%;
			}

			.callout a {
			background-color: var(--action-contrast);
			padding: 0 .125rem;
			border-radius: 4px;
			}
			/********************************************************
			WP BLOCKS
			********************************************************/
			/ MEDIA TEXT /
			.media-text > * {
			flex: 1;
			}
			/ COVER /
			.cover {
			--color: rgba(var(--action-0), var(--op-5));
			position: relative;
			overflow: hidden;
			min-height: 60vh;
			padding: var(--btn);
			}

			.cover:not(.duotone)::before {
			content: '';
			/z-index: var(--coverIndex);/
			background-color: var(--dark-0);
			/mix-blend-mode: var(--coverBlend);/
			/background-position: center;/
			/background-repeat: no-repeat;/
			/background-size: cover;/
			}
			.cover .overlay {
			background-color: var(--dark-0);
			}
			.overlay.op-1 {
			opacity: var(--op-1);
			}
			.overlay.op-2 {
			opacity: var(--op-2);
			}
			.overlay.op-3 {
			opacity: var(--op-3);
			}
			.overlay.op-4 {
			opacity: var(--op-4);
			}
			.overlay.op-45 {
			opacity: var(--op-45);
			}
			.overlay.op-5 {
			opacity: var(--op-5);
			}
			.overlay.op-6 {
			opacity: var(--op-6);
			}
			.cover:has(.overlay)::before {
			display: none;
			}
			.cover .overlay,
			.cover:not(.duotone)::before,
			.cover > video,
			.cover > img {
			position: absolute;
			inset: 0;
			width: 100%;
			max-width: none!important;
			height: 100%;
			margin: 0;
			}
			.cover > img,
			.cover > video {
			mix-blend-mode: luminosity;
			max-width: none!important;
			width: 100%!important;
			}
			.cover .overlay,
			.cover:not(.duotone)::before {
			z-index: 2;
			background-color: var(--color);
			mix-blend-mode: color;
			}


			.cover .content {
			z-index: 5;
			position: relative;
			overflow: hidden auto;
			width: max-content;
			height: max-content;
			max-width:100%;
			max-height: 100%;
			}

			.cover > img {
			/z-index: 1;/
			/opacity: .5;/
			/mix-blend-mode: luminosity;/
			object-fit: cover;
			}

			@media (min-width: 768px) {
			.cover > img {
			/opacity: .33;/
			}
			}
			/ IMAGE /
			figure {
			overflow: hidden;
			position: relative;
			}
			figure:is(.op-1,.op-2,.op-3,.op-4,.op-5,.op-6,.op-45)::before {
			position: absolute;
			inset: 0;
			pointer-events: none;
			content: '';
			}
			figure.op-1::before {
			opacity: var(--op-1);
			}
			figure.op-2::before {
			opacity: var(--op-2);
			}
			figure.op-3::before {
			opacity: var(--op-3);
			}
			figure.op-45::before {
			opacity: var(--op-45);
			}
			figure.op-4::before {
			opacity: var(--op-4);
			}
			figure.op-5::before {
			opacity: var(--op-5);
			}
			figure.op-6::before {
			opacity: var(--op-6);
			}

			figure.action-0::before {
			background-color: rgb(var(--action-0));
			}
			figure.action-50::before {
			background-color: rgb(var(--action-50));
			}
			figure.action-100::before {
			background-color: rgb(var(--action-100));
			}
			figure.action-200::before {
			background-color: rgb(var(--action-200));
			}
			figure.secondary-0::before {
			background-color: rgb(var(--secondary-0));
			}
			figure.secondary-50::before {
			background-color: rgb(var(--secondary-50));
			}
			figure.secondary-100::before {
			background-color: rgb(var(--secondary-100));
			}
			figure.secondary-200::before {
			background-color: rgb(var(--secondary-200));
			}
			figure.base::before {
			background-color: rgb(var(--base));
			}
			figure.base-50::before {
			background-color: rgb(var(--base-50));
			}
			figure.base-100::before {
			background-color: rgb(var(--base-100));
			}
			figure.base-200::before {
			background-color: rgb(var(--base-200));
			}
			figure.contrast::before {
			background-color: rgb(var(--contrast));
			}
			figure.contrast-50::before {
			background-color: rgb(var(--contrast-50));
			}
			figure.contrast-100::before {
			background-color: rgb(var(--contrast-100));
			}
			figure.contrast-200::before {
			background-color: rgb(var(--contrast-200));
			}

			.bg-fixed {
			background-attachment: fixed;
			}
			.bg-repeat.bg-repeat {
			background-repeat: repeat;
			background-size: 33vw;
			}
			[data-bg-img] {
			background-size: cover;
			background-repeat: no-repeat;
			}
			/ BLOCKQUOTE /
			blockquote {
			margin-left: 10vw;
			position: relative;
			padding: var(--btn);
			}
			blockquote .icon {
			position: absolute;
			top: var(--btn);
			left: calc((10vw + var(--btn)) * -1);
			--w: 10vw;
			opacity: var(--op-1);
			}

			blockquote cite {
			padding: 15px 0 0 12px;
			margin: 0 0 0 150px;
			z-index: 1;
			}

			blockquote.pull {
			background-color: unset;
			border-radius: 0;
			margin: 4rem auto;
			padding: 3rem;
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-down), rgba(var(--base),var(--op-45)) var(--shdw-up);;
			}

			blockquote.pull cite {
			margin: 0;
			}
			/ QUERY /
			ul.loop {
			max-width: none;
			padding: var(--sp4) var(--sp1);
			}
			.loop :is(h1,h2,h3,h4,h5,h6) {
			margin: .5em 0;
			}
			.loop :is(h1,h2,h3,h4,h5,h6):has(+ time) {
			margin-bottom: 0;
			}
			.loop :is(h1,h2,h3,h4,h5,h6) + time {
			font-size: var(--txt-x-small);
			margin-top: 0;
			}
			.loop li {
			list-style: none;
			}
			.loop p:has(.read-more) {
			text-align: right;
			}

			.loop li > figure {
			float: left;
			margin-right: var(--chip_);
			margin-top: 0;
			max-width: 30%;
			aspect-ratio: 1;
			}

			.no-results p,
			.no-results {
			display: flex;
			justify-content: center;
			align-items: center;
			}


			/ TODO: LIST OVERRIDES /
			/*********************************************************
			DIRECTORY
			*********************************************************/
			.directory-list > ul {
			max-width: none;
			}
			.directory-list .image {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			}
			.directory-list img {
			width: 70px;
			}
			.directory-list h3 {
			margin: 0;
			text-align: center;
			font-weight: var(--fw-h-bold);
			position: sticky;
			font-size: var(--txt-enormous);
			width: 100%;
			top: var(--btn);
			left: 0;
			color: rgb(var(--base));
			text-shadow: rgb(var(--base-200)) 1px 1px 0;
			user-select: none;
			}
			.directory-list >ul > li {
			padding: 2rem;
			align-items: flex-start;
			}
			.directory-list >ul > li:nth-of-type(even) {
			background-color: rgb(var(--base-100));
			}

			/ The letter's list /
			.directory-list ul ul {
			width: 100%;
			}
			.directory-list ul ul li {
			padding: .35rem .5rem;
			}
			.directory-list ul ul li:nth-of-type(even) {
			background-color: rgb(var(--base-100));
			}
			.directory-list ul li:nth-of-type(even) ul li:nth-of-type(even) {
			background-color: rgb(var(--base-50));
			}
			@media (min-width: 768px) {
			.directory-list h3 {
			width: 20vw;
			}
			.directory-list ul ul {
			min-height: var(--txt-enormous);
			}
			.directory-list >ul > li {
			padding: 2rem 10vw;
			}
			}

			/******************************************************************
			LOADING
			******************************************************************/
			dialog.loading {
			opacity: 0;
			}

			dialog.loading[open] {
			opacity: 1;
			width: 100vw;
			height: 100vh;
			display: flex;
			max-width: 100%;
			max-height: 100%;
			border-radius: 0;
			border: none;
			background-color: transparent;
			box-shadow: none;
			--w: 3em;
			justify-content: center;
			align-items: center;
			inset: 0;
			}

			dialog.loading[open]@starting-style {
			opacity: 0;
			}

			dialog.loading[open] > .col {
			height: fit-content;
			width: min(400px, 60vw);
			border-radius: var(--radius-outer);
			background-color: rgba(var(--base),var(--op-4));
			padding: 2rem;
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
			position: relative;
			}

			dialog.loading[open] .spinner {
			position: absolute;
			top: 1rem;
			width: 5rem;
			height: 5rem;
			border-width: 0;
			border-top-width: 4px;
			animation: spin 1s var(--trans-fn) infinite;
			}

			.loading[open] i.icon {
			background-color: rgb(var(--action-0));
			}

			dialog.loading[open] i.icon {
			animation: dance 2s ease-in-out infinite;
			}

			dialog.loading[open] h3 {
			color: rgb(var(--contrast));
			margin: 2rem 1rem auto !important;
			font-size: var(--txt-large);
			width: -moz-fit-content;
			width: fit-content;
			}

			dialog.loading[open] p {
			margin: .5rem auto;
			}

			dialog.loading[open]::after {
			animation: shimmer 3s ease-in-out infinite;
			background: linear-gradient(90deg, var(--shimmer));
			content: "";
			inset: 0;
			position: absolute;
			z-index: -1;
			}

			.spinner {
			width: 12px;
			height: 12px;
			border: 2px solid transparent;
			border-top: 2px solid rgb(var(--action-50));
			border-radius: 50%;
			animation: spin 1s var(--trans-fn) infinite;
			}

			/ ANIMATIONS /
			@keyframes shimmer {
			0% {
			left: -50%;
			@@ -3686,20 +3599,18 @@
			}
			}


			@keyframes pulse-color {
			0% {
			box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);
			box-shadow: 0 0 0 0 rgba(var(--action-0), .4);
			}
			30% {
			box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0);
			box-shadow: 0 0 0 .75rem rgba(var(--action-0), 0);
			}
			100% {
			box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0);
			box-shadow: 0 0 0 0 rgba(var(--action-0), 0);
			}
			}

			/ fadeIn & fadeOut, for adding/removing items /
			@keyframes fadeIn {
			from {
			opacity: 0;
			@@ -3722,1273 +3633,21 @@
			}
			}

			/******************************************
			OVERFLOW DETECTION
			Include this in items to detect:
			// Scroll detection animation
			animation: detect-scroll linear;
			animation-timeline: scroll(self inline);
			******************************************/
			/* Scroll detection keyframe */
			@keyframes detect-scroll {
			from, to {
			--can-scroll: 1;
			}
			}


			/******************************************************************
			DIRECTORY
			******************************************************************/

			/.directory-list {/
			/* max-width: var(--alignWide);*/
			/}/
			/.directory-list ul {/
			/* gap: 0;*/
			/}/
			/* .directory-list li.title {*/
			/* margin-left: -1rem;*/
			/* }*/


			/.is-directory section {/
			/* max-width: var(--full);*/
			/* width: calc(var(--full) - 1rem);*/
			/* padding: 0 .5rem;*/
			/}/
			/* .is-directory .list-none ul,*/
			/* .is-directory .list-none {*/
			/* margin: 0;*/
			/* padding: 0;*/
			/* list-style: none;*/
			/* }*/
			/* .is-directory .list-none ul {*/
			/* width: 80%;*/
			/* }*/
			/* .is-directory .list-none > li + li {*/
			/* border-top: 1px solid var(--base-100);*/
			/* padding-top: 2rem;*/
			/* margin-top: 2rem;*/
			/* }*/
			/* .is-directory .list-none ul li {*/
			/* background-color: var(--base-50);*/
			/* padding: .5rem .25rem;*/
			/* }*/
			/* .is-directory .list-none ul li:nth-of-type(even){*/
			/* background-color: var(--base-100);*/
			/* }*/
			/* .is-directory .list-none h3 {*/
			/* margin: .5rem auto!important;*/
			/* position: sticky;*/
			/* text-align: center;*/
			/* top: 4rem;*/
			/* font-size: 20vw;*/
			/* color: var(--base-200);*/
			/* background-color: var(--base);*/
			/* width: 20%;*/
			/* }*/
			/* @media (min-width:768px){*/
			/* .is-directory section {*/
			/* max-width: var(--alignWide);*/
			/* }*/
			/* .is-directory .list-none,*/
			/* .is-directory .list-none ul {*/
			/* padding-left: 2rem;*/
			/* }*/
			/* .is-directory .list-none h3 {*/
			/* text-align: left;*/
			/* top: 8rem;*/
			/* position: sticky;*/
			/* background-color: transparent;*/
			/* }*/
			/* }*/

			/.directories > .directory {/
			/* border-radius: 1rem;*/
			/* background-color: var(--base-100);*/
			/* text-align: center;*/
			/* padding: .5rem;*/
			/}/
			/.directories > .directory a .icon {/
			/* --w: 3rem;*/
			/* margin: 0;*/
			/}/
			/.directory h2 {/
			/* font-size: var(--large);*/
			/* margin: .5rem 0!important;*/
			/* width: 100%;*/
			/}/
			/@media (min-width: 768px) {/
			/* .directories {*/
			/* display: grid;*/
			/* grid-template-columns: repeat(3, 1fr);*/
			/* gap: 1rem;*/
			/* }*/
			/}/

			/nav.directory li {/
			/* list-style: none;*/
			/* display: inline-flex;*/
			/}/
			/.grouped-directory {/
			/* margin: 0;*/
			/* padding: 0;*/
			/* list-style: none;*/
			/}/
			/* .grouped-directory .grouped-directory {*/
			/* padding-left: 2rem;*/
			/* }*/
			/.grouped-directory li:not(:has(details)) {/
			/* padding: .625rem;*/
			/}/
			/.grouped-directory summary a {/
			/* order: 1;*/
			/* text-transform: none;*/
			/}/
			/.grouped-directory summary::after {/
			/* order: 2;*/
			/}/
			/.grouped-directory li details[open] > summary,/
			/.grouped-directory li details[open] {/
			/* background-color: var(--base-100);*/
			/}/

			/.grouped-directory details[open] details[open] > summary,/
			/.grouped-directory details[open] details[open] {/
			/* background-color: var(--overlay-light);*/
			/}/

			/.is-directory h1 {/
			/* margin-top: 3rem!important;*/
			/}/
			/******************************************************************
			NORTHEH
			******************************************************************/
			.menu-items .menu-item {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 0 1rem;
			}
			.menu-items .menu-item:not(.variable) label {
			display: none;
			}
			.menu-items .menu-item .field {
			margin: 0;
			--wrap: nowrap;
			}
			.menu-items .menu-item .has-tooltip {
			position: absolute;
			right: -2.5rem;
			}
			.menu-items .menu-item + .menu-item {
			border-top: 1px solid var(--base-200);
			margin-top: 2rem;
			padding-top: 1rem;
			}
			.menu-items .menu-item .header {
			grid-column: 1/-1;
			}
			.menu-items .menu-item .description {
			grid-column: 1/3;
			}
			.menu-items .menu-item .info {
			grid-column: 3/3;
			}
			.menu-items .menu-item h3 {
			font-size: var(--medium);
			font-weight: normal;
			margin: 0 0 .5rem 0!important;
			}

			.menu-items .menu-item .info {
			--gap: 1rem;
			}
			.price > span {
			vertical-align: super;
			font-size: 12px;
			}
			body.menu_item section > h2 {
			display: inline-block;
			max-width: var(--maxWidth);
			width: max-content;
			background-color: var(--base-50);
			color: var(--action-0);
			position: relative;
			z-index: 5;
			padding: 0 1rem;
			margin: var(--mt) auto var(--mb) auto;
			}

			.menu-section {
			position: relative;
			}
			.menu-section hr {
			position: absolute;
			width: 100%;
			left: -5%;
			top: 3.5rem;
			border: none;
			background-color: var(--action-100);
			height: 2px;
			}


			details.menu-item summary.row {
			flex-direction: column;
			align-items: flex-start;
			}
			details.menu-item summary .row {
			width: 100%;
			}

			.menu_item h1:first-of-type {
			margin-top: 10vh!important;
			}

			@media (min-width: 768px) {
			.menu-section hr {
			width: 120%;
			left: -10%;
			top: 4.25rem;
			}

			.menu_item section {
			max-width: var(--maxWidth);
			}

			/details.menu-item summary.row {/
			/* flex-direction: var(--dir);*/
			/* align-items: var(--justify);*/
			/}/
			}
			/**
			TODO: For Legacy
			Triangles Loader

			.loading-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 2rem 1rem 1rem;
			}
			.loader-wrap {
			height: 75px;
			width: 75px;
			}
			.new-term-toggle:disabled + .loader,
			.loading .loader {
			width: 50px;
			aspect-ratio: 1.154;
			display: grid;
			color: var(--action-0);
			background:
			linear-gradient(to bottom left ,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) right/50% 100%,
			linear-gradient(to bottom right,#0000 calc(50% - 1px),currentColor 0 calc(50% + 1px),#0000 0) left /50% 100%,
			linear-gradient(currentColor 0 0) bottom/100% 2px;
			background-repeat: no-repeat;
			transform-origin: 50% 66%;
			animation: l5 4s infinite linear;
			}
			.new-term-toggle:disabled + .loader::before,
			.new-term-toggle:disabled + .loader::after,
			.loading .loader::before,
			.loading .loader::after {
			content: "";
			grid-area: 1/1;
			background: inherit;
			transform-origin: inherit;
			animation: inherit;
			}
			.new-term-toggle:disabled + .loader::after,
			.loading .loader::after {
			animation-duration: 2s;
			}
			@keyframes l5{
			100% {transform:rotate(1turn)}
			}
			*/

			/* DONE TO HERE */



			/dialog .search-wrapper {/
			/* padding: .5rem;*/
			/}/


			/.favourite-terms ul {/
			/* gap: .25rem 1rem;*/
			/* padding: 0;*/
			/}/
			/* .favourite-terms label::before,*/
			/* .favourite-terms label::after {*/
			/* display: none;*/
			/* }*/
			/* .favourite-terms label {*/
			/* padding: .25rem .5rem!important;*/
			/* border: 1px solid var(--base-200);*/
			/* color: var(--contrast-200);*/
			/* border-radius: var(--innerRadius);*/
			/* }*/
			/* .favourite-terms :checked + label,*/
			/* .favourite-terms label:hover {*/
			/* border-color: var(--action-0);*/
			/* color: var(--action-0);*/
			/* }*/
			/.items-container {/
			/* padding: 0;*/
			/}/
			/* .items-container li .children {*/
			/* width: 100%;*/
			/* padding-left: 1rem;*/
			/* }*/
			/.path button+button::before {/
			/* content: ' > ';*/
			/* display: inline-block;*/
			/* margin: 0 .5rem;*/
			/}/
			/!* Forms *!/


			/!.field.time_open,!/
			/!.field.time_closes,!/
			/!.field.date_start,!/
			/!.field.time_start,!/
			/!.field.time_end {!/
			/! margin-bottom: 0;!/
			/!}!/

			/!.field.time_open,!/
			/!.field.time_closes,!/
			/!.field.time_start,!/
			/!.field.time_end {!/
			/! width: 49%;!/
			/! display: inline-block;!/
			/! margin-top: 1rem;!/
			/!}!/

			/[data-h] {/
			/* border: 0;*/
			/* clip: rect(1px, 1px, 1px, 1px);*/
			/* clip-path: inset(50%);*/
			/* height: 1px;*/
			/* margin: -1px;*/
			/* overflow: hidden;*/
			/* padding: 0;*/
			/* position: absolute !important;*/
			/* width: 1px;*/
			/* word-wrap: normal !important;*/
			/}/

			/.checkbox-options {/
			/* --gap: .5rem 2rem;*/
			/}/
			/.checkbox-options label {/
			/* flex: unset!important;*/
			/}/

			/.radio-options {/
			/* --gap: .125rem .5rem;*/
			/}/

			/.radio-options input:not(.ch) + label::before {/
			/* display: none!important;*/
			/}/
			/.radio-options input:not(.ch) + label {/
			/* flex: unset!important;*/
			/* padding: .25rem!important;*/
			/* border-radius: 4px;*/
			/* border: 1px solid var(--base-100);*/
			/* color: var(--contrast-200);*/
			/* transition: var(--transition-color)!important;*/
			/* font-weight: normal;*/
			/* !width: 40%;!*/
			/* text-align: center;*/
			/}/
			/.radio-options input:not(.ch) + label:hover,/
			/.radio-options input:not(.ch):checked + label {/
			/* border-color: var(--action-0);*/
			/* color: var(--action-0);*/
			/* transition: var(--transition-color);*/
			/}/



			/! Style for disabled state !/



			/.date-range {/
			/* padding: 2rem;*/
			/* border: none;*/
			/* border-radius: var(--innerRadius);*/
			/* background: var(--base);*/
			/* box-shadow: var(--shadow);*/
			/}/
			/.date-range::backdrop {/
			/* backdrop-filter: blur(5px);*/
			/* background: var(--overlay-medium);*/
			/}/

			/.custom-range,/
			/.month-picker {/
			/* --gap: 1rem;*/
			/* margin-bottom: 1rem;*/
			/}/
			/.custom-range input,/
			/.month-picker select {/
			/* padding: .5rem;*/
			/* border: 1px solid var(--base-100);*/
			/* border-radius: var(--innerRadius);*/
			/* background: var(--base-200);*/
			/* color: var(--contrast);*/
			/* font: inherit;*/
			/}/
			/.custom-range input:focus,/
			/.month-picker select:focus {/
			/* outline: none;*/
			/* border-color: var(--action-0);*/
			/}/
			/!* Shop Page *!/
			/.shop header {/
			/* max-width: var(--full);*/
			/}/
			/.shop header img {/
			/* width: 100%;*/
			/* height: auto;*/
			/}/
			/.shop header h1 {/
			/* margin-bottom: .5em;*/
			/}/
			/.ratings {/
			/* margin: 0;*/
			/}/
			/!* Bio Sections *!/
			/.bio-info {/
			/* max-width: var(--alignWide);*/
			/* padding: .25em;*/
			/* border-radius: var(--outerRadius);*/
			/* font-size: var(--medium);*/
			/* line-height: 1.5;*/
			/}/
			/.bio-info section {/
			/* margin: 4rem 0;*/
			/}/
			/.shop .column,/
			/.bio-info .column {/
			/* --justify: center;*/
			/}/
			/.bio-info[open] {/
			/* background-color: var(--base-100);*/
			/}/
			/.bio-info summary {/
			/* padding: .25rem;*/
			/* position: relative;*/
			/* border-radius: var(--innerRadius);*/
			/}/
			/.bio-info[open] summary {/
			/* background-color: var(--base-50);*/
			/* margin-bottom: 1rem;*/
			/}/
			/.bio-info > div:not(.columns) {/
			/* margin: 4rem 0;*/
			/* padding: 0 1rem;*/
			/}/
			/.bio-info h2 {/
			/* margin: 0!important;*/
			/* font-size: var(--medium);*/
			/* font-family: var(--body);*/
			/* font-weight: var(--bWeight);*/
			/}/

			/.bio-info h3 {/
			/* margin: 1em 0!important;*/
			/* font-size: var(--medium);*/
			/}/
			/.bio-info figure {/
			/* margin: 0;*/
			/* padding: 0;*/
			/}/
			/.bio-info img {/
			/* width: 100%;*/
			/* height: auto;*/
			/* aspect-ratio: 5/4;*/
			/* object-fit: cover;*/
			/}/

			/* #contact {*/
			/* max-width: var(--alignWide);*/
			/* }*/
			/* #contact h2,*/
			/* section.inline h2 {*/
			/* font-size: var(--medium);*/
			/* font-weight: var(--bWeight);*/
			/* margin: 0 0 .5em 0!important;*/
			/* white-space: nowrap;*/
			/* }*/
			/ul.contact {/
			/* list-style: none;*/
			/* display: inline-flex;*/
			/* justify-content: flex-start;*/
			/* flex-wrap: wrap;*/
			/* align-items: center;*/
			/* gap: 1rem;*/
			/* margin: 0;*/
			/* padding: 0;*/
			/}/
			/* ul.contact + ul.contact {*/
			/* margin-left: 1rem;*/
			/* }*/
			/* ul.contact a{*/
			/* color: var(--contrast);*/
			/* }*/
			/* ul.contact a:hover {*/
			/* color: var(--action-0);*/
			/* }*/

			/.term-list {/
			/* display: inline-flex;*/
			/* flex-wrap: wrap;*/
			/* list-style: none;*/
			/* text-transform: lowercase;*/
			/* margin: 0;*/
			/* padding: 0;*/
			/* gap: 0 .5em;*/
			/}/
			/p.loading {/
			/* text-align: center;*/
			/* margin: 3rem 0;*/
			/}/
			/*
			/.term-list li {/
			/* padding: 2px 6px;*/
			/}/

			/ul.simple-list {/
			/* margin: 0;*/
			/* padding: 0;*/
			/* list-style: none;*/
			/}/
			/ul.reviews li + li{/
			/* margin-top: 2rem;*/
			/}/



			/!!* Status notification !/
			/!.status-notification {!/
			/! position: fixed;!/
			/! bottom: 20px;!/
			/! left: 80px; !* Position to the right of the panel !!*/
			/! width: 300px;!/
			/! max-width: calc(100vw - 100px);!/
			/! border-radius: 8px;!/
			/! padding: 15px;!/
			/! background: #323232;!/
			/! color: white;!/
			/! transform: translateY(20px);!/
			/! opacity: 0;!/
			/! transition: transform .3s, opacity .3s;!/
			/! z-index: 10000;!/
			/! box-shadow: 0 4px 20px rgba(0, 0, 0, .2);!/
			/! pointer-events: none;!/
			/!}!/

			/!.status-notification.active {!/
			/! transform: translateY(0);!/
			/! opacity: 1;!/
			/! pointer-events: auto;!/
			/!}!/

			/!.status-notification .title {!/
			/! font-weight: 600;!/
			/! margin-bottom: 5px;!/
			/! font-size: 15px;!/
			/!}!/

			/!.status-notification .message {!/
			/! margin-bottom: 10px;!/
			/! font-size: 14px;!/
			/!}!/

			/!.status-notification .actions {!/
			/! display: flex;!/
			/! justify-content: flex-end;!/
			/!}!/

			/!.status-notification .actions button {!/
			/! padding: 6px 12px;!/
			/! background: rgba(255, 255, 255, .2);!/
			/! border: none;!/
			/! border-radius: 4px;!/
			/! color: white;!/
			/! cursor: pointer;!/
			/! font-size: 13px;!/
			/! transition: background .2s;!/
			/!}!/

			/!.status-notification .actions button:hover {!/
			/! background: rgba(255, 255, 255, .3);!/
			/!}!/

			/! Progress containers in notifications !/
			/.progress-container {/
			/* margin-top: 15px;*/
			/* background: rgba(255, 255, 255, .1);*/
			/* border-radius: 4px;*/
			/* padding: 10px;*/
			/* transition: all .3s;*/
			/}/

			/.progress-container.complete {/
			/* opacity: .5;*/
			/}/

			/! Collapsed state - just show the toggle button !/







			/!**/
			/Response stuff/
			/* !/

			/.columns {/
			/* --wrap: nowrap;*/
			/}/
			/* .columns.stack-small {*/
			/* --wrap: wrap;*/
			/* }*/
			/* @media (min-width: 768px){*/
			/* .columns.stack-small {*/
			/* --wrap: nowrap;*/
			/* }*/
			/* }*/
			/.column {/
			/* width: 100%;*/
			/* padding: 1rem 0;*/
			/}/

			/.width-300 {/
			/* width: 300px!important;*/
			/* height: auto!important;*/
			/}/




			/.font-small {/
			/* font-size: var(--small);*/
			/}/

			/!**/
			/Circular Loader/
			/* !/
			/!.new-term-toggle:disabled + .loader,!/
			/!.loading .loader {!/
			/! width: 50px;!/
			/! aspect-ratio: 1;!/
			/! display: grid;!/
			/! border: 4px solid #0000;!/
			/! border-radius: 50%;!/
			/! border-right-color: var(--action-0);!/
			/! animation: l15 1s infinite linear;!/
			/!}!/
			/!.new-term-toggle:disabled + .loader::before,!/
			/!.new-term-toggle:disabled + .loader::after,!/
			/!.loading .loader::before,!/
			/!.loading .loader::after {!/
			/! content: "";!/
			/! grid-area: 1/1;!/
			/! margin: 2px;!/
			/! border: inherit;!/
			/! border-radius: 50%;!/
			/! animation: l15 2s infinite;!/
			/!}!/
			/!.new-term-toggle:disabled + .loader::after,!/
			/!.loading .loader::after {!/
			/! margin: 8px;!/
			/! animation-duration: 3s;!/
			/!}!/
			/!@keyframes l15{!/
			/! 100%{transform: rotate(1turn)}!/
			/!}!/



			/! High contrast mode support !/
			/@media (forced-colors: active) {/
			/* .feed-item {*/
			/* border: 1px solid CanvasText;*/
			/* }*/

			/* button,*/
			/* [role="button"] {*/
			/* border: 1px solid ButtonText;*/
			/* }*/

			/* button.favourite.favourited {*/
			/* background-color: Highlight;*/
			/* color: HighlightText;*/
			/* }*/
			/}/


			/!* TODO: Verify *!/

			input[type=time],
			input[type=datetime-local],
			input[type=date] {
			padding: .5rem;
			border: 1px solid var(--contrast-200);
			border-radius: 4px;
			font-size: 14px;
			min-width: 180px;
			background: var(--base);
			color: var(--contrast);
			cursor: pointer;
			transition: border-color .2s ease;
			}

			.field-input-wrapper input[type=time]:focus,
			.field-input-wrapper input[type=datetime-local]:focus,
			.field-input-wrapper input[type=date]:focus,
			.time-wrapper input[type=time]:focus,
			.datetime-wrapper input[type=datetime-local]:focus,
			.date-wrapper input[type=date]:focus {
			border-color: var(--action-0);
			box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
			}

			/* Icon styling in form fields */
			.field-input-wrapper svg,
			.time-wrapper svg,
			.datetime-wrapper svg,
			.date-wrapper svg {
			width: 18px;
			height: 18px;
			color: var(--contrast);
			opacity: .7;
			}

			/! Required field asterisk !/
			/.time-wrapper input[required],/
			/.datetime-wrapper input[required],/
			/.date-wrapper input[required] {/
			/* border-left: 3px solid #dc3232;*/
			/}/

			/! Invalid field styling !/
			/.time-wrapper input:invalid,/
			/.datetime-wrapper input:invalid,/
			/.date-wrapper input:invalid {/
			/* border-color: #dc3232;*/
			/* background-color: #fef7f7;*/
			/}/

			/! Frontend Display !/
			/.time-field-display,/
			/.datetime-field-display,/
			/.date-field-display {/
			/* display: inline-flex;*/
			/* align-items: center;*/
			/* gap: .5rem;*/
			/* padding: .25rem 0;*/
			/}/

			/.time-field-display svg,/
			/.datetime-field-display svg,/
			/.date-field-display svg {/
			/* width: 16px;*/
			/* height: 16px;*/
			/* color: #0073aa;*/
			/* flex-shrink: 0;*/
			/}/

			/.time-value,/
			/.datetime-value,/
			/.date-value {/
			/* font-weight: 500;*/
			/* color: #333;*/
			/}/

			/! Set and Checkbox Field Display !/
			/.set-field-display {/
			/* --wrap: wrap;*/
			/}/

			/.set-label,/
			/.checkbox-label {/
			/* font-weight: 600;*/
			/* color: #555;*/
			/}/

			/.set-item {/
			/* background: #f0f0f1;*/
			/* padding: .25rem .5rem;*/
			/* border-radius: 3px;*/
			/* font-size: .9em;*/
			/* border: 1px solid #ddd;*/
			/}/

			/! Radio and Select Field Display !/
			/.radio-field-display,/
			/.select-field-display {/
			/* display: inline-flex;*/
			/* align-items: center;*/
			/* gap: .5rem;*/
			/}/

			/.radio-label,/
			/.select-label {/
			/* font-weight: 600;*/
			/* color: #555;*/
			/}/

			/.radio-value,/
			/.select-value {/
			/* background: #f8f9fa;*/
			/* padding: .25rem .5rem;*/
			/* border-radius: 3px;*/
			/* border: 1px solid #dee2e6;*/
			/}/

			/! True/False Field Display !/
			/.true-false-display {/
			/* display: inline-flex;*/
			/* align-items: center;*/
			/* gap: .5rem;*/
			/}/

			/.true-false-label {/
			/* font-weight: 600;*/
			/* color: #555;*/
			/}/

			/.true-value {/
			/* color: var(--success);*/
			/* font-weight: 600;*/
			/}/

			/.false-value {/
			/* color: var(--error);*/
			/* font-weight: 600;*/
			/}/

			/! Group Field Styling !/
			/.group-field {/
			/* border: 1px solid #e0e0e0;*/
			/* border-radius: 6px;*/
			/* padding: 1rem;*/
			/* margin: 1rem 0;*/
			/* background: #fafafa;*/
			/}/

			/.group-label {/
			/* font-size: 1.1em;*/
			/* font-weight: 600;*/
			/* color: #333;*/
			/* margin: 0 0 1rem 0;*/
			/* padding-bottom: .5rem;*/
			/* border-bottom: 1px solid #e0e0e0;*/
			/}/

			/.group-content {/
			/* --gap: .75rem;*/
			/}/

			/.group-item {/
			/* padding: .5rem 0;*/
			/* border-bottom: 1px solid #f0f0f0;*/
			/}/

			/.group-item:last-child {/
			/* border-bottom: none;*/
			/}/

			/.subfield-label {/
			/* font-weight: 600;*/
			/* color: #555;*/
			/* margin-right: .5rem;*/
			/}/

			/! Responsive Design !/
			/@media (max-width: 768px) {/
			/* .time-wrapper input[type="time"],*/
			/* .datetime-wrapper input[type="datetime-local"],*/
			/* .date-wrapper input[type="date"] {*/
			/* min-width: 150px;*/
			/* font-size: 16px; !* Prevents zoom on iOS !/
			/* }*/

			/* .set-field-display,*/
			/* .checkbox-field-display {*/
			/* flex-direction: column;*/
			/* align-items: flex-start;*/
			/* }*/

			/* .group-content {*/
			/* gap: .5rem;*/
			/* }*/
			/}/

			legend {
			padding: 0 1rem;
			}
			.abs {
			position: absolute;
			}
			.top {
			top: 0;
			right: 0;
			left: 0;
			}
			.top-right {
			top: 0;
			right: 0;
			}
			.top-left {
			top: 0;
			left: 0;
			}

			.btm {
			bottom: 0;
			left: 0;
			right: 0;
			}
			.btm-right {
			bottom: 0;
			right: 0;
			}
			.btm-left {
			bottom: 0;
			left: 0;
			}
			.edges {
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			}



			/********************* REFERRAL SYSTEM *********************/
			.referral-widget {
			background: #fff;
			border: 1px solid #ddd;
			border-radius: 8px;
			padding: 24px;
			margin: 20px 0;
			box-shadow: 0 2px 4px rgba(0,0,0,0.05);
			}

			.referral-header {
			text-align: center;
			margin-bottom: 20px;
			}

			.referral-header h3 {
			margin: 0 0 8px 0;
			color: #2271b1;
			}

			.referral-header p {
			margin: 0;
			color: #666;
			font-size: 14px;
			}

			/* Share Widget Styles */
			.referral-link-section {
			margin-bottom: 20px;
			}

			.referral-link-section label {
			display: block;
			font-weight: 600;
			margin-bottom: 8px;
			color: #333;
			}

			.link-copy-wrapper {
			display: flex;
			gap: 8px;
			}

			.link-copy-wrapper input {
			flex: 1;
			padding: 10px 12px;
			border: 1px solid #ddd;
			border-radius: 4px;
			font-family: monospace;
			font-size: 13px;
			background: #f9f9f9;
			}

			.copy-link-btn {
			padding: 10px 20px;
			background: #2271b1;
			color: #fff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-weight: 600;
			white-space: nowrap;
			transition: background 0.2s;
			}

			.copy-link-btn:hover {
			background: #135e96;
			}

			.referral-code-display {
			margin: 8px 0 0 0;
			font-size: 13px;
			color: #666;
			}

			.referral-stats {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			gap: 16px;
			margin-bottom: 20px;
			padding: 16px;
			background: #f8f9fa;
			border-radius: 6px;
			}

			.stat-item {
			text-align: center;
			}

			.stat-value {
			display: block;
			font-size: 24px;
			font-weight: bold;
			color: #2271b1;
			}

			.stat-label {
			display: block;
			font-size: 12px;
			color: #666;
			margin-top: 4px;
			}

			.share-buttons {
			display: flex;
			gap: 10px;
			justify-content: center;
			flex-wrap: wrap;
			}

			.share-btn {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 10px 16px;
			border: 1px solid #ddd;
			border-radius: 4px;
			text-decoration: none;
			color: #333;
			font-size: 14px;
			font-weight: 500;
			transition: all 0.2s;
			}

			.share-btn:hover {
			background: #f5f5f5;
			border-color: #999;
			}

			/* Validation Widget Styles */
			.form-group {
			margin-bottom: 16px;
			}

			.form-group label {
			display: block;
			font-weight: 600;
			margin-bottom: 8px;
			color: #333;
			}

			.input-button-wrapper {
			display: flex;
			gap: 8px;
			}

			.input-button-wrapper input {
			flex: 1;
			padding: 12px 16px;
			border: 2px solid #ddd;
			border-radius: 4px;
			font-size: 16px;
			font-family: monospace;
			font-weight: 600;
			text-transform: uppercase;
			transition: border-color 0.2s;
			}

			.input-button-wrapper input:focus {
			outline: none;
			border-color: #2271b1;
			}

			.validate-btn {
			padding: 12px 24px;
			background: #2271b1;
			color: #fff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-weight: 600;
			white-space: nowrap;
			transition: background 0.2s;
			}

			.validate-btn:hover {
			background: #135e96;
			}

			.validate-btn:disabled {
			background: #ccc;
			cursor: not-allowed;
			}

			.helper-text {
			margin: 8px 0 0 0;
			font-size: 13px;
			color: #666;
			}

			.helper-text a {
			color: #2271b1;
			text-decoration: none;
			}

			.helper-text a:hover {
			text-decoration: underline;
			}

			.message {
			padding: 12px 16px;
			border-radius: 4px;
			margin-top: 16px;
			font-size: 14px;
			}

			.message.success {
			background: #d4edda;
			color: #155724;
			border: 1px solid #c3e6cb;
			}

			.message.error {
			background: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
			}

			/* Success State Styles */
			.referral-success-state {
			text-align: center;
			}

			.success-icon {
			width: 80px;
			height: 80px;
			margin: 0 auto 20px;
			background: #28a745;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 40px;
			}

			.success-content h3 {
			color: #28a745;
			margin: 0 0 12px 0;
			}

			.reward-highlight {
			background: #e7f5ff;
			padding: 20px;
			border-radius: 6px;
			margin: 20px 0;
			border-left: 4px solid #2271b1;
			}

			.reward-highlight strong {
			color: #2271b1;
			font-size: 18px;
			}

			.cta-button {
			display: inline-block;
			padding: 14px 32px;
			background: #2271b1;
			color: #fff;
			text-decoration: none;
			border-radius: 4px;
			font-weight: 600;
			margin-top: 16px;
			transition: background 0.2s;
			}

			.cta-button:hover {
			background: #135e96;
			}

			.referred-by {
			margin-top: 16px;
			padding-top: 16px;
			border-top: 1px solid #ddd;
			font-size: 13px;
			color: #666;
			}

			.loading-spinner {
			display: inline-block;
			width: 16px;
			height: 16px;
			border: 2px solid #f3f3f3;
			border-top: 2px solid #2271b1;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-left: 8px;
			vertical-align: middle;
			}

			@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
			}

			/* Responsive */
			@media (max-width: 600px) {
			.input-button-wrapper {
			flex-direction: column;
			@keyframes dance {
			0%, 100% {
			transform: rotate(-5deg) scale(1);
			}
			50% {
			transform: rotate(5deg) scale(1.1);
			}
			}

			.validate-btn {
			width: 100%;
			}

			.link-copy-wrapper {
			flex-direction: column;
			}

			.copy-link-btn {
			width: 100%;
			}
			}
			/.group {/
			/* background-color: rgb(var(--base));*/
			/* margin: 1rem 0;*/
			/}/