/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */


/*TODO:
	Standard for surface colours - what colours look nice on top of the main colours set and ways to override
*/


:root {
	/*Config Variable Defaults*/
	/* Sizing */

	/* 1.2 - 1.25 Scale */
	--font-size--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
	--font-size--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
	--font-size-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
	--font-size-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
	--font-size-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
	--font-size-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
	--font-size-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
	--font-size-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
	--font-size-6: clamp(2.986rem, 2.366rem + 3.0998vw, 4.7684rem);

	/* Spacing */
	--space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vi, 0.3125rem);
	--space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vi, 0.625rem);
	--space-xs: clamp(0.75rem, 0.6848rem + 0.3261vi, 0.9375rem);
	--space-s: clamp(1rem, 0.913rem + 0.4348vi, 1.25rem);
	--space-m: clamp(1.5rem, 1.3696rem + 0.6522vi, 1.875rem);
	--space-l: clamp(2rem, 1.8261rem + 0.8696vi, 2.5rem);
	--space-xl: clamp(3rem, 2.7391rem + 1.3043vi, 3.75rem);
	--space-2xl: clamp(4rem, 3.6522rem + 1.7391vi, 5rem);
	--space-3xl: clamp(6rem, 5.4783rem + 2.6087vi, 7.5rem);

	--space-vertical: var(--space-xs);
	--space-vertical-gap: var(--space-m);
	--space-horizontal: var(--space-xs);

	/* Debug */
	--color-debug: hsl(300, 100%, 50%);
	--color-debug-tint: hsl(300, 100%, 50%, .2);
	--color-debug-tint2: hsl(300, 100%, 50%, .1);

	/* Typography */
	--font-weight-1: 100;
	--font-weight-2: 200;
	--font-weight-3: 300;
	--font-weight-4: 400;
	--font-weight-5: 500;
	--font-weight-6: 600;
	--font-weight-7: 700;
	--font-weight-8: 800;
	--font-weight-9: 900;

	--font-lineheight-00: .95;
	--font-lineheight-0: 1.1;
	--font-lineheight-1: 1.25;
	--font-lineheight-2: 1.375;
	--font-lineheight-3: 1.5;
	--font-lineheight-4: 1.75;
	--font-lineheight-5: 2;

	--font-letterspacing-0: -.05em;
	--font-letterspacing-1: .025em;
	--font-letterspacing-2: .050em;
	--font-letterspacing-3: .075em;
	--font-letterspacing-4: .150em;
	--font-letterspacing-5: .500em;
	--font-letterspacing-6: .750em;
	--font-letterspacing-7: 1em;

	/* Borders */
	--default-border-width: 1px;
	--default-border-radius: .5em;

	/* Containers */
	--border-radius-primary: var(--space-l);
	/* Buttons */
	--border-radius-secondary: var(--space-l);
	/* Accordion etc */
	--border-radius-tertairy: var(--space-2xs);

	--border-size-1: 1px;
	--border-size-2: 2px;
	--border-size-3: 5px;
	--border-size-4: 10px;
	--border-size-5: 25px;

	/* Brand colours */
	/* Use HSL where possible */

	/* Primary - HEX Color #192641 */
	--color-primary-hs: 221, 44%;
	--color-primary-l: 18%;

	--color-primary: hsla(var(--color-primary-hs), var(--color-primary-l), 100%);

	--color-primary-dark-3-l: 0%;
	--color-primary-dark-2-l: 5%;
	--color-primary-dark-1-l: 10%;

	--color-primary-dark-3: hsla(var(--color-primary-hs), var(--color-primary-dark-3-l), 100%);
	--color-primary-dark-2: hsla(var(--color-primary-hs), var(--color-primary-dark-2-l), 100%);
	--color-primary-dark-1: hsla(var(--color-primary-hs), var(--color-primary-dark-1-l), 100%);

	--color-primary-tint-9: hsla(var(--color-primary-hs), var(--color-primary-l), 90%);
	--color-primary-tint-8: hsla(var(--color-primary-hs), var(--color-primary-l), 80%);
	--color-primary-tint-7: hsla(var(--color-primary-hs), var(--color-primary-l), 70%);
	--color-primary-tint-6: hsla(var(--color-primary-hs), var(--color-primary-l), 60%);
	--color-primary-tint-5: hsla(var(--color-primary-hs), var(--color-primary-l), 50%);
	--color-primary-tint-4: hsla(var(--color-primary-hs), var(--color-primary-l), 40%);
	--color-primary-tint-3: hsla(var(--color-primary-hs), var(--color-primary-l), 30%);
	--color-primary-tint-2: hsla(var(--color-primary-hs), var(--color-primary-l), 20%);
	--color-primary-tint-15: hsla(var(--color-primary-hs), var(--color-primary-l), 10%);
	--color-primary-tint-1: hsla(var(--color-primary-hs), var(--color-primary-l), 10%);


	/* Secondary - HEX Color #03ac83 */
	--color-secondary-hs: 165, 97%;
	--color-secondary-l: 34%;

	--color-secondary: hsla(var(--color-secondary-hs), var(--color-secondary-l), 100%);

	--color-secondary-dark-3-l: 13%;
	--color-secondary-dark-2-l: 23%;
	--color-secondary-dark-1-l: 33%;

	--color-secondary-dark-3: hsla(var(--color-secondary-hs), var(--color-secondary-dark-3-l), 100%);
	--color-secondary-dark-2: hsla(var(--color-secondary-hs), var(--color-secondary-dark-2-l), 100%);
	--color-secondary-dark-1: hsla(var(--color-secondary-hs), var(--color-secondary-dark-1-l), 100%);

	--color-secondary-tint-9: hsla(var(--color-secondary-hs), var(--color-secondary-l), 90%);
	--color-secondary-tint-8: hsla(var(--color-secondary-hs), var(--color-secondary-l), 80%);
	--color-secondary-tint-7: hsla(var(--color-secondary-hs), var(--color-secondary-l), 70%);
	--color-secondary-tint-6: hsla(var(--color-secondary-hs), var(--color-secondary-l), 60%);
	--color-secondary-tint-5: hsla(var(--color-secondary-hs), var(--color-secondary-l), 50%);
	--color-secondary-tint-4: hsla(var(--color-secondary-hs), var(--color-secondary-l), 40%);
	--color-secondary-tint-3: hsla(var(--color-secondary-hs), var(--color-secondary-l), 30%);
	--color-secondary-tint-2: hsla(var(--color-secondary-hs), var(--color-secondary-l), 20%);
	--color-secondary-tint-15: hsla(var(--color-secondary-hs), var(--color-secondary-l), 15%);
	--color-secondary-tint-1: hsla(var(--color-secondary-hs), var(--color-secondary-l), 10%);

	/* Tertiary - HEX Color #e1554c */
	--color-tertiary-hs: 4, 71%;
	--color-tertiary-l: 59%;

	--color-tertiary: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 100%);

	--color-tertiary-dark-3-l: 13%;
	--color-tertiary-dark-2-l: 23%;
	--color-tertiary-dark-1-l: 33%;

	--color-tertiary-dark-3: hsla(var(--color-tertiary-hs), var(--color-tertiary-dark-3-l), 100%);
	--color-tertiary-dark-2: hsla(var(--color-tertiary-hs), var(--color-tertiary-dark-2-l), 100%);
	--color-tertiary-dark-1: hsla(var(--color-tertiary-hs), var(--color-tertiary-dark-1-l), 100%);

	--color-tertiary-tint-9: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 90%);
	--color-tertiary-tint-8: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 80%);
	--color-tertiary-tint-7: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 70%);
	--color-tertiary-tint-6: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 60%);
	--color-tertiary-tint-5: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 50%);
	--color-tertiary-tint-4: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 40%);
	--color-tertiary-tint-3: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 30%);
	--color-tertiary-tint-2: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 20%);
	--color-tertiary-tint-15: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 15%);
	--color-tertiary-tint-1: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 10%);

	/* Status colours */
	/* Hex Red #d70202 */
	--color-status-action-hs: 0, 98%;
	--color-status-action-l: 43%;
	--color-status-action-tint-a: 10%;

	--color-status-action: hsla(var(--color-status-action-hs), var(--color-status-action-l));
	--color-status-action-tint: hsla(var(--color-status-action-hs), var(--color-status-action-l), var(--color-status-action-tint-a));
	/* Use lightness percentage value for better contrast/accessibility */
	--color-status-action-text: hsla(var(--color-status-action-hs), 33%, 100%);

	/* Hex Orange #cd4d00 */
	--color-status-warning-hs: 23, 100%;
	--color-status-warning-l: 40%;
	--color-status-warning-tint-a: 10%;

	--color-status-warning: hsla(var(--color-status-warning-hs), var(--color-status-warning-l));
	--color-status-warning-tint: hsla(var(--color-status-warning-hs), var(--color-status-warning-l), var(--color-status-action-tint-a));
	/* Use lightness percentage value for better contrast/accessibility */
	--color-status-warning-text: hsla(var(--color-status-warning-hs), 30%, 100%);

	/* Hex Brand Colour Used Instead */
	--color-status-success-hs: var(--color-secondary-hs);
	--color-status-success-l: var(--color-secondary-l);
	--color-status-success-tint-a: 10%;

	--color-status-success: hsla(var(--color-status-success-hs), var(--color-status-success-l));
	--color-status-success-tint: hsla(var(--color-status-success-hs), var(--color-status-success-l), var(--color-status-success-tint-a));
	/* Use lightness percentage value for better contrast/accessibility */
	--color-status-success-text: var(--color-secondary-dark-1);

	/* OFFER - Allows option for Status colours red, orange green, brand colour or a additional colour only for offers */
	--color-offer-hs: 273, 100%;
	--color-offer-l: 39%;
	--color-offer-tint-a: 15%;

	--color-offer: hsla(var(--color-offer-hs), var(--color-offer-l), 100%);
	--color-offer-tint: hsla(var(--color-offer-hs), var(--color-offer-l), var(--color-offer-tint-a));
	/* Use lightness percentage value for better contrast/accessibility */
	--color-offer-text: white;

	/* Buttons and positive items like CTAs */
	--color-cta: var(--color-secondary);

	/* Offers and items that need importance */
	--color-highlight: var(--color-tertiary);

	/* Checkboxes */
	--checkbox-color: var(--color-status-success);
	--checkbox-border-size: .15em;
	--checkbox-muted-border-size: .1em;

	
	/*Fieldsets*/
	--fieldset-background-color: white;
	--fieldset-muted-background-color: transparent;
	--fieldset-border-size: var(--border-size-1);
	--fieldset-border-style: solid;
	--fieldset-border-color: var(--color-primary-tint-2);

	/* UI backdrop */
	--color-page-bg: var(--color-primary-tint-1);
	--color-page-text: var(--color-primary);
	--color-base-text: var(--color-primary);
	
	/*Box variables*/
	--box-color: inherit;
	--box-background-color: white;
	--box-title-color: inherit;
	--box-icon-color: inherit;

	--box-hero-color: inherit;
	--box-hero-background-color: transparent;
	--box-hero-title-color: inherit;
	--box-hero-icon-color: inherit;

	--box-service-color: white;
	--box-service-background-color: var(--color-primary);
	--box-service-title-color: inherit;
	--box-service-icon-color: inherit;

	--box-highlight-color: white;
	--box-highlight-background-color: var(--color-primary);
	--box-highlight-title-color: inherit;
	--box-highlight-icon-color: inherit;

	--box-info-color: inherit;
	--box-info-background-color: var(--color-primary-tint-1);
	--box-info-title-color: inherit;
	--box-info-icon-color: inherit;

	--box-warning-color: inherit;
	--box-warning-background-color: var(--color-status-warning-tint);
	--box-warning-title-color: var(--color-status-warning);
	--box-warning-icon-color: var(--color-status-warning);

	--box-action-color: inherit;
	--box-action-background-color: var(--color-status-action-tint);
	--box-action-title-color: var(--color-status-action);
	--box-action-icon-color: var(--color-status-action);

	--box-success-color: inherit;
	--box-success-background-color: var(--color-secondary-tint-15);
	--box-success-title-color: var(--color-cta);
	--box-success-icon-color: var(--color-cta);

	--box-focus-border-size: var(--border-size-1);
	--box-focus-border-style: solid;
	--box-focus-border-color: var(--color-primary-tint-2);

	--box-price-color: var(--color-primary);
	--box-price-background-color: inherit;
	--box-price-title-color: inherit;
	--box-price-border-radius: var(--border-radius-primary);

	--box-padding: var(--space-vertical) var(--space-s) var(--space-vertical) var(--space-s);
	--box-border-radius: var(--border-radius-tertairy);
	--box-margin-block: var(--space-vertical);

	/*Message variables*/
	--message-color: inherit;
	--message-background-color: white;
	--message-variant-color: inherit;
	
	--message-success-color: inherit; /*var(--color-status-success-text);*/
	--message-success-solid-color: white;
	--message-success-primary-color: var(--color-status-success);
	--message-success-tint-color: var(--color-status-success-tint);

	--message-action-color: inherit;
	--message-action-solid-color: white;
	--message-action-primary-color: var(--color-status-action);
	--message-action-tint-color: var(--color-status-action-tint);

	--message-warning-color: inherit;
	--message-warning-solid-color: white;
	--message-warning-primary-color: var(--color-status-warning);
	--message-warning-tint-color: var(--color-status-warning-tint);

	--message-highlight-color: var(--color-primary);
	--message-highlight-solid-color: white;
	--message-highlight-primary-color: var(--color-primary);
	--message-highlight-tint-color: var(--color-primary-tint-15);

	--message-important-color: white;
	--message-important-primary-color: var(--color-primary);

	--message-outline-border: var(--border-size-2) solid;


	--message-padding: var(--space-vertical) var(--space-s) var(--space-vertical) var(--space-s);
	--message-border-radius: var(--border-radius-tertairy);
	--message-margin-block: var(--space-vertical);

	--color-section-bg: hsla(var(--color-primary-hs), 94%, 100%);

	--shadow-color-hsl: var(--color-primary-hs), var(--color-primary-l);
	--shadow-color-a: 10%;
	--shadow-color: hsla(var(--shadow-color-hsl), var(--shadow-color-a));

	--shadow-big-color-hsl: var(--shadow-color-hsl);
	--shadow-big-color-a: var(--shadow-color-a);
	--shadow-big-color: hsla(var(--shadow-big-color-hsl), var(--shadow-big-color-a));

	--shadow-x-offset: 0px;
	--shadow-y-offset: 2px;
	--shadow-blur: 2px;
	--shadow-spread: 0px;

	--shadow-big-x-offset: 0px;
	--shadow-big-y-offset: 8px;
	--shadow-big-blur: 8px;
	--shadow-big-spread: 0px;

	--shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
	--shadow-big: var(--shadow-big-x-offset) var(--shadow-big-y-offset) var(--shadow-big-blur) var(--shadow-big-spread) var(--shadow-big-color);
	
	--color--basket--highlight: var(--color-primary-tint-1);
	--color--basket--footer: white;

	--link-underline-thickness: var(--border-size-1);
	--link-hover-underline-thickness: calc(var(--link-underline-thickness) + 1px);

	/* Forms */
	--form-element-spacing-vertical: 1rem;
	--form-element-spacing-horizontal: 1.25rem;


	/*Only icon I've not replaced via blazor yet - it's for the details arrow*/
	--icon-down-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');

	/*Header*/
	--logo-max-width: 180px;
	--logo-max-height: 60px;
	--pbp-max-width: 100px;
	--pbp-max-height: 60px;

	--header-image: url(../images/hero/default_hero.webp);
	--header-image-small: url(../images/hero/default_hero_small.webp);

	--header-image-padding: 0;
	--header-image-min-height: 200px;
	--header-image-large-min-height: 400px;

	--header-image-size: cover;
	--header-image-repeat: no-repeat;
	--header-image-position: center;

	/*Register*/
	--register-image: url(../images/hero/register_hero.webp);
	--register-image-small: url(../images/hero/register_hero_small.webp);

	--register-image-padding: var(--header-image-padding);
	--register-image-large-min-height: var(--header-image-large-min-height);

	--register-image-size: var(--header-image-size);
	--register-image-repeat: var(--header-image-repeat);
	--register-image-position: 0% 20%;

	/*Footer*/
	--small-color: var(--color-primary-tint-7);
	--footer-small-color: var(--small-color);


	/*Buttons*/
	/*Primary*/
	--button-primary-color: white;
	--button-primary-background-color: var(--color-secondary);
	--button-primary-border-color: var(--button-primary-background-color);

	--button-primary-hover-color: var(--button-primary-color);
	--button-primary-hover-background-color: var(--color-primary);
	--button-primary-hover-border-color: var(--button-primary-hover-background-color);
	--button-primary-hover-opacity: inherit;

	--button-primary-font-size: var(--font-size-1);
	--button-primary-font-weight: var(--font-weight-7);
	
	/*Secondary*/
	--button-secondary-color: white;
	--button-secondary-background-color: var(--color-primary);
	--button-secondary-border-color: var(--button-secondary-background-color);

	--button-secondary-hover-color: var(--button-secondary-color);
	--button-secondary-hover-background-color: var(--color-secondary);
	--button-secondary-hover-border-color: var(--button-secondary-hover-background-color);
	--button-secondary-hover-opacity: .9;

	--button-secondary-font-size: inherit;
	--button-secondary-font-weight: inherit;

	/*Contrast*/
	--button-contrast-color: var(--color-secondary);
	--button-contrast-background-color: var(--box-background-color);
	--button-contrast-border-color: var(--button-contrast-color);

	--button-contrast-hover-color: var(--color-primary);
	--button-contrast-hover-background-color: var(--button-contrast-background-color);
	--button-contrast-hover-border-color: var(--button-contrast-hover-color);
	--button-contrast-hover-opacity: .9;

	--button-contrast-font-size: var(--font-size-0);
	--button-contrast-font-weight: var(--font-weight-6);


	/*Expand panels/accordion/details*/
	--details-bg-color: white;
	--details-summary-color: var(--color-primary-tint-9);
	--details-completed-step-opacity: .5;
	--details-completed-step-font-weight: var(--font-weight-4);
	/*Currently unused - transition isn't working*/
	--details-transition-duration: 1s;
	--details-transition-timing: linear;

	/*Loading Bar*/
	--loading-bar-width: 100%;
	--loading-bar-height: 8px;

	--loading-bar-background: var(--color-primary-tint-1);
	--loading-bar-foreground: var(--color-secondary);

	--loading-bar-animation-duration: 3s;
	--loading-bar-animation-slow-timing-function: cubic-bezier(0.195, 0.36, 0.945, 1.65);
	--loading-bar-animation-fast-timing-function: cubic-bezier(0.9, -0.59, 0.715, 1.045);

	--loading-bar-border-radius: var(--default-border-radius);

	/*Dialogs*/
	--dialog-backdrop-colour: var(--shadow-color);
	--dialog-backdrop-filter-brightness: 70%;
	--dialog-backdrop-filter-saturate: 85%;
	--dialog-backdrop-filter-blur: 4px;
	--dialog-backdrop-filter: blur(var(--dialog-backdrop-filter-blur)) brightness(var(--dialog-backdrop-filter-brightness)) saturate(var(--dialog-backdrop-filter-saturate));
	
	--dialog-width-px: 1024px;
	--dialog-width-thin-px: 780px;
	--dialog-width-bound: 95vw;

	--dialog-width: min(var(--dialog-width-px), var(--dialog-width-bound));
	--dialog-width-thin: min(var(--dialog-width-thin-px), var(--dialog-width-bound));

	--dialog-max-height: 95dvh;

	--dialog-padding: var(--space-s);
	--dialog-title-margin: var(--space-xs) var(--space-s);


	--dialog-background-colour: var(--box-background-color);
	--dialog-colour: var(--color-primary);
	--dialog-dark-background-colour: var(--color-primary);
	--dialog-dark-colour: var(--box-background-color);

	--dialog-title-font-size: var(--h3-font-size);
	--dialog-title-font-weight: var(--h1-h3-font-weight);

	--dialog-transition-duration: .35s;
	
	/*Selects*/
	--multiline-select-checked-background-colour: var(--button-primary-background-color);
	--multiline-select-checked-colour: var(--button-primary-color);

	/*End of Config variables*/


	/*Below is a current attempt to further standardise some variables, it's incomplete though*/
	/*Text Related Variables*/
	--overflow-wrap: break-word;

	--standard-text-wrap: pretty;
	--heading-text-wrap: balance;

	--standard-font-family: var(--font-family-secondary);
	--heading-font-family: var(--font-family-primary);

	--standard-font-size: var(--font-size-0);
	--h1-font-size: var(--font-size-4);
	--h2-font-size: var(--font-size-3);
	--h3-font-size: var(--font-size-2);
	--h4-font-size: var(--font-size-1);
	--h5-h6-font-size: var(--font-size-0);
	--sub-super-font-size: .75em;

	--standard-font-weight: var(--font-weight-4);
	--h1-h3-font-weight: var(--font-weight-7);
	--h4-h6-font-weight: var(--font-weight-6);

	--h1-h2-lineweight: -.05rem;

	--p-margin: var(--space-vertical) 0 var(--space-vertical) 0;

	/*Focus*/
	--focus-alpha: 40%;
	--focus-style: solid;
	--focus-colour: rgb(from var(--color-cta) r g b / var(--focus-alpha));
	--focus-offset: 0px;
	--focus-text-offset: 1px;
	--focus-width: 3px;
	--focus-radius: 3px;

	/*Spacing*/
	--half-space-horizontal: calc(var(--space-horizontal) / 2);
	--half-space-vertical: calc(var(--space-vertical) / 2);

	/*Spacing for margins & paddings*/
	--base-x: var(--half-space-horizontal, 0.5ch);
	--base-y: var(--half-space-vertical, 0.5ch);

	interpolate-size: allow-keywords;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 0;
/*	background: transparent;*/
}

html {
	word-break: break-word;

	font-family: var(--standard-font-family);
	font-size: var(--standard-font-size);
	font-weight: var(--standard-font-weight);
	line-height: var(--font-lineheight-2);

	background-color: var(--color-page-bg);
	color: var(--color-base-text);

	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	scrollbar-width: auto;
	scrollbar-color: auto transparent;
}



/*TEXT*/
/*Base*/
p, span {
	overflow-wrap: var(--overflow-wrap);
	text-wrap: var(--standard-text-wrap);
	font-size: var(--standard-font-size);

	&:is(p) {
		margin: var(--p-margin);
		/*Can move what's below out when I get to doing the span in summaries and other places*/
		font-family: var(--standard-font-family); 
		font-weight: var(--standard-font-weight);
	}
}

/*Text Modifiers*/
.w_text--tint { color: var(--color-primary-tint-6) !important; }
.w_text--small { font-size: var(--font-size--1) !important; }
.w_text--strong { font-weight: var(--font-weight-6) !important; }
/*Wraps*/
.w_text--wrap { text-wrap: wrap !important; }
.w_text--pretty { text-wrap: pretty !important; }
.w_text--balance { text-wrap: balance !important; }
.w_text--stable { text-wrap: stable !important; }
/*Alignments*/
.w_text--start { text-align: start; }
.w_text--end { text-align: end; }

small {
	display: block;
	font-size: var(--font-size--2);
	line-height: var(--font-lineheight-1);
	color: var(--small-color);
	margin-bottom: var(--space-vertical);
}

.w_subtitle {
	display: block;
	font-size: var(--font-size-0);
	font-weight: var(--font-weight-6);
	text-transform: uppercase;
	letter-spacing: var(--font-letterspacing-3);
	color: var(--small-color);
	margin-bottom: var(--space-2xs)
}

/*HEADINGS*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	overflow-wrap: var(--overflow-wrap);
	text-wrap: var(--heading-text-wrap);
	font-family: var(--heading-font-family);
	margin-bottom: var(--space-vertical);
	display: block;
	font-size: var(--h1-font-size);
	font-weight: var(--h1-h3-font-weight);
	line-height: var(--font-lineheight-0);

	&:is(h1, .h1) {
		letter-spacing: var(--h1-h2-lineweight);
		margin-top: var(--space-vertical);

		& + p {
			font-size: var(--font-size-1);
			line-height: var(--line-height-1);
			margin-bottom: var(--space-m);
		}

	}
	&:is(h2, .h2) {
		font-size: var(--h2-font-size);
		line-height: var(--font-lineheight-1);
		letter-spacing: var(--h1-h2-lineweight);
	}
	&:is(h3, .h3) {
		font-size: var(--h3-font-size);
	}
	&:is(h4, .h4) {
		font-weight: var(--h4-h6-font-weight);
		font-size: var(--h4-font-size);
		line-height: var(--font-lineheight-1);
	}
	&:is(h5, .h5) {
		font-weight: var(--h4-h6-font-weight);
		font-size: var(--h5-h6-font-size);
		line-height: var(--font-lineheight-3);
	}
	&:is(h6, .h6) {
		font-weight: var(--h4-h6-font-weight);
		font-size: var(--h5-h6-font-size);
		letter-spacing: var(--font-letterspacing-3);
		line-height: inherit;
		text-transform: uppercase;
	}

	& span {
		color: var(--color-primary-tint-6);
		font-weight: var(--font-weight-4);
		font-size: 85%;
		display: block
	}
}

/*SUBSCRIPT AND SUPERSCRIPT*/
.w_sub, i.w_sub,
.w_super, i.w_super {
	font-size: var(--sub-super-font-size);
	position: relative;
	vertical-align: inherit;
	min-width: 1ch;

	&:is(.w_sub, i.w_sub) { top: 0.7ch; }
	&:is(.w_super, i.w_super) { bottom: 0.7ch; }
}

/*BUTTONS & LINKS*/
/*Basic Button*/
/* without the :not, silktide styling is wrong */
button:not(.stcm-button) {
	cursor: pointer;
	background-color: rgba(0,0,0,0);
	padding: 0;

	&:focus {
		outline: 1px dotted;
		outline: 5px auto -webkit-focus-ring-color;
	}
}

/* Changed - TODO: Logout button has underline on hisense when it shouldn't */
/*Link-based buttons*/
a {
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-color: currentColor;
	text-decoration-thickness: var(--link-underline-thickness);
	color: var(--color-secondary);
	cursor: pointer;
	height: max-content;

	transition: color .35s, opacity .35s, text-decoration .35s;

	&:is(.w_logo) { border: 0; }

	&:active, &:hover {
		outline: 0;
		color: inherit;
	}

	&:hover {
		text-decoration-color: inherit;
		text-decoration-thickness: var(--link-hover-underline-thickness);
	}

	&:focus {
		outline-style: var(--focus-style);
		outline-color: var(--focus-colour);
		outline-offset: var(--focus-text-offset);
		outline-width: var(--focus-width);
		border-radius: var(--focus-radius);
	}

	/*Icon Buttons and telephone and email links to not show underline*/
	&:has([class*="ph-"]),
	&:has([class*="ph-"]:hover),
	&:has([class*="ph-"]:active),
	&[href^="tel:"],
	&[href^="email:"] {
		text-decoration: none;
	}
}

/*Not sure if these are actually used anywhere yet*/
button,
input[type=submit],
input[type=reset],
input[type=button],
a[role=button] {
	--font-weight: 600
}

/*Main Button*/
.w_button, a.w_button {
	display: inline-flex;
	padding: var(--space-s) var(--space-m) var(--space-s) var(--space-m);
	margin: var(--space-vertical) 0;
	border-radius: var(--border-radius-secondary);
	box-shadow: var(--shadow-big);
	line-height: 1;
	text-decoration: none;
	text-wrap: balance;
	font-size: var(--font-size-0);
	font-weight: var(--font-weight-6);
	justify-content: center;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-transition: background-color .35s, border-color .35s, color .35s;
	transition: background-color .35s, border-color .35s, color .35s;
	user-select: none;
	--w_button-color: inherit;
	--w_button-background-color: inherit;
	--w_button-border-color: inherit;
	--w_button-hover-color: inherit;
	--w_button-hover-background-color: inherit;
	--w_button-hover-border-color: inherit;
	--w_button-hover-opacit: inherit;
	--w_button-font-size: inherit;
	--w_button-font-weight: inherit;


/*	& + .w_button, & + a.w_button {
		margin-left: var(--space-s);
	}*/

	&:focus {
		outline-style: var(--focus-style);
		outline-offset: var(--focus-offset);
		outline-width: var(--focus-width);
		outline-color: var(--focus-colour);
	}

	&:is(.w_button--small) {
		font-size: var(--font-size--1) !important;
		padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-s);
	}

	&:is(.w_button--full) {
		min-width: 100%;
	}

	border-style: solid;
	border-width: var(--border-size-2);

	/*Primary Button*/
	&:is(.w_button--primary) {
		--w_button-color: var(--button-primary-color);
		--w_button-background-color: var(--button-primary-background-color);
		--w_button-border-color: var(--button-primary-border-color);
		--w_button-hover-color: var(--button-primary-hover-color);
		--w_button-hover-background-color: var(--button-primary-hover-background-color);
		--w_button-hover-border-color: var(--button-primary-hover-border-color);
		--w_button-hover-opacity: var(--button-primary-hover-opacity);
		--w_button-font-size: var(--button-primary-font-size);
		--w_button-font-weight: var(--button-primary-font-weight);
	}
	/*Secondary Button*/
	&:is(.w_button--secondary) {
		--w_button-color: var(--button-secondary-color);
		--w_button-background-color: var(--button-secondary-background-color);
		--w_button-border-color: var(--button-secondary-border-color);
		--w_button-hover-color: var(--button-secondary-hover-color);
		--w_button-hover-background-color: var(--button-secondary-hover-background-color);
		--w_button-hover-border-color: var(--button-secondary-hover-border-color);
		--w_button-hover-opacity: var(--button-secondary-hover-opacity);
		--w_button-font-size: var(--button-secondary-font-size);
		--w_button-font-weight: var(--button-secondary-font-weight);
	}
	/*Contrast Button*/
	&:is(.w_button--contrast) {
		--w_button-color: var(--button-contrast-color);
		--w_button-background-color: var(--button-contrast-background-color);
		--w_button-border-color: var(--button-contrast-border-color);
		--w_button-hover-color: var(--button-contrast-hover-color);
		--w_button-hover-background-color: var(--button-contrast-hover-background-color);
		--w_button-hover-border-color: var(--button-contrast-hover-border-color);
		--w_button-hover-opacity: var(--button-contrast-hover-opacity);
		--w_button-font-size: var(--button-contrast-font-size);
		--w_button-font-weight: var(--button-contrast-font-weight);
	}

	&:is(.w_button--state) {
		& * { transition: color .35s, opacity .35s; }

		&:is(.w_button--state--loading, .w_button--state--success, .w_button--state--failure) { pointer-events: none; }

		&:is(.w_button--state--loading) {
			--w_button-color: var(--button-secondary-color);
			--w_button-background-color: var(--button-secondary-background-color);
			--w_button-border-color: var(--button-secondary-border-color);
		}

		&:is(.w_button--state--success) {
			--w_button-color: contrast-color(var(--color-status-success));
			--w_button-background-color: var(--color-status-success);
			--w_button-border-color: var(--color-status-success);
		}

		&:is(.w_button--state--failure) {
			--w_button-color: contrast-color(var(--color-status-action));
			--w_button-background-color: var(--color-status-action);
			--w_button-border-color: var(--color-status-action);
		}
	}

	color: var(--w_button-color);
	background-color: var(--w_button-background-color);
	border-color: var(--w_button-border-color);

	&:hover {
		color: var(--w_button-hover-color);
		background-color: var(--w_button-hover-background-color);
		border-color: var(--w_button-hover-border-color);
		opacity: var(--w_button-hover-opacity);
	}

	font-size: var(--w_button-font-size);
	font-weight: var(--w_button-font-weight);
}


/*GROUP*/
.w_group {
	display: flex;
	justify-content: space-between;
	align-items: center;

	& .w_button {
		margin-bottom: 0;
		min-width: max-content;
		margin-top: var(--space-vertical);
	}

	& a:not([class]) { border: 0; }

	/*Stack*/
	&:is(.w_group--stack) {
		flex-direction: column;
		align-items: flex-start;

		& .w_button {
			width: 100%;

			& + .w_button {
				margin-left: 0;
				margin-top: var(--space-vertical);
			}

			&:first-child { margin-top: 0; }
			&:last-child { margin-bottom: 0; }
		}
	}
}


/* ICONS */
.w_icon--small { font-size: .8em !important; }


/*TABLE*/
/*Don't know if these are used anywhere yet*/
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;

	& th,
	& td {
		text-align: left;
		vertical-align: top;
		padding: 0;
		font-weight: normal
	}
}


/*HORIZONTAL RULE*/
hr {
	margin: 0;
	border: none;
	border-top: 1px solid #e0e0e0;
}


/*BLOCK QUOTES*/
blockquote,
q {
	quotes: none;

	&::before,
	&::after {
		content: "";
		content: none
	}
}


/*INPUTS*/
input, button, textarea, select {
	font: inherit;
	outline: none;
	background: rgba(0,0,0,0);
	line-height: inherit;
	cursor: pointer;
	accent-color: var(--color-cta);

	&:is(input, textarea) { cursor: text; }

	&:is(textarea:not([rows])) { min-height: 10em; }

	&:is(select) {
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
	}
}

.w_search-select {
	& input {
		display: flex;
		anchor-name: --search-select-anchor;
	}

	& .w_search-select-options {
		position: absolute;
		top: calc(anchor(--search-select-anchor bottom) - var(--border-radius-tertairy));
		left: anchor(--search-select-anchor left);
		right: anchor(--search-select-anchor right);

		display: none;
		z-index: 1;

		border: 2px solid var(--color-primary-tint-6);
		border-top: 0;
		border-bottom-left-radius: var(--border-radius-tertairy);
		border-bottom-right-radius: var(--border-radius-tertairy);
	}


	&.w_search-select--open {
		& input:is([type="text"]):not(:placeholder-shown) {
			&:valid, &.w-status--success {
					border-color: var(--color-primary-tint-6);
					background-color: white;
			}
		}

		& .w_search-select-options {
			display: block;
			background-color: white;
			overflow: hidden;
			

			&::before {
				content: "";
				display: block;
				height: 1px;
				width: 100%;
				background-color: var(--color-primary-tint-2);
			}

			& ul {
				margin: 0;

				overflow: auto;
				max-height: 200px;

				& li {
					margin: 3px;
					padding: calc(calc(var(--space-xs) / 2) - 4px) calc(var(--space-s) - 4px);
					cursor: default;
					border-radius: var(--border-radius-tertairy);

					&:hover { background-color: var(--color-secondary-tint-1); }

					&.w_search-select-options--selected { background-color: var(--color-secondary-tint-3); }
				}
			}
		}
	}
}


/*Don't know if this is used anywhere yet*/
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}
/*Don't know if this is used anywhere yet*/
:target {
	scroll-margin-block: 5ex
}

/*LISTS*/
ul, menu { list-style: none; }

ul, ol {
	margin-block: var(--space-vertical);
	line-height: var(--line-height-1);
	list-style-position: outside;
	/*padding: 0;*/

	& ul {
		margin-top: 0;
		margin-left: var(--space-m);
	}

	& li > label { margin: 0; }

	&:is(ol) > li {
		padding: 0;
		&:before { color: var(--color-secondary); }
	}

	&:is(.w_list) {
		list-style: none;
		padding-left: 0;

		& li {
			display: flex;
			margin-left: 0;
			padding-left: 0;
			margin-block: var(--space-vertical);
			gap: 0;

			&:first-child { margin-top: 0; }
			&:last-child { margin-bottom: 0; }

			& *:first-child:is(i) { align-self: start; }

			& a {
				display: inline-block;
				width: auto;
			}

			& p {
				margin: 0;
				padding-block: 0;
			}

			& h4 {
				margin: 0;
			}
		}

		&:is(.w_list--small) {
			font-size: var(--font-size--1);

			& li { 
				margin-block: var(--space-2xs);

				&:before {
					width: var(--font-size-1);
					min-width: var(--font-size-1);
					height: var(--font-size-1);
					background-size: var(--font-size-1);
				}
			}
		}

		/*For li icons*/
		& li i {
			display: block;
			margin-right: var(--space-horizontal);
			font-size: var(--font-size-2);
		}
		&:is(w_list--small) li i { font-size: var(--font-size-1); }

		/*Seperators between li's*/
		&:is(.separated) {
			& > li + li {
				padding-block-start: var(--space-vertical);
				border-top: var(--border-size-1) solid var(--color-primary-tint-15);
			}
			& > li:last-child { padding-bottom: 0; }

			/* Space before Edit/Delete buttons */
			& > li span { margin-right: auto; }
		}
	}
}

li { align-items: center; }

img, svg, video, canvas, audio, iframe, embed, object {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border-style: none;
}

[disabled] { cursor: not-allowed; }

:where(:not(:defined)) { display: block; }

.debug { border: var(--border-size-1) dashed var(--color-debug) }

em { font-style: normal; }

mark {
	background-color: var(--color-cta-tint);
	padding: 0 .25rem;
}

hr {
	width: 100%;
	margin: var(--space-m) 0;
	border-top: 1px solid var(--color-primary-tint-2);
}

br { line-height: .5; }

s { opacity: .8; }

ol {
	list-style: none;
	counter-reset: numbers;
	padding-left: var(--space-m);
	font-size: var(--font-size--1);

	& li {
		counter-increment: numbers;
		margin-bottom: var(--space-3xs);
		padding-left: var(--space-xs);

		&:before {
			content: counters(numbers, ".") " ";
			margin-right: var(--space-m);
			position: absolute;
			left: -1.5em;
		}

		& li li { padding-left: var(--space-l); }
	}

	& > li { position: relative; }
}

dl {
	margin-bottom: var(--space-l);

	& div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: var(--border-size-1) var(--color-primary-tint-15) solid;
		padding-bottom: var(--space-vertical);
		margin-block: var(--space-vertical);

		&:last-child { border-bottom: none; }
	}

	& dt {
		margin-right: var(--space-l);

		& i {
			color: var(--color-primary);
			font-size: var(--font-size-3);
		}
	}

	& dd {
		flex: 1;
		font-weight: var(--font-weight-6);
	}

	& i {
		color: var(--color-primary-tint-6);
		display: block;
	}
}

.w_intro {
	font-size: var(--font-size-1);
	line-height: var(--line-height-1);
	margin-top: 0;
}

.w_align--center > * {
	text-align: center;
	margin-left: auto;
	margin-right: auto
}

.w_price {
	font-size: var(--font-size-4);
	line-height: 1;
	font-weight: var(--font-weight-7);
	color: var(--color-cta);

	& i {
		display: block;
		font-size: var(--font-size-0);
	}
}

.w_terms-doc {
	& > * { font-size: var(--font-size--1); }
	& .w_list li { display: block; }
	& ul { list-style-type: disc; }
}

code {
	width: max-content;
	padding: var(--half-space-vertical);

	&.discount-code {
		font-size: var(--font-size-1);
		letter-spacing: .1rem;
		border: 1px dashed hsl(from currentColor h s l / .6);
		border-radius: var(--box-border-radius);
		font-weight: var(--font-weight-6);

		&, & * { transition: background-color .35s, border-color .35s, color .35s, opacity .15s; }

		& i { opacity: .75; }
		&:hover {
			background-color: hsl(from currentColor h s calc(l/4) / .25);
			& i { opacity: 1; }
		}
	}
}

.w_section { background-color: var(--color-section-bg) }

.w_container {
	max-width: 1024px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	gap: var(--space-xl);
	padding: var(--space-horizontal)
}

.w_column {
	flex: 1;

	& > *:first-child { margin-top: 0; }
	& > *:last-child { margin-bottom: 0px; }
}

.w_new-row {
	flex-basis: 100%;
	height: 0
}

.w_autogrid {
	--autogrid-gutter: var(--space-xs);
	--autogrid-max: 1fr;
	--autogrid-min: var(--atuogrid-max);

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--autogrid-min), var(--autogrid-max)));
	grid-auto-flow: dense;

	@media(min-width: 768px) {
		--autogrid-gutter: var(--space-s);

		&:is(.w_columns--2) {
			--autogrid-min: 20rem;
			flex-direction: column;
		}
		&:is(.w_columns--3) { --autogrid-min: 18rem; }
		&:is(.w_columns--4) { --autogrid-min: 10rem; }
	}

	grid-gap: var(--autogrid-gutter);
}

@media(min-width: 768px) {
	.w_columns--2 .column-span-2,
	.w_form__fields-group .column-span-2 {
		grid-column: span 2;
	}
}

.w_hero {
	margin-bottom: 0;

	& .w_container {
		background-color: var(--color-primary);
		color: white;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	& .w_column { background-color: transparent; }

	& .w_imagebgtext { margin-bottom: 0 !important; }

	& img {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	&:is(.w_hero--repair) {
		& .w_container {
			margin-bottom: var(--space-m);
			border-radius: var(--border-radius-primary) !important;
		}
	}
}

.w_subhero {
	& .w_container {
		box-shadow: inset 0px 10px 10px -5px rgba(0,0,0,.3);
		background-color: var(--color-primary-tint-3);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		color: var(--color-primary);

		-webkit-box-shadow: inset 0px 10px 10px -5px rgba(0,0,0,.3);
		-moz-box-shadow: inset 0px 10px 10px -5px rgba(0,0,0,.3);
	}

	& .w_column {
		background-color: transparent;
		margin-bottom: 0;
	}

	& h2 { 
		display: flex;
		& i { margin: auto var(--space-s) auto 0; }
	}
}

img {
	box-sizing: border-box;
	max-width: 100%;

	&.w_img--float {
		float: left;
		margin: 0 var(--space-horizontal) var(--half-space-vertical) 0;
	}

	&.w_img--float-right {
		float: right;
		margin: 0 0 var(--half-space-vertical) var(--space-horizontal);
	}
}

figcaption {
	padding: var(--space-2xs) 0;
	display: inline-flex;
	font-size: var(--font-size--1);
	font-weight: var(--font-weight-6);

	&:before {
		content: "";
		align-items: center;
		min-width: var(--font-size-1);
		height: var(--font-size-1);
		background-size: var(--font-size-1);
		background-image: url(/assets/img/icons/tick.svg);
		margin-right: var(--space-s);
	}
}

.w_gradient {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	background-image: linear-gradient(0deg, rgb(15, 22, 48) 0%, rgba(15, 22, 48, 0) 85%),url(/assets/img/manonsofa.jpg);
	background-repeat: no-repeat;
	background-position: center;
	min-height: 600px
}

/*DETAILS/ACCORDIONS*/
details {
	transition: .2s background linear;
	margin: var(--space-vertical) 0;
	background-color: var(--details-bg-color);
	border-radius: var(--border-radius-tertairy);
	box-shadow: var(--shadow);

	&[open], & details { box-shadow: none; }

	/*Nested Details*/
	& details {
		border: solid var(--color-primary-tint-2) var(--border-size-1);
		&[open] & summary { font-weight: var(--font-weight-4); }
	}

	/*Summary*/
	& summary {
		list-style-type: none;
		cursor: pointer;
		background-size: 18px;
		background-repeat: no-repeat;
		background-position: 0 2px;
		position: relative;
		font-family: var(--font-family-primary);
		font-size: var(--font-size-0);
		font-weight: var(--font-weight-6);
		line-height: 1.2;
		color: var(--details-summary-color);
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		padding: var(--space-s);
		user-select: none;

		&:focus { outline: 0; }

		&:after {
			content: '';
			width: 1rem;
			height: 1rem;
			transition: all .3s ease-out;
			position: absolute;
			right: var(--space-s);
			top: var(--space-s);
			background-size: 1rem;
			background-position: 0 3px;
			background-image: var(--icon-down-arrow);
		}

		& i {
			color: var(--color-primary-tint-8);
			font-size: var(--font-size-1);
		}

		& span { flex-grow: 1; }
		& a { margin-right: var(--space-l); }

		&::-webkit-details-marker { display: none; }
		&::marker { display: none; }
	}

	/*Open*/
	&[open] {
		& > summary:after {
			background-position: 0 0;
			transform: rotate(-180deg);
		}

		&:is([name=form]) summary i { color: var(--color-primary); }
	}

	/*Disabled*/
	&[disabled] summary {
		pointer-events: none;
		user-select: none
	}

	/*Content*/
	&::details-content {
		transition-property: height, opacity, content-visibility, transform;
		transition-duration: .25s;
		transition-timing-function: ease-in-out;
		transition-behavior: allow-discrete; 

		height: 0;
		padding: 0;
		opacity: 0;
		overflow: hidden;
		padding-left: var(--space-s);
		padding-right: var(--space-s);
	}
	&[open]::details-content {
		height: auto;
		padding-bottom: var(--space-s);
		opacity: 1;
	}
	& .w_details__content > *:first-child { margin-top: 0; }

	/*Steps*/
	/*Next*/
	&:is(.w_next-step) {
		opacity: .5;
		& summary { cursor: default; }
	}
	/*Completed*/
	&:is(.w_completed-step) {
		& i { color: var(--color-cta); }
		&:not([open]) summary span {
			font-weight: var(--details-completed-step-font-weight);
			opacity: var(--details-completed-step-opacity);
		}
	}
}

/*Don't think these are used yet?*/
/*.w_nav__content {
	margin: var(--space-vertical) 0 0 0;
	border-bottom-left-radius: var(--border-radius-tertairy);
	border-bottom-right-radius: var(--border-radius-tertairy);
	background-color: #fff
}

details[open].w_nav--success, .w_nav--success {
	background-color: var(--color-status-success-tint);
	border-color: var(--color-status-success);
	& i { color: var(--color-status-success); }
}

details[open].w_nav--warning, .w_nav--warning {
	background-color: var(--color-status-warning-tint);
	border-color: var(--color-status-warning);
	& i { color: var(--color-status-warning); }

	& a {
		color: var(--color-status-warning);
		outline-color: var(--color-status-warning);
		border-color: var(--color-status-warning);
	}

	& .w_button--primary { background-color: var(--color-status-warning); }

}

details[open].w_nav--action, .w_nav--action {
	background-color: var(--color-status-action-tint);
	border-color: var(--color-status-action);
	& InactiveBorder { color: var(--color-status-action); }

	& a {
		color: var(--color-status-action);
		outline-color: var(--color-status-action);
		border-color: var(--color-status-action);
	}

	& .w_button--primary { background-color: var(--color-status-action); }
}*/

form { display: flow-root; }

.w_form__fields-group {
	display: grid;
	gap: .5cap;
	margin-bottom: var(--space-vertical); /*Adusting spacing of components - will probably change later*/

	@media(width > 768px) {
		grid-template-columns: 1fr 1fr;
		gap: 0 1rem;

		& > .w_form__field-group:nth-last-child(2) {
			& input:not([type=checkbox]),
			& select,
			& .input-symbol span,
			& .input-symbol i {
				margin-bottom: var(--space-vertical);
			}
		}
	}

	& > .w_form__field-group:last-child {
		& input:not([type=checkbox]),
		& select,
		& .input-symbol span,
		& .input-symbol i {
			margin-bottom: var(--space-vertical);
		}
	}

	&:has(.w_message) {
		& select, &.w_message { margin: 0; }
	}

	& label {
		margin: 0;
		margin-bottom: 3px;
	}
}

/* Without the :not, silktide styling is off */
fieldset:not(#stcm-modal *) {
	--w_fieldset-background-color: var(--fieldset-background-color);

	border-color: var(--fieldset-border-color);
	border-style: var(--fieldset-border-style);
	border-width: var(--fieldset-border-size);
	border-radius: var(--border-radius-tertairy);
	
	padding: var(--space-xs) var(--space-s);
	margin-bottom: var(--space-xs);

	& ul { margin: 0; }

	&:is(.w_muted):has(input[type=checkbox]) {
		--w_fieldset-background-color: var(--fieldset-muted-background-color);
		padding: var(--half-space-vertical) 0;
		border: none;
	}

	background-color: var(--w_fieldset-background-color);
}

/* Without the :not, silktide styling is off */
legend:not(#stcm-modal *) {
	padding: 0;
	margin-bottom: var(--space-s);
	font-weight: bold;
	float: left;
	width: 100%;
	display: flex;
	align-items: center;

	& img {
		margin-right: 1rem;
		height: 100%;
	}
}

label {
	font-weight: var(--font-weight-5);
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 var(--space-2xs) 0;
	align-items: center;

	& small {
		flex-basis: 100%;
		margin: 0;
		color: var(--color-primary-tint-7);
	}

	& i {
		font-size: var(--font-size--1);
		color: var(--color-primary-tint-7);
	}

	& em {color: var(--color-status-action);  }
}

.w_form__labelsmall {
	font-size: var(--font-size--1);
	line-height: var(--font-lineheight-3)
}

input::placeholder,
:placeholder-shown {
	color: var(--color-primary-tint-4);
}

textarea,
select,
input:is([type=text], [type=email], [type=search], [type=tel], [type=url], [type=password], [type=color], [type=file], [type=number], [type=range], [type=date], [type=month], [type=week], [type=time], [type=datetime], [type=datetime-local]) {
	margin: 0 0 var(--space-vertical-gap) 0;
	border: 1px solid var(--color-primary-tint-2);
	border-radius: var(--border-radius-tertairy);
	width: 100%;
	background-color: #fff;
	font-size: var(--font-size-0);
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

	--input-padding-x: var(--space-s);
	--input-padding-y: var(--space-xs);

	--input-padding-unfocused: var(--input-padding-y) var(--input-padding-x);
	--input-padding-focus: calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);

	--input-padding: var(--input-padding-unfocused);

	label & {
		display: block;
		width: 100%;
	}
	/*standardise with the other focuses*/
	&:focus {
		border-width: 2px;
		border-color: var(--color-primary-tint-6);
		--input-padding: var(--input-padding-focus);
	}

	&:not(:placeholder-shown) {
		&:valid,
		&.w_status--success {
			border-color: var(--color-status-success);
			background-color: var(--color-status-success-tint);
			font-weight: 700;

			&:focus {
				border-width: 2px;
				border-color: var(--color-status-success);
				background-color: var(--color-status-success-tint);
				font-weight: 700;
			}
		}

		&:user-invalid,
		&.w_status--action {
			border-color: var(--color-status-action);
			background-color: var(--color-status-action-tint);
		}

		&:user-invalid:focus,
		&.w_status--warning {
			border-width: 2px;
			border-color: var(--color-status-warning);
			--input-padding: var(--input-padding-focus);
			background-color: var(--color-status-warning-tint);
		}
	}

	&:is(select) {
		transition: height .35s ease;

		&:is(select[size]):not([size="1"], [size="0"]) {
			--input-padding: 4px;

			&:focus { --input-padding: 3px; }
			& option, &:is(:focus, :active) option {
				padding: calc(calc(var(--input-padding-y) / 2) - 3px) calc(calc(var(--input-padding-x) / 2) - 3px);
				border-radius: var(--border-radius-tertairy);

				&:is(:checked) {
					background-color:  var(--multiline-select-checked-background-colour) !important;
					color: var(--multiline-select-checked-colour) !important;
					/*Background image overrides some default system colour the browser gives when select is active for some reason*/
					background-image: linear-gradient(0deg, 
						var(--multiline-select-checked-background-colour) 0%, 
						var(--multiline-select-checked-background-colour) 100%
					) !important;
				}
			}
		}
	}

	padding: var(--input-padding);
}

.w_address-lookup {
	& select, & input {
		&, &:valid {
			border-color: var(--color-primary-tint-2) !important;
			background-color: white !important;
		}
	}
}


textarea { field-sizing: content }

input[type=search] { box-sizing: border-box; }

input[type=file] {
	border-width: 0;
	padding: 0;
}

input[type=image] { vertical-align: bottom; }

input[id=postcode],
.w_uppercase {
	text-transform: uppercase;
}

select {
	background-color: white;
	color: var(--color-primary);
}

input[type=checkbox] {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--form-background);
	margin: 0;
	font: inherit;
	color: currentColor;
	min-width: 1.15em;
	height: 1.15em;
	border-radius: .15em;
	display: inline-grid;
	place-content: center;
	cursor: pointer;

	--w_checkbox-border-size: var(--checkbox-border-size);

	*:is(.w_muted) & { --w_checkbox-border-size: var(--checkbox-muted-border-size); }

	border: var(--w_checkbox-border-size) solid currentColor;

	&::before {
		content: "";
		width: .65em;
		height: .65em;
		clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
		transform: scale(0);
		transform-origin: bottom left;
		transition: 120ms transform ease-in-out;
		box-shadow: inset 1em 1em var(--form-control-color);
		background-color: CanvasText; /*is this meant as a fallback?*/
		background-color: var(--checkbox-color);
	}
	&:checked::before { transform: scale(1); }

	&:focus { outline-offset: max(2px,.15em); }

	&:disabled {
		--form-control-color: var(--form-control-disabled);
		color: var(--form-control-disabled);
		cursor: not-allowed;
	}

	label:has(&) {
		flex-wrap: nowrap;
		font-weight: initial;
		margin-bottom: 0;

		& span,
		& p,
		& b,
		& i,
		& strong {
			cursor: pointer;
			user-select: none;
			margin: 0;
		}

		fieldset > & > span { font-size: smaller; }

		*:is(.w_muted) & { color: var(--small-color); }
	}
}

/*Symbols in inputs*/
.input-symbol {
	position: relative;
	display: inline-block;
	width: 100%;

	& span,
	& i {
		position: absolute;
		left: var(--space-xs);
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		margin-bottom: var(--space-vertical-gap, 0);
		font-weight: bold;
		color: var(--color-primary-tint-6, inherit);
	}

	& input:not(:focus) { padding-left: calc(var(--space-xs) * 2.5); }
	& input:focus { padding-left: calc(calc(var(--space-xs) * 2.5) - 1px) !important; }
}

.w_progress {
	background-color: #fff;
	border-radius: var(--border-radius-tertairy);
	margin-top: 0;
	display: flex;
	flex-direction: column;
	
	& .w_progress__title,
	& .w_progress__subtitle {
		padding-top: var(--space-vertical);
		padding-left: var(--space-vertical);
	}

	& .w_progress__title {
		margin: 0;
		font-size: var(--font-size-2);
		font-weight: var(--font-weight-6);
	}

	& .w_progress__items {
		background-color: white;
		border-radius: var(--border-radius-primary);
		padding: var(--space-2xs) var(--space-2xs);
		margin: 0;
		display: flex;
		width: 100%;

		& li {
			transition-property: background, width;
			transition-duration: .35s;
			transition-timing-function: ease-in;

			background-color: var(--color-primary-tint-15);
			padding: var(--space-3xs);
			flex: 1;

			&:first-child {
				border-top-left-radius: var(--border-radius-primary);
				border-bottom-left-radius: var(--border-radius-primary);
			}

			&:last-child {
				border-top-right-radius: var(--border-radius-primary);
				border-bottom-right-radius: var(--border-radius-primary);
			}

			& + li { border-left: calc(var(--border-size-3) / 2) solid white; }
			&:has( + li) { border-right: calc(var(--border-size-3) / 2) solid white; }

			&.w_progress__complete { background-color: var(--color-secondary); }
			&.w_progress__active { background-color: var(--color-primary); }
		}
	}
}

.w_switch {
	position: relative;
	display: inline-flex;
	padding: var(--space-3xs);
	border: var(--border-size-3) solid #fff;
	border-radius: var(--border-radius-primary);
	background: white;

	& label {
		z-index: 1;
		min-width: min-content;
		padding: 0 var(--space-l);
		margin: 0;
		cursor: pointer;
		border-radius: var(--border-radius-primary);
		justify-content: center;
		text-align: center;
		font-weight: var(--font-weight-6);
		line-height: var(--font-lineheight-4);
		transition: color .25s ease-in-out;

		&:hover { background: var(--color-primary-tint-1); }
	}

	&.w_switch__highlighter {
		position: absolute;
		top: 0px;
		left: 0px;
		width: calc(50% - 0px);
		height: calc(100% - 0px);
		border-radius: 30px;
		background: var(--color-primary);
		transition: transform .25s ease-in-out;
	}

	& [type=radio] {
		position: absolute;
		left: -9999px;

		&:checked {
			&:is(#monthly, #yearly) {
				& ~ label:is([for=monthly], [for=yearly]) {
					color: white;
					&:hover { background: transparent; }
				}
			}

			&#monthly + label[for=yearly] ~ .w_switch__highlighter { transform: none; }
			&#yearly + label[for=monthly] ~ .w_switch__highlighter { transform: translateX(100%); }
		}
	}
}

.w_icon {
	font-size: var(--font-size-5);
	margin-bottom: var(--space-s)
}

.w_icongroup { max-width: 400px }

.w_banner {
	display: flex;
	padding: var(--space-s);
	gap: var(--space-2xs);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-0);
	border-radius: var(--border-radius-tertairy);
	margin-bottom: var(--space-s);

	& p { margin-bottom: 0; }

	&.w_banner--important,
	&.w_banner--offer {
		color: white;
		border: 0;
	}
	&.w_banner--important { background-color: var(--color-primary); }
	&.w_banner--offer { background-color: var(--color-highlight); }

	&.w_banner--offer-tint {
		color: var(--color-tertiary);
		background-color: var(--color-tertiary-tint-1);
		flex-direction: column;

		& img { max-width: 280px; }
	}

	&.w_banner--promo {
		color: white;
		background-color: var(--color-highlight);
		font-weight: var(--font-weight-6);
	}

	& .w_banner__heading,
	& .w_banner__subtitle {
		display: block;
		margin-bottom: var(--space-2xs);
	}

	& .w_banner__subtitle {
		text-transform: uppercase;
		letter-spacing: .1rem;
		opacity: .7
	}

	& .w_banner__heading {
		font-size: var(--font-size-3);
		font-weight: var(--font-weight-6)
	}
}

.w_message {
	display: flex;
	padding: var(--message-padding);
	margin-block: var(--message-margin-block);
	gap: var(--space-2xs);
	border-radius: var(--message-border-radius);
	font-family: var(--font-family-secondary);
	line-height: var(--font-lineheight-1);


	--w_message-color: var(--message-color);
	--w_message-background-color: var(--message-background-color);
	--w_message-variant-color: var(--message-variant-color);
	
	--message-primary-button-color: inherit;
	--message-primary-button-background-color: inherit;
	
	--message-contrast-button-color: inherit;
	--message-contrast-button-outline-color: inherit;

	& p, & ul, & small { margin: 0; }


	&:is(.w_message--stack) { flex-direction: column; }

	& .w_message__title, & .w_message__subtitle {
		line-height: var(--font-lineheight-0);
		margin-bottom: var(--half-space-vertical);

		&:is(.w_message__title) {
			font-size: var(--font-size-2);
			font-weight: var(--font-weight-7);

			& + .w_message__subtitle { margin-bottom: 0; }
		}

		&:is(.w_message__subtitle) {
			text-transform: uppercase;
			letter-spacing: var(--font-letterspacing-1);
			font-weight: var(--font-weight-7);
		}
	}


	/*Success*/
	&:is(.w_message--success) {
		--w_message-color: var(--message-success-color);
		--w_message-background-color: var(--message-success-tint-color);
		--w_message-variant-color: var(--message-success-primary-color);
	}
	/*Solid Success*/
	&:is(.w_message--success--solid) {
		--w_message-color: var(--message-success-solid-color);
		--w_message-background-color: var(--message-success-primary-color);
		--w_message-variant-color: var(--message-success-solid-color);
	}

	/*Action*/
	&:is(.w_message--action) {
		--w_message-color: var(--message-action-color);
		--w_message-background-color: var(--message-action-tint-color);
		--w_message-variant-color: var(--message-action-primary-color);
	}
	/*Solid Action*/
	&:is(.w_message--action--solid) {
		--w_message-color: var(--message-action-solid-color);
		--w_message-background-color: var(--message-action-primary-color);
		--w_message-variant-color: var(--message-action-solid-color);
	}

	/*Warning*/
	&:is(.w_message--warning) {
		--w_message-color: var(--message-warning-color);
		--w_message-background-color: var(--message-warning-tint-color);
		--w_message-variant-color: var(--message-warning-primary-color);
	}
	/*Solid Warning*/
	&:is(.w_message--warning--solid) {
		--w_message-color: var(--message-warning-solid-color);
		--w_message-background-color: var(--message-warning-primary-color);
		--w_message-variant-color: var(--message-warning-solid-color);
	}

	/*Highlight*/
	&:is(.w_message--highlight) {
		--w_message-color: var(--message-highlight-solid-color);
		--w_message-background-color: var(--message-highlight-tint-color);
		--w_message-variant-color: var(--message-highlight-primary-color);
	}
	/*Solid Highlight*/
	&:is(.w_message--highlight--solid) {
		--w_message-color: var(--message-highlight-solid-color);
		--w_message-background-color: var(--message-highlight-primary-color);
		--w_message-variant-color: var(--message-highlight-solid-color);
	}
	/*Transparent*/
	&:is(.w_message--transparent) { --w_message-background-color: transparent; }

	/*Outline*/
	&:is(.w_message--outline) { border: var(--message-outline-border) var(--w_message-variant-color); }

	/*Important*/
	&:is(w_message--important) {
		--w_message-color: var(--message-important-color);
		--w_message-background-color: var(--message-important-primary-color);
		--w_message-variant-color: var(--message-important-color);
	}

	/*Solid Offer*/
	&:is(.w_message--offer--solid) {
		--w_message-color: var(--color-offer-text);
		--w_message-background-color: var(--color-offer);
		& small { color: var(--w_message-variant-color); }
	}


	background-color: var(--w_message-background-color);

	&, & *:not(small, a) {
		color: var(--w_message-color);
		text-wrap: balance;
	}
	& small {
		text-wrap: pretty;
		opacity: .6;
		font-weight: var(--font-weight-4);
	}
	& p {
		font-size: var(--font-size-0);
	}

	& i,
	& strong,
	& .w_message__title,
	& .w_price,
	& h1, & h2, & h3, & h4, & h5, & h6 {
		color: var(--w_message-variant-color);
	}
}


.w_basket {
	margin-block: var(--space-vertical);
	border-radius: var(--border-radius-tertairy);
	line-height: var(--font-lineheight-1);

	& div:first-child {
		&, & li:first-child {
			border-top-right-radius: var(--border-radius-tertairy);
			border-top-left-radius: var(--border-radius-tertairy);
		}
	}

	& div:last-child {
		&, & li:last-child {
			border-bottom-right-radius: var(--border-radius-tertairy);
			border-bottom-left-radius: var(--border-radius-tertairy);
		}
	}

	& h4, & h5 { color: var(--color-secondary); }

	& details {
		background-color: rgba(0,0,0,0);
		border-color: rgba(0,0,0,0);
		border-bottom: var(--border-size-1) solid var(--color-primary-tint-15);
		border-radius: 0;

		&[open] { border-color: transparent; }
		&, & ul { margin: 0; }
	}
}

.w_basket__header {
	display: flex;
	justify-content: space-between;
	padding: var(--space-s);
	background-color: var(--color-primary);
	
	color: #fff;
	font-weight: var(--font-weight-6);
	font-size: var(--font-size-0);

	& i { margin-right: var(--space-2xs); }
}

.w_basket__items {
	border-left: var(--border-size-1) solid var(--color-primary-tint-15);
	border-right: var(--border-size-1) solid var(--color-primary-tint-15);
	margin: 0;

	& ul,
	& select,
	& w_box { margin: 0; }

	& a:not(.w_button) {
		font-weight: var(--font-weight-6);
		border-color: inherit;
		border-style: solid;
		border-bottom-width: var(--border-size-1);
	}

	& li {
		display: flex;
		gap: var(--space-xs);
		padding: var(--space-horizontal);
		margin-bottom: 0;

		&:not(:last-child) { border-bottom: var(--border-size-1) solid var(--color-primary-tint-15); }
	}

	& s, & em { color: var(--color-primary-tint-4); }

	& i {
		color: var(--color-primary-tint-5);
		display: inline-block;
		height: 100%;
		line-height: inherit;
		font-size: var(--font-size-1);
	}
}

.w_basket__item { flex-grow: 1; }

.w_basket__price {
	min-width: max-content;
	font-weight: var(--font-weight-6)
}

.w_basket__highlight { background-color: var(--color--basket--highlight) }

.w_basket__total {
	background-color: var(--color--basket--highlight);
	font-weight: var(--font-weight-6);
	border-top-width: var(--border-size-1) !important;
	border-top-color: var(--color-primary-tint-6) !important
}

.w_basket__footer {
	background-color: var(--color--basket--footer);
	border-radius: 0 0 var(--border-radius-tertairy) var(--border-radius-tertairy);
	border-left: var(--border-size-1) solid var(--color-primary-tint-15);
	border-right: var(--border-size-1) solid var(--color-primary-tint-15);
	padding: 0 var(--space-horizontal) var(--space-vertical) var(--space-horizontal);
	border-bottom: var(--border-size-1) solid var(--color-primary-tint-15);

	& details {
		padding: 0;
		margin-top: var(--space-vertical);
		border: 0;

		& .w_details__content {
			margin-top: var(--space-vertical);
			background-color: transparent;
		}
	}
}

.w_dialog {
	& .w_dialog-backdrop, & dialog {
		position: fixed;
		inset: 0;
		opacity: 0;
		visibility: hidden;

		transition: visibility var(--dialog-transition-duration), opacity var(--dialog-transition-duration);
		transition-behavior: allow-discrete;
	}

	& .w_dialog-backdrop {
		background: var(--dialog-backdrop-colour);
		-webkit-backdrop-filter: var(--dialog-backdrop-filter);
		backdrop-filter: var(--dialog-backdrop-filter);
		z-index: 1000;
	}

	& dialog {
		display: flex;
		transform: scaleY(.75);
		transform-origin: center center;

		transition: height var(--dialog-transition-duration) ease, transform calc(var(--dialog-transition-duration)/2) ease;

		flex-direction: column;
		max-height: var(--dialog-max-height);
		border-radius: var(--border-radius-tertairy);
		margin: auto;
		box-shadow: var(--shadow-big);
		z-index: 20001;

		--w_dialog-width: var(--dialog-width);
		&.w_dialog--thin { --w_dialog-width: var(--dialog-width-thin); }

		max-width: var(--w_dialog-width);
		min-width: var(--w_dialog-width);

		&.w_group:last-child { margin-top: var(--space-l); }

		--w_dialog-background-colour: var(--dialog-background-colour);
		--w_dialog-color: var(--dialog-colour);
		&.w_dialog--dark {
			--w_dialog-background-color: var(--dialog-dark-background-colour);
			--w_dialog-color: var(--dialog-dark-colour);
			/*This one initially had the same selectors as the next but overwrote the color to this
				I'm assuming it's meant for primary instead*/
			& .w_button--primary, & a.w_button--primary { color: var(--color-cta); }
			& .w_button--contrast, & a.w_button--contrast { color: white; }
		}

		background-color: var(--w_dialog-background-colour);
		color: var(--w_dialog-colour);


		& .w_dialog__title {
			display: block;
			font-size: var(--dialog-title-font-size);
			font-weight: var(--dialog-title-font-weight);
			margin: var(--dialog-title-margin);

			& a {
				float: right;
				border-bottom: 0;
			}
		}

		& .w_dialog-content {
			width: 100%;
			overflow-y: auto;
			padding-left: var(--dialog-padding);
			padding-right: var(--dialog-padding);
			padding-bottom: var(--dialog-padding);
		}
		&:not(:has(.w_dialog__title)) .w_dialog-content { padding-top: var(--dialog-padding); }
	}

	&.w_dialog--open {
		/*Stop background from scrolling*/
		body:has(&) { overflow: hidden; }

		& dialog {
			opacity: 1;
			visibility: visible;
			transform: scaleY(1);
		}
		& .w_dialog-backdrop {
			opacity: 1;
			visibility: visible;
		}
	}
}


.w_terms-doc {
	overflow: scroll;
	align-content: flex-start;
	align-items: flex-start
}

/*Boxes*/
.w_box {
	--w_box-color: var(--box-color);
	--w_box-background-color: var(--box-background-color);
	--w_box-title-color: var(--box-title-color);
	--w_box-icon-color: var(--box-icon-color);
	--w_box-border-radius: var(--box-border-radius);

	padding: var(--box-padding);
	margin-block: var(--box-margin-block);

	& .w_box__title {
		display: block;
		margin: 0 0 var(--space-m) 0;
		font-size: var(--font-size-3);
		font-weight: var(--font-weight-6);
		line-height: var(--font-lineheight-0);
		text-wrap: balance
	}

	/* -------------------------
	Box Modifiers
	For specific parts of the page only

	Possible modifications:
	border, background image etc */
	&.w_box--hero {
		--w_box-color: var(--box-hero-color);
		--w_box-background-color: var(--box-hero-background-color);
		--w_box-title-color: var(--box-hero-title-color);
		--w_box-icon-color: var(--box-hero-icon-color);
	}
	&.w_box--service {
		--w_box-color: var(--box-service-color);
		--w_box-background-color: var(--box-service-background-color);
		--w_box-title-color: var(--box-service-title-color);
		--w_box-icon-color: var(--box-service-icon-color);
	}
	&.w_box--highlight {
		--w_box-color: var(--box-highlight-color);
		--w_box-background-color: var(--box-highlight-background-color);
		--w_box-title-color: var(--box-highlight-title-color);
		--w_box-icon-color: var(--box-highlight-icon-color);
	}
	&.w_box--info {
		--w_box-color: var(--box-info-color);
		--w_box-background-color: var(--box-info-background-color);
		--w_box-title-color: var(--box-info-title-color);
		--w_box-icon-color: var(--box-info-icon-color);
	}
	&.w_box--warning {
		--w_box-color: var(--box-warning-color);
		--w_box-background-color: var(--box-warning-background-color);
		--w_box-title-color: var(--box-warning-title-color);
		--w_box-icon-color: var(--box-warning-icon-color);
	}
	&.w_box--action {
		--w_box-color: var(--box-action-color);
		--w_box-background-color: var(--box-action-background-color);
		--w_box-title-color: var(--box-action-title-color);
		--w_box-icon-color: var(--box-action-icon-color);
	}
	&.w_box--success {
		--w_box-color: var(--box-success-color);
		--w_box-background-color: var(--box-success-background-color);
		--w_box-title-color: var(--box-success-title-color);
		--w_box-icon-color: var(--box-success-icon-color);
	}
	&.w_box--transparent { --w_box-background-color: transparent; }

	&.w_box--focus { border: var(--box-focus-border-size) var(--box-focus-border-style) var(--box-focus-border-color); }

	/*Is this being used anywhere yet?*/
	&.w_box--price {
		--w_box-color: var(--box-price-color);
		--w_box-background-color: var(--box-price-background-color);
		--w_box-title-color: var(--box-price-title-color);
		--w_box-border-radius: var(--box-price-border-radius);

		display: flex;
		flex-direction: column;
		height: max-content;
		align-self: center;

		& p:nth-of-type(1),
		& p:nth-of-type(2) {
			margin-bottom: 0;
		}
	}

	color: var(--w_box-color);
	background-color: var(--w_box-background-color) !important;
	& h4, & .w_box__title { color: var(--w_box-title-color); }
	& i { color: var(--w_box-icon-color); }
	border-radius: var(--w_box-border-radius);
}


/*Page*/
.w_page {
	min-height: 100dvh;

	display: flex;
	flex-direction: column;
	max-width: 1024px;
	margin: 0 auto;

	/*Header*/
	& .w_header {
		background-color: var(--color-section-bg);
		border-radius: var(--border-radius-tertairy) var(--border-radius-tertairy) 0 0;

		@media(min-width: 1024px) {
			& { margin-top: var(--space-vertical); }
			& .w_header__top {
				border-top-left-radius: var(--border-radius-tertairy);
				border-top-right-radius: var(--border-radius-tertairy);
			}
		}

		&, & .w_header__top {
			transition-duration: 75ms;
			transition-timing-function: ease-out;
		}		

		& .w_header__top {
			justify-content: space-between;
			background-color: #fff;
			height: 64px;
			padding-top: 0;
			padding-bottom: 0;

			transition-property: border-top-left-radius, border-top-right-radius;

			& img {
				margin-top: auto;
				margin-bottom: auto;
			}
		}

		/*Header Image*/
		& .w_header__image {
			display: flex;
			align-items: flex-end;

			--w_header-image: var(--header-image);
			--w_header-image-small: var(--header-image-small);

			--w_header-image-padding: var(--header-image-padding);
			--w_header-iamge-min-height: var(--header-image-min-height);
			--w_header-image-large-min-height: var(--header-image-large-min-height);

			--w_header-image-size: var(--header-image-size);
			--w_header-image-repeat: var(--header-image-repeat);
			--w_header-image-position: var(--header-image-position);

			transition: min-height 75ms ease-out;

			.w_page--register & {
				--w_header-image: var(--register-image);
				--w_header-image-small: var(--register-image-small);

				--w_header-image-padding: var(--register-image-padding);
				--w_header-image-large-min-height: var(--register-image-large-min-height);

				--w_header-image-size: var(--register-image-size);
				--w_header-image-repeat: var(--register-image-repeat);
				--w_header-image-position: var(--register-image-position);
			}
			
			background-image: var(--w_header-image);

			padding: var(--w_header-image-padding);
			min-height: var(--header-image-min-height);

			background-size: var(--w_header-image-size);
			background-repeat: var(--w_header-image-repeat);
			background-position: var(--w_header-image-position);

			@media (min-width: 769px) { min-height: var(--w_header-image-large-min-height); }
		}

		& .w_header__logo { max-width: var(--logo-max-width); max-height: 100%; padding: 4px 0; }
		& .w_header__pbp { max-width: var(--pbp-max-width); }
	}

	/*User Bar*/
	& .w_header-user {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		margin-bottom: -1px;
		background-color: var(--color-section-bg);
		border-top-left-radius: var(--border-radius-primary);
		border-top-right-radius: var(--border-radius-primary);
		padding: var(--space-s) var(--space-m) 0 var(--space-m);
	}

	& .w_header-user-details {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		color: var(--color-page-text);
		background-color: var(--color-section-bg);
		padding: 0 var(--space-xs) var(--space-xs) var(--space-xs);
		font-size: var(--font-size-1);
		font-family: var(--font-family-primary);
		font-weight: var(--font-weight-6);

		& a {
			text-decoration: none;
			color: var(--color-page-text);
			font-size: var(--font-size-0);
		}
		
		& a:hover {
			text-decoration: solid;
			color: var(--color-secondary);
		}
	}

	/*Main*/
	& > main { background: var(--color-section-bg); }

	/*Footer*/
	.w_footer {
		color: var(--color-page-text);
		font-size: var(--font-size--1);
		line-height: var(--font-lineheight-5);

		& .w_section { border-radius: 0; }
		& small { color: var(--footer-small-color); }
	}
}


/*Row*/
.w_row {
	--gap: 0 var(--space-horizontal, 0.25rem);
	--flow: row wrap;
	--align-items: center;

	&.w_row--small { --gap: 0 var(--half-space-horizontal); }

	&.w_row--equal {
		--flow: row;
		--first-label-justify: start;
		--label-justify: center;
		--last-label-justify: end;
		--align-items: start;

		/*break into column when viewport is small*/
		&.w_row--small {
			@media(width <= 440px) {
				--flow: column;
				--gap: var(--space-vertical) 0;
				--first-label-justify: start;
				--label-justify: start;
				--last-label-justify: start;

				& > *:not(:last-child) { margin-bottom: 0; }
			}
		}

		&:not(.w_row--small) {
			@media(width <= 768px) {
				--flow: column;
				--gap: var(--space-vertical, 0.25rem) 0;
				--first-label-justify: start;
				--label-justify: start;
				--last-label-justify: start;

				& > *:not(:last-child) { margin-bottom: 0; }
			}
		}

		& > *,
		& .w_row-item {
			flex: 1;
			&.w_row-item--double-width { flex: 2; }
			&.w_row-item--half-width { flex: 0.5 }
		}

		& > * > label { justify-content: var(--label-justify); }
		& > :first-child > label { justify-content: var(--first-label-justify); }
		& > :last-child > label { justify-content: var(--last-label-justify); }

		& > .w_button { width: 100%; }
	}

	display: inline-flex;
	flex-flow: var(--flow);
	align-items: var(--align-items);
	gap: var(--gap);
	width: 100%;

	/*Children styling*/
	&.w_row--expand-start > :first-child { margin-right: auto !important; }
	&.w_row--expand-end > :last-child { margin-left: auto !important; }

	/* Give all a's within inline flex so they correctly align centered vertically in the row*/
	& a { display: inline-flex; }

	& > .w_button { margin: 0; }
}

/*Utility Classes*/

/* Utility Colour classes */
.w_colour_primary { color: var(--color-primary) !important; }
.w_colour_primary_tint { color: var(--color-primary-tint-8) !important; }

.w_colour_secondary { color: var(--color-secondary) !important; }
.w_colour_secondary_tint { color: var(--color-secondary-tint-8) !important; }

.w_colour_tertiary { color: var(--color-tertiary) !important; }
.w_colour_tertiary_tint { color: var(--color-tertiary-tint-8) !important; }

.w_colour_success { color: var(--color-status-success) !important; }
.w_colour_success_tint { color: var(--color-status-success-tint) !important; }

.w_colour_warning { color: var(--color-status-warning) !important; }
.w_colour_warning_tint { color: var(--color-status-warning-tint) !important; }

.w_colour_action { color: var(--color-status-action) !important; }
.w_colour_action_tint { color: var(--color-status-action-tint) !important; }

.w_colour_offer { color: var(--color-offer) !important; }
.w_colour_offer_tint { color: var(--color-offer-tint) !important; }

/*Opacity*/
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }

.center {
	justify-self: center;
	align-self: center;
}
.center-items {
	display: flex;
	align-items: center;
}

/*Overlapping*/
.overlapping {
	display: inline-grid;
	place-items: center;

	& > * {
		transition: color .35s, opacity .35s ease-in;
		grid-column-start: 1;
		grid-row-start: 1;
	}

	&.overlapping--vertical-center-only {
		place-items: normal;
		align-items: center;
	}
}

/*Show/Hide*/
.w_content,
.w_content-horizontal {
	transition-duration: .35s;
	transition-timing-function: ease-in-out;

	opacity: 1;
	overflow: hidden;

	&.w_content--hidden {
		opacity: 0;
		font-size: 0;
		border: 0 !important;

		&.w_content--full-opacity { opacity: 1; }
	}


	&:is(.w_content) {
		transition-property:
			opacity,
			height,
			border-top,
			border-bottom,
			margin-top,
			margin-bottom,
			padding-top,
			padding-bottom;
		height: auto;
		
		&.w_content--hidden {
			height: 0;
			border-top: 0;
			border-bottom: 0;
			margin-top: 0;
			margin-bottom: 0;
			padding-top: 0;
			padding-bottom: 0;
		}
	}

	&:is(.w_content-horizontal) {
		transition-property:
			opacity,
			width,
			border-left,
			border-right,
			margin-left,
			margin-right,
			padding-left,
			padding-right;
		width: auto;
		
		&.w_content--hidden {
			width: 0;
			border-left: 0;
			border-right: 0;
			margin-left: 0;
			margin-right: 0;
			padding-left: 0;
			padding-right: 0;
		}
	}
}

/* No Grid Spacing */
.autogrid-no-gap { gap: 0; }
.copied { font-family: var(--font-family-primary, inherit); }
.clickable{
	&:hover { cursor: pointer; }
}
.invisible { opacity: 0 !important; }
.hidden { visibility: hidden; }
.hidden-label { display: none; }
.visible { visibility: visible; }
.disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

/*MUTED*/
.w_muted {
	color: inherit;

	/*Text*/
	&:is(span),
	&:is(p),
	& span,
	& p,
	& input {
		opacity: .6;
	}
}

/*Margin - All*/
:is([class^="ma-"], [class*=" ma-"]) {
	--ma-mult: 0;
	--ma-y-result: calc(var(--base-y) * var(--ma-mult));
	--ma-x-result: calc(var(--base-x) * var(--ma-mult));

	&.ma-a {
		--ma-y-result: auto;
		--ma-x-result: auto;
	}
	&.ma-0 {
		--ma-y-result: 0;
		--ma-x-result: 0;
	}
	&.ma-1 { --ma-mult: 1; }
	&.ma-2 { --ma-mult: 2; }
	&.ma-3 { --ma-mult: 3; }
	&.ma-4 { --ma-mult: 4; }
	&.ma-5 { --ma-mult: 5; }
	&.ma-6 { --ma-mult: 6; }

	margin: var(--ma-y-result) var(--ma-x-result) !important;
}

/*Margin - Y Axis*/
:is([class^="my-"], [class*=" my-"]) {
	--my-mult: 0;
	--my-result: calc(var(--base-y) * var(--my-mult));

	&.my-a { --my-result: auto; }
	&.my-0 { --my-result: 0; }
	&.my-1 { --my-mult: 1; }
	&.my-2 { --my-mult: 2; }
	&.my-3 { --my-mult: 3; }
	&.my-4 { --my-mult: 4; }
	&.my-5 { --my-mult: 5; }
	&.my-6 { --my-mult: 6; }

	margin-top: var(--my-result) !important;
	margin-bottom: var(--my-result) !important;
}

/*Margin - Top*/
:is([class^="mt-"], [class*=" mt-"]) {
	--mt-mult: 0;
	--mt-result: calc(var(--base-y) * var(--mt-mult));

	&.mt-a { --mt-result: auto; }
	&.mt-0 { --mt-result: 0; }
	&.mt-1 { --mt-mult: 1; }
	&.mt-2 { --mt-mult: 2; }
	&.mt-3 { --mt-mult: 3; }
	&.mt-4 { --mt-mult: 4; }
	&.mt-5 { --mt-mult: 5; }
	&.mt-6 { --mt-mult: 6; }

	margin-top: var(--mt-result) !important;
}

/*Margin - Bottom*/
:is([class^="mb-"], [class*=" mb-"]) {
	--mb-mult: 0;
	--mb-result: calc(var(--base-y, 1) * var(--mb-mult));

	&.mb-a { --mb-result: auto; }
	&.mb-0 { --mb-result: 0; }
	&.mb-1 { --mb-mult: 1; }
	&.mb-2 { --mb-mult: 2; }
	&.mb-3 { --mb-mult: 3; }
	&.mb-4 { --mb-mult: 4; }
	&.mb-5 { --mb-mult: 5; }
	&.mb-6 { --mb-mult: 6; }

	margin-bottom: var(--mb-result) !important;
}

/*Margin - X Axis*/
:is([class^="mx-"], [class*=" mx-"]) {
	--mx-mult: 0;
	--mx-result: calc(var(--base-x) * var(--mx-mult));

	&.mx-a { --mx-result: auto; }
	&.mx-0 { --mx-result: 0; }
	&.mx-1 { --mx-mult: 1; }
	&.mx-2 { --mx-mult: 2; }
	&.mx-3 { --mx-mult: 3; }
	&.mx-4 { --mx-mult: 4; }
	&.mx-5 { --mx-mult: 5; }
	&.mx-6 { --mx-mult: 6; }

	margin-left: var(--mx-result) !important;
	margin-right: var(--mx-result) !important;
}

/*Margin - Left*/
:is([class^="ml-"], [class*=" ml-"]) {
	--ml-mult: 0;
	--ml-result: calc(var(--base-x, 1) * var(--ml-mult));

	&.ml-a { --ml-result: auto; }
	&.ml-0 { --ml-result: 0; }
	&.ml-1 { --ml-mult: 1; }
	&.ml-2 { --ml-mult: 2; }
	&.ml-3 { --ml-mult: 3; }
	&.ml-4 { --ml-mult: 4; }
	&.ml-5 { --ml-mult: 5; }
	&.ml-6 { --ml-mult: 6; }

	margin-left: var(--ml-result) !important;
}

/*Margin - Right*/
:is([class^="mr-"], [class*=" mr-"]) {
	--mr-mult: 0;
	--mr-result: calc(var(--base-x) * var(--mr-mult));

	&.mr-a { --mr-result: auto; }
	&.mr-0 { --mr-result: 0; }
	&.mr-1 { --mr-mult: 1; }
	&.mr-2 { --mr-mult: 2; }
	&.mr-3 { --mr-mult: 3; }
	&.mr-4 { --mr-mult: 4; }
	&.mr-5 { --mr-mult: 5; }
	&.mr-6 { --mr-mult: 6; }

	margin-right: var(--mr-result) !important;
}

/*Padding*/
/*Padding - All*/
:is([class^="pa-"], class*=" pa-"]) {
	--pa-mult: 0;
	--pa-y-result: calc(var(--base-y) * var(--pa-mult));
	--pa-x-result: calc(var(--base-x) * var(--pa-mult));

	&.pa-a {
		--pa-y-result: auto;
		--pa-x-result: auto;
	}
	&.pa-0 {
		--pa-y-result: 0;
		--pa-x-result: 0;
	}
	&.pa-1 { --pa-mult: 1; }
	&.pa-2 { --pa-mult: 2; }
	&.pa-3 { --pa-mult: 3; }
	&.pa-4 { --pa-mult: 4; }
	&.pa-5 { --pa-mult: 5; }
	&.pa-6 { --pa-mult: 6; }

	padding: var(--pa-y-result) var(--pa-x-result) !important;
}

/*Padding - Y Axis*/
:is([class^="py-"], [class*=" py-"]) {
	--py-mult: 0;
	--py-result: calc(var(--base-y) * var(--py-mult));

	&.py-a { --py-result: auto; }
	&.py-0 { --py-result: 0; }
	&.py-1 { --py-mult: 1; }
	&.py-2 { --py-mult: 2; }
	&.py-3 { --py-mult: 3; }
	&.py-4 { --py-mult: 4; }
	&.py-5 { --py-mult: 5; }
	&.py-6 { --py-mult: 6; }

	padding-top: var(--py-result) !important;
	padding-bottom: var(--py-result) !important;
}

/*Padding - Top*/
:is([class^="pt-"], [class*=" pt-"]) {
	--pt-mult: 0;
	--pt-result: calc(var(--base-y) * var(--pt-mult));

	&.pt-a { --pt-result: auto; }
	&.pt-0 { --pt-result: 0; }
	&.pt-1 { --pt-mult: 1; }
	&.pt-2 { --pt-mult: 2; }
	&.pt-3 { --pt-mult: 3; }
	&.pt-4 { --pt-mult: 4; }
	&.pt-5 { --pt-mult: 5; }
	&.pt-6 { --pt-mult: 6; }

	padding-top: var(--pt-result) !important;
}

/*Padding - Bottom*/
:is([class^="pb-"], [class*=" pb-"]) {
	--pb-mult: 0;
	--pb-result: calc(var(--base-y, 1) * var(--pb-mult));

	&.pb-a { --pb-result: auto; }
	&.pb-0 { --pb-result: 0; }
	&.pb-1 { --pb-mult: 1; }
	&.pb-2 { --pb-mult: 2; }
	&.pb-3 { --pb-mult: 3; }
	&.pb-4 { --pb-mult: 4; }
	&.pb-5 { --pb-mult: 5; }
	&.pb-6 { --pb-mult: 6; }

	padding-bottom: var(--pb-result) !important;
}

/*Padding - X Axis*/
:is([class^="px-"], [class*=" px-"]) {
	--px-mult: 0;
	--px-result: calc(var(--base-x) * var(--px-mult));

	&.px-a { --px-result: auto; }
	&.px-0 { --px-result: 0; }
	&.px-1 { --px-mult: 1; }
	&.px-2 { --px-mult: 2; }
	&.px-3 { --px-mult: 3; }
	&.px-4 { --px-mult: 4; }
	&.px-5 { --px-mult: 5; }
	&.px-6 { --px-mult: 6; }

	padding-left: var(--px-result) !important;
	padding-right: var(--px-result) !important;
}

/*Padding - Left*/
:is([class^="pl-"], [class*=" pl-"]) {
	--pl-mult: 0;
	--pl-result: calc(var(--base-x, 1) * var(--pl-mult));

	&.pl-a { --pl-result: auto; }
	&.pl-0 { --pl-result: 0; }
	&.pl-1 { --pl-mult: 1; }
	&.pl-2 { --pl-mult: 2; }
	&.pl-3 { --pl-mult: 3; }
	&.pl-4 { --pl-mult: 4; }
	&.pl-5 { --pl-mult: 5; }
	&.pl-6 { --pl-mult: 6; }

	padding-left: var(--pl-result) !important;
}

/*Padding - Right*/
:is([class^="pr-"], [class*=" pr-"]) {
	--pr-mult: 0;
	--pr-result: calc(var(--base-x) * var(--pr-mult));

	&.pr-a { --pr-result: auto; }
	&.pr-0 { --pr-result: 0; }
	&.pr-1 { --pr-mult: 1; }
	&.pr-2 { --pr-mult: 2; }
	&.pr-3 { --pr-mult: 3; }
	&.pr-4 { --pr-mult: 4; }
	&.pr-5 { --pr-mult: 5; }
	&.pr-6 { --pr-mult: 6; }

	padding-right: var(--mr-result) !important;
}

.w-100 { width: 100%; }
.h-100 { height: 100%; }