:root {

    /* =========================================================
       Layout Foundation
       ========================================================= */
    --gutter-width: 5vw;

    @media (min-width: calc( 1200px + 2.5vw)) {
        --gutter-width: 0;
    }

    --space-unit: 1rem;
    --max-width-text: 45em;
    --max-width-wide: 1200px;
    --max-width-article: 790px;
    --offscreen: -9999em;

    /* Semantic spacing scale */
    --space-xxxsmall: var(--wp--preset--spacing--xxxsmall, calc( 0.125 * var(--space-unit, 1em) )); /* 0.125rem / 2px */
    --space-xxsmall: var(--wp--preset--spacing--xxsmall, calc( 0.25 * var(--space-unit, 1em) ));  /* 0.25rem / 4px */
    --space-xsmall: var(--wp--preset--spacing--xsmall, calc( 0.5 * var(--space-unit, 1em) ));    /* 0.5rem / 8px */
    --space-small: var(--wp--preset--spacing--small, calc( 0.75 * var(--space-unit, 1em) ));    /* 0.75rem / 12px */
    --space-normal: var(--wp--preset--spacing--normal, var(--space-unit, 1em));                   /* 1rem / 16px */
    --space-medium: var(--wp--preset--spacing--medium, calc( 1.25 * var(--space-unit, 1em) ));   /* 1.25rem / 20px */
    --space-large: var(--wp--preset--spacing--large, calc( 1.5 * var(--space-unit, 1em) ));     /* 1.5rem / 24px */
    --space-xlarge: var(--wp--preset--spacing--xlarge, calc( 2.5 * var(--space-unit, 1em) ));    /* 2.5rem / 40px */
    --space-xxlarge: var(--wp--preset--spacing--xxlarge, calc( 4 * var(--space-unit, 1em) ));     /* 4rem / 64px */

    /* Shared radius */
    --border-radius: 3px;
    --border-radius-image: 10px;
    
     /* =========================================================
         Semantic Color Layer
         ========================================================= */

    /* Color scale aliases */
    --color-primary: var(--color-primary-500);
    --color-secondary: var(--color-secondary-500);
    --color-information: var(--color-information-500);
    --color-success: var(--color-success-500);
    --color-warning: var(--color-warning-500);
    --color-error: var(--color-error-500);
    --color-neutral: var(--color-neutral-200);

     /* Surface, text, and brand aliases */
    --color-white: var(--white, #fff);
    --color-black: var(--black, #303133);
    --color-surface: var(--color-white);
    --color-text: var(--color-black);
    --color-surface-subtle: var(--color-neutral-50, #f2f3f4);
    --color-surface-overlay: var(--color-white-alpha-800, rgba(255 255 255 / 0.85));
    --color-text-inverse: var(--color-white);
    --gray-xlight: var(--color-neutral-100, #f8f8f8);
    --gray: var(--color-neutral-200, #bfc1c3);
    --gray-light: var(--color-neutral-300, #dadada);
    --red: var(--color-primary-500, #c81e11);
    --red-dark: var(--color-primary-800, #6d1b25);
    --color-border-soft: var(--color-neutral-200, #bfc1c3);
    --color-border-muted: var(--color-neutral-300, #dadada);
    --color-overlay-soft: rgba(0, 0, 0, 0.1);
    --color-overlay-medium: rgba(0, 0, 0, 0.5);
    --color-info: var(--color-information-600, #0046ea);
    --color-info-surface: var(--color-information-50, #e9f0ff);
    --color-brand-facebook: var(--brand-color-facebook, #2d448b);
    --color-brand-twitter: var(--brand-color-twitter, #21a7f3);
    --color-brand-linkedin: var(--brand-color-linkedin, #1364a8);
    --color-brand-pinterest: var(--brand-color-pinterest, #e60023);

    /* Feature-level semantic aliases */
    --color-consent-text: var(--color-neutral-800, #333435);
    --color-consent-border: var(--color-consent-text);
    --color-consent-surface: var(--color-warning-100, #f6dcba);
    --color-form-surface: var(--color-surface);
    --color-form-error: var(--color-error);
    --color-form-success: var(--color-success);

     /* Shadows and motion */
    --box-shadow: var(--shadow-light-200, 0 2px 4px 0 rgba(0,0,0,0.08));
    --shadow-popover: 0 3px 3px rgba(0, 0, 0, 0.2);
    --shadow-accessibility-focus: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    --shadow-selection-soft: 0 0 0 0.25em var(--color-overlay-soft);
    --transition-base: 0.2s ease;

    /* Focus-visible standard (§14) — shared by buttons, links, and controls.
       currentcolor meets text contrast (>3:1) against the element's surface. */
    --ftps-focus-color: currentcolor;
    --ftps-focus-width: 2px;
    --ftps-focus-style: solid;
    --ftps-focus-offset: 2px;

    /* Disabled state (§14) — shared de-emphasis for inert controls. */
    --ftps-disabled-opacity: 0.5;

    /* Minimum interactive target (§19b, WCAG 2.5.5). */
    --ftps-target-min: 44px;

     /* Consent feature tokens */
    --space-consent-section: var(--space-medium);
    --space-consent-banner-padding-bottom: var(--space-large);
    --size-consent-checkbox: 25px;

    /* Colors Used by Plugins */
    --wp--preset--color--background: var(--color-text);
    --wp--preset--color--black: var(--color-black);
    --wp--preset--color--white: var(--color-white);

    /* Font Sizes Used by Blocks (WooCommerce, core) — mapped to theme scale */
    --wp--preset--font-size--small: var(--body-small-size);    /* 1rem */
    --wp--preset--font-size--normal: var(--body-small-size);    /* 1rem */
    --wp--preset--font-size--medium: var(--body-large-size);    /* 1rem → 1.25rem */
    --wp--preset--font-size--large: var(--heading-small-size);  /* 1.313rem → 1.813rem */
    --wp--preset--font-size--x-large: var(--heading-medium-size); /* 1.5rem → 2.063rem */
    --wp--preset--font-size--huge: var(--heading-large-size);   /* 1.625rem → 2.688rem */


    /* =========================================================
       Typography One-Liner Tokens
       Usage: font: var(--body-large);
       ========================================================= */
    --body-large: var(--body-large-weight) var(--body-large-size)/var(--body-large-line-height) var(--body-large-font);
    --body-small: var(--body-small-weight) var(--body-small-size)/var(--body-small-line-height) var(--body-small-font);
    --display-large: var(--display-large-weight) var(--display-large-size)/var(--display-large-line-height) var(--display-large-font);
    --heading-large: var(--heading-large-weight) var(--heading-large-size)/var(--heading-large-line-height) var(--heading-large-font);
    --heading-medium: var(--heading-medium-weight) var(--heading-medium-size)/var(--heading-medium-line-height) var(--heading-medium-font);
    --heading-small: var(--heading-small-weight) var(--heading-small-size)/var(--heading-small-line-height) var(--heading-small-font);
    --heading-x-small: var(--heading-x-small-weight) var(--heading-x-small-size)/var(--heading-x-small-line-height) var(--heading-x-small-font);
    --label-large: var(--label-large-weight) var(--label-large-size)/var(--label-large-line-height) var(--label-large-font);
    --label-medium: var(--label-medium-weight) var(--label-medium-size)/var(--label-medium-line-height) var(--label-medium-font);
    --label-small: var(--label-small-weight) var(--label-small-size)/var(--label-small-line-height) var(--label-small-font);
    --label-x-large: var(--label-x-large-weight) var(--label-x-large-size)/var(--label-x-large-line-height) var(--label-x-large-font);
    --title-large: var(--title-large-weight) var(--title-large-size)/var(--title-large-line-height) var(--title-large-font);
    --title-small: var(--title-small-weight) var(--title-small-size)/var(--title-small-line-height) var(--title-small-font);

     /* =========================================================
         Icon Tokens
         ========================================================= */
    --icon-font-family: icon;
    --icon-font-style: normal;
    --icon-font-weight: 400;
    --icon-font-variant: normal;
    --icon-font-size: 1.125rem;
    --icon-line-height: 1;
    --icon-text-transform: none;
    --icon-webkit-font-smoothing: antialiased;
    --icon-moz-osx-font-smoothing: grayscale;

    /* One-liner: font: var(--icon-font); */
    --icon-font: var(--icon-font-style) var(--icon-font-variant) var(--icon-font-weight) var(--icon-font-size)/var(--icon-line-height) var(--icon-font-family);

    --star-font-family: star !important;
    --star-font-style: normal;
	--star-font-weight: 400;
	--star-font-variant: normal;
	--star-text-transform: none;
	--star-line-height: 1.618em;

	/* One-liner: font: var(--star-icon-font); */
    --star-icon-font: var(--star-font-style) var(--star-font-variant) var(--star-font-weight) var(--icon-font-size)/var(--star-line-height) var(--star-font-family);

    /* stylelint-disable-next-line value-keyword-case */
    --wc-icon-font-family: WooCommerce !important;
	--wc-icon-font-style: normal;
	--wc-icon-font-weight: 400;
	--wc-icon-font-variant: normal;
	--wc-icon-text-transform: none;
	--wc-icon-line-height: 1;
    
	 /* One-liner: font: var(--wc-icon-font); */
    --wc-icon-font: var(--wc-icon-font-style) var(--wc-icon-font-variant) var(--wc-icon-font-weight) var(--icon-font-size)/var(--wc-icon-line-height) var(--wc-icon-font-family);

    /* Canonical ftm glyph catalog (source: assets/fonts/ftm.svg) */
    --icon-ftm-first-tracks: "\e900";
    --icon-ftm-support: "\e904";
    --icon-ftm-search: "\f002";
    --icon-ftm-email: "\f003";
    --icon-ftm-heart: "\f004";
    --icon-ftm-user: "\f007";
    --icon-ftm-check: "\f00c";
    --icon-ftm-close: "\f00d";
    --icon-ftm-search-plus: "\f00e";
    --icon-ftm-play-circle-o: "\f01d";
    --icon-ftm-shopping-cart: "\f07a";
    --icon-ftm-phone: "\f095";
    --icon-ftm-twitter: "\f099";
    --icon-ftm-facebook: "\f09a";
    --icon-ftm-facebook-f: "\f09a";
    --icon-ftm-credit-card: "\f09d";
    --icon-ftm-linkedin: "\f0e1";
    --icon-ftm-angle-left: "\f104";
    --icon-ftm-angle-right: "\f105";
    --icon-ftm-angle-up: "\f106";
    --icon-ftm-angle-down: "\f107";
    --icon-ftm-mobile: "\f10b";
    --icon-ftm-mobile-phone: "\f10b";
    --icon-ftm-calendar: "\f133";
    --icon-ftm-dollar: "\f155";
    --icon-ftm-youtube: "\f167";
    --icon-ftm-instagram: "\f16d";
    --icon-ftm-pinterest: "\f231";
    --icon-ftm-shopping-basket: "\f291";

    /* Canonical WooCommerce icon glyph tokens */
    --icon-wc-spinner: "\e031";
    --icon-wc-checkmark: "\e017";
    --icon-wc-notice-success: "\e015";

    /* =========================================================
       Z-Layer Tokens
       ========================================================= */
    --z-layer-header-mobile-menu: 10;
	--z-layer-header-controls: 12;
	--z-layer-consent-banner: 230;
	--z-layer-minicart-drawer: 300;
	--z-layer-popup: 360;
	--z-layer-site-notice-modal: 370;
	--z-layer-doofinder: 420;
}

html {
	box-sizing: border-box;
	scrollbar-gutter: stable;
	font-size: var(--typography-root-size, 16px);
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	overflow: auto;
	min-width: 320px;
	color: var(--color-text, inherit);
	font: var(--body-small);
}

h1,h2,h3,h4,h5,h6 {
	margin: var(--space-normal) 0;
	font-weight: var(--typeface-weight-bold);
}


h1 {
	font: var(--display-large);

}

h2 {
	font: var(--display-large);

}

h3 {
	font: var(--heading-medium);

}

h4 {
	font: var(--heading-small);
}

hr {
	background-color: var(--color-border-soft);
	border: 0;
	height: 1px;
}

ul, ol {
	margin: var(--space-normal) 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dl {
	margin: var(--space-normal) 0;	
}

dl dl {
	margin: 0;	
}

dt {
	font-weight: var(--typeface-weight-bold);
}

dd {
	margin: 0 0 0 1em;
}

img {
	max-width: 100%;
	height: auto;
}

figure {
	margin: var(--space-large) 0;
}

figcaption {
	font-size: 0.875em;
}

table {
	margin: var(--space-normal) 0;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: var(--color-primary);
	text-decoration: none;
}

/* Focus-visible standard (§14): one keyboard-focus ring for every interactive
   element (replaces the link-only `:focus` dotted outline). Shows on keyboard
   focus only, so pointer interaction is unaffected. */
:where(a, button, input, select, textarea, summary, [tabindex], [role='button'], [role='link']):focus-visible {
	outline: var(--ftps-focus-width) var(--ftps-focus-style) var(--ftps-focus-color);
	outline-offset: var(--ftps-focus-offset);
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Temp? Based on my-account mockup */
label {
	font-weight: var(--typeface-weight-bold);
}

/* All images in articles get rounded corners and a border */
img[class^="attachment-"] {
	border: 1px solid var(--gray-light);
	border-radius: var(--border-radius-image);
}

/* Blockqoutes in regular content */
blockquote {
	font: var(--title-large);
	margin: var(--space-large) 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
	max-width: 50%;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
	max-width: 50%;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.page-links {
	clear: both;
}

.sticky {
	display: block;
}

dl.inline dt,
dl.inline dd {
	display: inline;
	margin: 0;	
}

dl.inline dd::after {
	content: '\A';
	white-space: pre;	
}


dl.spread dt {
	float: left;
	clear: both;	
}

dl.spread dd {
	float: right;	
}

dl.spread::after {
	content: '';
	display: table;
	clear: both;	
}

.strong,
.bold {
	font-weight: var(--typeface-weight-bold);	
}

.bigger {
	font-size: 1.25em;	
}

.ajax-updating {
	opacity: 0.5;	
}

/* Not inside galleries */
.gallery figure {
	margin: 0;
	box-sizing: border-box; /* For inside swiper galleries */	
}

.disabled, [disabled] {
	opacity: 0.5;	
}

.edit-link {
	float: right;
	margin: 0;	
}

/*--------------------------------------------------------------
# Print Styles
--------------------------------------------------------------*/

@media print {

    *,
    *::before,
    *::after {
        background: transparent !important;
		color: var(--color-black) !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
		border: 1px solid var(--color-border-muted);
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

/*
 * Hide visually and from screen readers
 */
.hidden {
	display: none !important;
}

/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
	visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line
 */
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px !important;
	overflow: hidden;
	padding: 0 !important;
	position: absolute;
	width: 1px;
	white-space: nowrap; /* 1 */
	left: var(--offscreen);
}

/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0 !important;
	overflow: visible;
	position: static;
	width: auto;
	white-space: inherit;
}

.screen-reader-text {
	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; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: var(--color-surface-subtle);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-accessibility-focus);
	clip: auto !important;
	clip-path: none;
	color: var(--color-info);
	display: block;
	font: var(--label-medium);
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*
* Clearfix: contain floats
*
* Comments Removed - it breaks the preg_replace() somehow :(
*
*/
.clearfix::before,
.clearfix::after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix::after {
 	clear: both;
}