/*
Theme Name: Roman Roads Press
Theme URI: https://example.com
Author: Michael Helvey
Author URI: https://michaelhelvey.dev
Description: Roman Roads Press Custom Theme
Version: 1.0
Requires at least: 5.7
Requires PHP: 7.0
*/

/*
 * This file is a table of contents for all the styles on the site, except for
 * custom block styles, which are included with each block.
 */

/* global utilities */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

/**
Use a more readable tab size (opinionated).
*/

html {
	-moz-tab-size: 4;
	-o-tab-size: 4;
	   tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
	font-family:
		system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
	-webkit-text-decoration: underline dotted;
	        text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
	text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
	box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}

/* globals that apply to both editor and frontend css */

/* normal font-faces */

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-Light.ttf");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-Regular.ttf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-SemiBold.ttf");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-Bold.ttf");
	font-weight: 700;
	font-style: normal;
}

/* italic font-faces */

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-LightItalic.ttf");
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-Italic.ttf");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("/wp-content/themes/roman-roads-press/fonts/NunitoSans-BoldItalic.ttf");
	font-weight: 700;
	font-style: italic;
}

/* serif face */

@font-face {
	font-family: "Merriweather";
	src: url("/wp-content/themes/roman-roads-press/fonts/Merriweather-Regular.ttf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Merriweather";
	src: url("/wp-content/themes/roman-roads-press/fonts/Merriweather-Italic.ttf");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Merriweather";
	src: url("/wp-content/themes/roman-roads-press/fonts/Merriweather-Bold.ttf");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Merriweather";
	src: url("/wp-content/themes/roman-roads-press/fonts/Merriweather-BoldItalic.ttf");
	font-weight: 700;
	font-style: italic;
}

/*
- lg (e.g. ipad pro) is our default breakpoint between "desktop view" and "mobile view"
- reference:
	sm: 640px
	md: 768px
	lg: 1024px
	xl: 1280px
*/

/* see our plugin in postcss.config.js for the code that inserts colors */

.has-primary-darkest-background-color {
	background-color: #003E6B;
}

.has-primary-darkest-color {
	color: #003E6B;
}

.has-primary-900-background-color {
	background-color: #003E6B;
}

.has-primary-900-color {
	color: #003E6B;
}

.has-primary-800-background-color {
	background-color: #0A558C;
}

.has-primary-800-color {
	color: #0A558C;
}

.has-primary-main-background-color {
	background-color: #0F609B;
}

.has-primary-main-color {
	color: #0F609B;
}

.has-primary-700-background-color {
	background-color: #186FAF;
}

.has-primary-700-color {
	color: #186FAF;
}

.has-primary-600-background-color {
	background-color: #2680C2;
}

.has-primary-600-color {
	color: #2680C2;
}

.has-primary-500-background-color {
	background-color: #4098D7;
}

.has-primary-500-color {
	color: #4098D7;
}

.has-primary-400-background-color {
	background-color: #62B0E8;
}

.has-primary-400-color {
	color: #62B0E8;
}

.has-primary-300-background-color {
	background-color: #84C5F4;
}

.has-primary-300-color {
	color: #84C5F4;
}

.has-primary-200-background-color {
	background-color: #B6E0FE;
}

.has-primary-200-color {
	color: #B6E0FE;
}

.has-primary-100-background-color {
	background-color: #DCEEFB;
}

.has-primary-100-color {
	color: #DCEEFB;
}

.has-accent-darkest-background-color {
	background-color: #513C06;
}

.has-accent-darkest-color {
	color: #513C06;
}

.has-accent-900-background-color {
	background-color: #7C5E10;
}

.has-accent-900-color {
	color: #7C5E10;
}

.has-accent-800-background-color {
	background-color: #A27C1A;
}

.has-accent-800-color {
	color: #A27C1A;
}

.has-accent-700-background-color {
	background-color: #C99A2E;
}

.has-accent-700-color {
	color: #C99A2E;
}

.has-accent-600-background-color {
	background-color: #E9B949;
}

.has-accent-600-color {
	color: #E9B949;
}

.has-accent-500-background-color {
	background-color: #F7D070;
}

.has-accent-500-color {
	color: #F7D070;
}

.has-accent-main-background-color {
	background-color: #F7D070;
}

.has-accent-main-color {
	color: #F7D070;
}

.has-accent-400-background-color {
	background-color: #F9DA8B;
}

.has-accent-400-color {
	color: #F9DA8B;
}

.has-accent-300-background-color {
	background-color: #F8E3A3;
}

.has-accent-300-color {
	color: #F8E3A3;
}

.has-accent-200-background-color {
	background-color: #FCEFC7;
}

.has-accent-200-color {
	color: #FCEFC7;
}

.has-accent-100-background-color {
	background-color: #FFFAEB;
}

.has-accent-100-color {
	color: #FFFAEB;
}

.has-gray-darkest-background-color {
	background-color: #1F2933;
}

.has-gray-darkest-color {
	color: #1F2933;
}

.has-gray-900-background-color {
	background-color: #323F4B;
}

.has-gray-900-color {
	color: #323F4B;
}

.has-gray-800-background-color {
	background-color: #3E4C59;
}

.has-gray-800-color {
	color: #3E4C59;
}

.has-gray-700-background-color {
	background-color: #52606D;
}

.has-gray-700-color {
	color: #52606D;
}

.has-gray-600-background-color {
	background-color: #616E7C;
}

.has-gray-600-color {
	color: #616E7C;
}

.has-gray-500-background-color {
	background-color: #7B8794;
}

.has-gray-500-color {
	color: #7B8794;
}

.has-gray-400-background-color {
	background-color: #9AA5B1;
}

.has-gray-400-color {
	color: #9AA5B1;
}

.has-gray-300-background-color {
	background-color: #CBD2D9;
}

.has-gray-300-color {
	color: #CBD2D9;
}

.has-gray-200-background-color {
	background-color: #E4E7EB;
}

.has-gray-200-color {
	color: #E4E7EB;
}

.has-gray-100-background-color {
	background-color: #F5F7FA;
}

.has-gray-100-color {
	color: #F5F7FA;
}

.has-green-darkest-background-color {
	background-color: #004440;
}

.has-green-darkest-color {
	color: #004440;
}

.has-green-900-background-color {
	background-color: #016457;
}

.has-green-900-color {
	color: #016457;
}

.has-green-800-background-color {
	background-color: #048271;
}

.has-green-800-color {
	color: #048271;
}

.has-green-700-background-color {
	background-color: #079A82;
}

.has-green-700-color {
	color: #079A82;
}

.has-green-600-background-color {
	background-color: #17B897;
}

.has-green-600-color {
	color: #17B897;
}

.has-green-500-background-color {
	background-color: #2DCCA7;
}

.has-green-500-color {
	color: #2DCCA7;
}

.has-green-400-background-color {
	background-color: #5FE3C0;
}

.has-green-400-color {
	color: #5FE3C0;
}

.has-green-300-background-color {
	background-color: #8EEDD1;
}

.has-green-300-color {
	color: #8EEDD1;
}

.has-green-200-background-color {
	background-color: #C6F7E9;
}

.has-green-200-color {
	color: #C6F7E9;
}

.has-green-100-background-color {
	background-color: #F0FCF9;
}

.has-green-100-color {
	color: #F0FCF9;
}

.has-red-darkest-background-color {
	background-color: #610404;
}

.has-red-darkest-color {
	color: #610404;
}

.has-red-900-background-color {
	background-color: #780A0A;
}

.has-red-900-color {
	color: #780A0A;
}

.has-red-800-background-color {
	background-color: #911111;
}

.has-red-800-color {
	color: #911111;
}

.has-red-700-background-color {
	background-color: #A61B1B;
}

.has-red-700-color {
	color: #A61B1B;
}

.has-red-600-background-color {
	background-color: #BA2525;
}

.has-red-600-color {
	color: #BA2525;
}

.has-red-500-background-color {
	background-color: #D64545;
}

.has-red-500-color {
	color: #D64545;
}

.has-red-400-background-color {
	background-color: #E66A6A;
}

.has-red-400-color {
	color: #E66A6A;
}

.has-red-300-background-color {
	background-color: #F29B9B;
}

.has-red-300-color {
	color: #F29B9B;
}

.has-red-200-background-color {
	background-color: #FACDCD;
}

.has-red-200-color {
	color: #FACDCD;
}

.has-red-100-background-color {
	background-color: #FFEEEE;
}

.has-red-100-color {
	color: #FFEEEE;
}

.has-owc-greeks-yellow-background-color {
	background-color: #a39343;
}

.has-owc-greeks-yellow-color {
	color: #a39343;
}

.has-owc-romans-red-background-color {
	background-color: #b11928;
}

.has-owc-romans-red-color {
	color: #b11928;
}

.has-owc-christendom-blue-background-color {
	background-color: #056B84;
}

.has-owc-christendom-blue-color {
	color: #056B84;
}

.has-owc-moderns-green-background-color {
	background-color: #3d6b2a;
}

.has-owc-moderns-green-color {
	color: #3d6b2a;
}

:root {
	--full-width: 100%;
	--wide-column-width: 1080px;
	--default-column-width: 768px;
	--font-sans: "Nunito Sans", sans-serif;
	--font-serif: "Merriweather", sans-serif;


	--width-sm: 640px;
	--width-md: 768px;
	--width-lg: 1024px;
	--width-xl: 1280px;

	/* see our plugin in postcss.config.js for the code that inserts colors */
	--primary-darkest: #003E6B;
	--primary-900: #003E6B;
	--primary-800: #0A558C;
	--primary-main: #0F609B;
	--primary-700: #186FAF;
	--primary-600: #2680C2;
	--primary-500: #4098D7;
	--primary-400: #62B0E8;
	--primary-300: #84C5F4;
	--primary-200: #B6E0FE;
	--primary-100: #DCEEFB;
	--accent-darkest: #513C06;
	--accent-900: #7C5E10;
	--accent-800: #A27C1A;
	--accent-700: #C99A2E;
	--accent-600: #E9B949;
	--accent-500: #F7D070;
	--accent-main: #F7D070;
	--accent-400: #F9DA8B;
	--accent-300: #F8E3A3;
	--accent-200: #FCEFC7;
	--accent-100: #FFFAEB;
	--gray-darkest: #1F2933;
	--gray-900: #323F4B;
	--gray-800: #3E4C59;
	--gray-700: #52606D;
	--gray-600: #616E7C;
	--gray-500: #7B8794;
	--gray-400: #9AA5B1;
	--gray-300: #CBD2D9;
	--gray-200: #E4E7EB;
	--gray-100: #F5F7FA;
	--green-darkest: #004440;
	--green-900: #016457;
	--green-800: #048271;
	--green-700: #079A82;
	--green-600: #17B897;
	--green-500: #2DCCA7;
	--green-400: #5FE3C0;
	--green-300: #8EEDD1;
	--green-200: #C6F7E9;
	--green-100: #F0FCF9;
	--red-darkest: #610404;
	--red-900: #780A0A;
	--red-800: #911111;
	--red-700: #A61B1B;
	--red-600: #BA2525;
	--red-500: #D64545;
	--red-400: #E66A6A;
	--red-300: #F29B9B;
	--red-200: #FACDCD;
	--red-100: #FFEEEE;
	--owc-greeks-yellow: #a39343;
	--owc-romans-red: #b11928;
	--owc-christendom-blue: #056B84;
	--owc-moderns-green: #3d6b2a;

	/* text sizes */

	--text-xs: 0.75rem;
	--line-height-text-xs: 1rem;

	--text-sm: 0.875rem;
	--line-height-text-sm: 1.25rem;

	--text-base: 1rem;
	--line-height-text-base: 1.7rem;

	--text-lg: 1.125rem;
	--line-height-text-lg: 1.75rem;

	--text-xl: 1.25rem;
	--line-height-text-xl: 1.75rem;

	--text-2xl: 1.5rem;
	--line-height-text-2xl: 2rem;

	--text-3xl: 1.875rem;
	--line-height-text-3xl: 2.25rem;

	--text-4xl: 2.25rem;
	--line-height-text-4xl: 2.5rem;

	--text-5xl: 3rem;
	--line-height-text-5xl: 1;

	/* letter spacing */
	--tracking-tighter: -0.05em;
	--tracking-tight: -0.025em;
	--tracking-normal: 0em;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;
}

/* classes to support above text sizes via WP editor */

.has-xs-font-size {
	font-size: 0.75rem;
	font-size: var(--text-xs);
	line-height: 1rem;
	line-height: var(--line-height-text-xs);
}

.has-sm-font-size {
	font-size: 0.875rem;
	font-size: var(--text-sm);
	line-height: 1.25rem;
	line-height: var(--line-height-text-sm);
}

.has-base-font-size {
	font-size: 1rem;
	font-size: var(--text-base);
	line-height: 1.7rem;
	line-height: var(--line-height-text-base);
}

.has-lg-font-size {
	font-size: 1.125rem;
	font-size: var(--text-lg);
	line-height: 1.75rem;
	line-height: var(--line-height-text-lg);
}

.has-xl-font-size {
	font-size: 1.25rem;
	font-size: var(--text-xl);
	line-height: 1.75rem;
	line-height: var(--line-height-text-xl);
}

.has-2-xl-font-size {
	font-size: 1.5rem;
	font-size: var(--text-2xl);
	line-height: 2rem;
	line-height: var(--line-height-text-2xl);
}

.has-3-xl-font-size {
	font-size: 1.875rem;
	font-size: var(--text-3xl);
	line-height: 2.25rem;
	line-height: var(--line-height-text-3xl);
}

.has-4-xl-font-size {
	font-size: 2.25rem;
	font-size: var(--text-4xl);
	line-height: 2.5rem;
	line-height: var(--line-height-text-4xl);
}

.has-5-xl-font-size {
	font-size: 3rem;
	font-size: var(--text-5xl);
	line-height: 1;
	line-height: var(--line-height-text-5xl);
}

/* Utilties for Wordpress's "Additional CSS classes" where you need special spacing" */

.margin-top-0_5 {
	margin-top: 0.5rem;
}

.margin-top-1 {
	margin-top: 1rem;
}

.margin-top-1_5 {
	margin-top: 1.5rem;
}

.margin-top-2 {
	margin-top: 2rem;
}

.margin-top-2_5 {
	margin-top: 2.5rem;
}

.margin-top-3 {
	margin-top: 3rem;
}

.margin-bottom-0_5 {
	margin-bottom: 0.5rem;
}

.margin-bottom-1 {
	margin-bottom: 1rem;
}

.margin-bottom-1_5 {
	margin-bottom: 1.5rem;
}

.margin-bottom-2 {
	margin-bottom: 2rem;
}

.margin-bottom-2_5 {
	margin-bottom: 2.5rem;
}

.margin-bottom-3 {
	margin-bottom: 3rem;
}

html, body {
	font-family: "Nunito Sans", sans-serif;
	font-family: var(--font-sans);
	/* base font size */
	font-size: 16px;
	/* base line height */
	line-height: 1.7rem;
	line-height: var(--line-height-text-base);
}

/* Additional Global Utilties */

.hidden {
	/* I realize that !important is kind of bad, but this is the most efficient
	 * way to use the class as a toggle, imho */
	display: none !important;
}

[x-cloak] { display: none !important; }

/*
 * basic HTML component default styles.  Note that it's important that these
 * come first, so that they can be overriden (potentially) by more specific
 * rules following.
 */

main {
	background-color: white;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0.8rem 0;
	font-weight: 600;
	/* note that we are explicitly NOT adding a max-width, because that should
	 * be taken care of by paragraph width */
}

h1 {
	font-size: 2.25rem;
	font-size: var(--text-4xl);
	line-height: 2.5rem;
	line-height: var(--line-height-text-4xl);
}

h2 {
	font-size: 1.5rem;
	font-size: var(--text-2xl);
	line-height: 2rem;
	line-height: var(--line-height-text-2xl);
}

h4, h5, h6 {
	font-size: 1.25rem;
	font-size: var(--text-xl);
	line-height: 1.75rem;
	line-height: var(--line-height-text-xl);
}

h6 {
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

p {
	padding: 0.5rem 0;
	font-size: 1rem;
	font-size: var(--text-base);
	line-height: 1.7rem;
	line-height: var(--line-height-text-base);
}

b, strong {
	font-weight: 700;
}

a {
	text-decoration: none;
	color: var(--primary-800)
}

a:hover {
		text-decoration: underline;
	}

.page > ul, ol {
	padding: 0.5rem 0 0.5rem 2rem;
}

fieldset {
	outline: none;
	border: 1px solid var(--gray-200);
	padding: 1rem;
	border-radius: 5px;
}

/* footer */

/*
 * ****************************************************************************
 * Site Footer
 * ****************************************************************************
 */

.site-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--gray-darkest);
	justify-content: center;
	color: var(--gray-100);
	padding: 4rem 1rem 2rem 1rem
}

@media(max-width: 1024px) {

.site-footer {
		padding: 1rem 2rem 2rem 2rem
}
	}

.footer-menus-section {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1080px;
	max-width: var(--wide-column-width)
}

@media(max-width: 1024px) {

.footer-menus-section {
		flex-direction: column
}
	}

@media(max-width: 1024px) {

.footer-menus-column {
		margin-top: 2rem
}
	}

.menus-column-header {
	text-transform: uppercase;
	font-size: 1.125rem;
	font-size: var(--text-lg);
	color: var(--gray-400);
}

.menus-column-list {
	margin-top: 1.75rem;
	list-style: none;
}

.menus-column-list > li {
	margin: 0.8rem 0;
}

.menus-column-list > li > a {
	text-decoration: none;
	color: var(--gray-200);
	font-size: 1rem;
	font-size: var(--text-base);
}

.menus-column-list > li > a:hover {
	color: var(--gray-500);
}

.footer-copyright-container {
	width: 100%;
	max-width: 1080px;
	max-width: var(--wide-column-width);
	display: block;
	border: 1px solid var(--gray-300);
	border-bottom-width: 0;
	border-left-width: 0;
	border-right-width: 0;
	color: var(--gray-500);
	font-size: 0.75rem;
	font-size: var(--text-xs);
	padding-top: 2rem;
	margin-top: 2rem;
}

.footer-contact-list {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 2rem;
}

.footer-contact-list > li {
	cursor: pointer;
	height: 2.5rem;
	width: 2.5rem;
	margin-right: 1rem;
	margin-bottom: 0.5rem;
	padding: 0.75rem;
	border-radius: 100%;
	background-color: var(--gray-700);
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-contact-list > li > a  {
	color: var(--accent-100);
	/* hack to get things to center because for some reason
	adding display: flex adds a border to the bottom of the icon? */
	margin-top: 2px;
}

.footer-menu-mailing-section {
	margin-top: 3rem;
}

.footer-mailing-address {
	margin-top: 2rem;
	line-height: 1.8rem;
	color: var(--gray-200);
}

.contact-us {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--owc-greeks-yellow);
	padding: 1rem;
}

.contact-us > a {
	color: white;
	border-radius: 999px;
	border: 2px solid white;
	padding: 0.5rem 1.5rem;
	text-decoration: none;
	font-size: 0.875rem;
	font-size: var(--text-sm);
	font-weight: 500
}

.contact-us > a:hover {
		text-decoration: underline;
	}

/* header and mobile navigation menus */

/*
 * ****************************************************************************
 * Site Navigation
 * ****************************************************************************
 */

.header {
	background-color: white;
	border-bottom-width: 1px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-color: var(--gray-300);
	border-style: solid;
}

.site-navigation--desktop {
	display: flex;
	padding: 0.75rem 2rem 0.75rem 2rem;
	flex-direction: row;
	justify-content: space-between;
	width: 100%
}

@media(max-width: 1024px) {

.site-navigation--desktop {
		display: none
}
	}

@media(min-width: 1024px) {

.site-navigation--mobile {
		display: none
}
	}

.header-logo--desktop-link {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 1rem;
}

.header-logo {
	width: 2.75rem;
	height: 2.75rem;
}

.site-navigation-list--desktop {
	display: flex;
	flex-direction: row;
	flex: 1;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	padding: 0 1rem;
}

.site-navigation-list--desktop > li {
	margin-top: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-navigation-list--desktop > li > a {
	text-decoration: none;
	color: var(--gray-darkest);
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

.site-navigation-list--desktop > li > a:hover {
	text-decoration: none;
	color: var(--primary-main);
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

.site-navigation-account-button {
	margin-top: 3px;
	border: none;
	background:none;
	font-size: 0.875rem;
	font-size: var(--text-sm);
	position: relative;
}

/* dropdown menu */

.account-dropdown-menu--desktop {
	position: absolute;
	top: 10;
	right: 0;
	z-index: 999;
	padding: 1rem 0;

	border-radius: 5px;
	background: white;
	border: 1px solid var(--gray-200);
	width: 200px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.account-dropdown-menu--desktop > li {
	padding: 0.8rem 1rem;
	width: 100%;
	display: flex
}

.account-dropdown-menu--desktop > li:hover {
		background-color: var(--gray-200);
	}

.account-dropdown-menu--desktop > li a {
	text-decoration: none;
	color: var(--gray-darkest);
	font-weight: 500;
}

/* site-navigation mobile */

.site-navigation--mobile__container {
	display: flex;
	justify-content: space-between;
	padding: 1rem;
}

.site-navigation--mobile__hamburger {
	outline: none;
	background: none;
	border: none;
}

.site-navigation--mobile__links-container {
	padding: 0 1rem 1rem 1rem;
}

.site-navigation-list--mobile {
	padding-bottom: 1rem;
}

.account-dropdown-menu--mobile {
	padding-top: 1rem;
	border-top: 1px solid var(--gray-200);
}

.site-navigation--mobile__links-container a {
	text-decoration: none;
}

.site-navigation--mobile__links-container li {
	padding: 0.3rem 0;
	list-style: none;
}

/* Legacy JT Page header Support */

.jt_header_container {
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 400px;
}

.jt_opacity_background {
	position: absolute;
	opacity: 50%;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
}

.jt_content_container {
	position: absolute;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.jt-header_text_container {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 1.5rem 4rem 0;
	color: white;
}

.jt_header_mast {
	text-transform: uppercase;
	padding: 2rem 0;
	text-align: center;
	color: white;
	font-weight: 300;
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

.jt_header_title {
	padding: 2rem 0;
	text-align: center;
	color: white;
	font-weight: 700;
	font-size: 3rem;
	font-size: var(--text-5xl);
}

.jt_header_subtitle {
	padding: 2rem 0;
	text-align: center;
	color: white;
	font-weight: 300;
	font-size: 1rem;
	font-size: var(--text-base);
	text-transform: none;
	letter-spacing: 0.025em;
}

/* page layout & widths */

/*
 * ****************************************************************************
 * General Layout
 * ****************************************************************************
 */

* {
  margin: 0;
  padding: 0;
}

html, body {
	height: 100%;
	width: 100%;
}

body {
	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
}

.is-layout-flex {
	display: flex;
	flex-wrap: wrap;
}

.is-nowrap {
	flex-wrap: nowrap;
}

.is-vertical {
	flex-direction: column;
}

.is-horizontal {
	flex-direction: row;
}

.search-content > article {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--gray-200);
}

.search-content > .page {
	align-items: flex-start;
}

.page {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.page > :not(.alignfull):not(.alignwide):not(.wp-block-columns) {
	width: 100%;
	max-width: 768px;
	max-width: var(--default-column-width);
}

/*
 * Padding rules:
 *
 * no user-generated text, code, figure, or image should ever hit the edge of
 * the window
 *
 * alignfull, alignwide, and noalign should work correctly
 *
 * every other component is allowed to hit the edge on _any_ alignment (e.g.
 * any custom block, the footer, whatever)
 */

article > a,
article > p,
article > figure,
article > img,
article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6,
.default-horizontal-padding {
	padding-left: 1.5rem;
	padding-right: 1.5rem
}

article > .wp-block-buttons {
	padding-left: 1.5rem;
	padding-right: 1.5rem
}

.alignwide {
	width: 100%;
	max-width: 1080px;
	max-width: var(--wide-column-width);
}

.alignfull {
	width: 100%;
	max-width: 100%;
	max-width: var(--full-width);
}

/* WP-Block specific styles */

/* Global blocks */

.wp-block-group__inner-container {
	padding: 0 1rem;
}

.wp-block-columns {
	margin-right: auto;
	margin-left: auto;
}

.wp-block-media-text {
	margin: 1rem 0;
}

.wp-block-column {
	padding: 0 1.5rem;
}

/* Buttons */

.wp-block-buttons {
	margin-top: 1rem;
	grid-gap: 1rem;
	gap: 1rem;
}

.wp-block-button {
	font-size: 0.875rem;
	font-size: var(--text-sm);
	font-weight: bold;
	letter-spacing: 0.025em;
	letter-spacing: var(--tracking-wide);
	margin: 1rem 0;
}

/* Links */

.wp-block-button__link {
	padding: 0.5rem 2rem;
}

.wp-block-button__link:hover {
	text-decoration: underline;
}

/* Images */

.wp-block-image {
	padding: 0.5rem 0;
}

.wp-block-image figcaption {
	font-size: 0.75rem;
	font-size: var(--text-xs);
	color: var(--gray-700);
	text-align: center;
}

/* Pull quotes */

figure.wp-block-pullquote {
	border-top: 1px solid var(--gray-200);
	border-bottom: 1px solid var(--gray-200);
	margin: 2rem 0;
	text-align: center;
	padding: 1rem;
}

figure.wp-block-pullquote > blockquote {
	font-style: italic;
	padding: 1rem 0;
	font-size: 1.125rem;
	font-size: var(--text-lg);
}

figure.wp-block-pullquote > blockquote > cite {
	font-size: 0.875rem;
	font-size: var(--text-sm);
	font-style: italic;
}

.center-children {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Youtube embed */

.wp-block-embed__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* search page and form */

/* Search Form Styles */

.search-form {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 1rem;
	gap: 1rem;
}

.search-form > label {
	font-weight: 700;
	font-size: 1.125rem;
	font-size: var(--text-lg);
	margin-bottom: 0.5rem;
}

.search-form > input.search-field {
	font-size: 0.875rem;
	font-size: var(--text-sm);
	padding: 0.5rem 1rem;
	background-color: var(--gray-100);
	outline: none;
	/* same color as background so that we don't get a "pop" on focus */
	border: 1px solid var(--gray-100);
	border-radius: 5px
}

.search-form > input.search-field:focus {
		border: 1px solid var(--gray-300);
	}

.search-form > .search-submit {
	background-color: var(--primary-main);
	color: white;
	font-size: 0.875rem;
	font-size: var(--text-sm);
	font-weight: normal;
	padding: 0.5rem 1.5rem;
	border-radius: 5px;
	outline: none;
	border: none;
}

/* Typography */

article.post {
	font-family: "Merriweather", sans-serif;
	font-family: var(--font-serif);
	line-height: 1.8rem;
}

/* BLOG PAGE LAYOUT */

.blog-page-content-container {
	padding-right: 3rem

	/* when the sidebar is not present, we don't need the padding */
}

@media(max-width: 1024px) {

.blog-page-content-container {
		padding-right: 0rem
}
	}

.blog-page-content-container > article.post {
	margin-bottom: 2rem;
}

.entry-content {
	width: 100%;
	max-width: 768px;
	max-width: var(--default-column-width);
}

.blog-page__title {
	font-size: 1.125rem;
	font-size: var(--text-lg);
	color: var(--accent-800);
	margin: 1rem 0;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gray-200);
}

.entry-header__meta-details {
	font-size: 0.875rem;
	font-size: var(--text-sm);
	letter-spacing: 0.08em;
	color: var(--gray-800);
}

.entry-header__meta-details time.entry-date {
	text-decoration: none;
	color: var(--gray-700)
}

.entry-header__meta-details time.entry-date:hover {
		text-decoration: underline;
	}

.entry-content__taxonomy {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	grid-gap: 0.5rem;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-size: var(--text-sm);
	color: var(--gray-700);
}

.entry-content__taxonomy--tall {
	margin: 1rem 0;
}

.entry-content__taxonomy .cat-links > a, .tags-links > a {
	padding: 0.2rem 0.8rem;
	background-color: var(--gray-200);
	border-radius: 5px;
	color: var(--gray-800);
	text-decoration: none
}

.entry-content__taxonomy .cat-links > a:hover, .tags-links > a:hover {
		text-decoration: underline;
	}

/* SIDEBAR */

.blog-page-sidebar-container {
	 max-width: 16rem
}

@media(max-width: 1024px) {

.blog-page-sidebar-container {
		 border-top: 1px solid var(--gray-200);
		 margin-top: 2rem
}
	 }

/* except for the top-most widget, separate widgets through padding */

aside.sidebar-container > section.widget:not(:first-child) {
	padding-top: 1rem;
}

section.widget {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gray-200);
}

h3.widget-title {
	text-transform: uppercase;
	font-weight: 400;
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

.blog-page-sidebar-container section.widget ul li {
	list-style: none;
}

section.widget li {
	margin-bottom: 0.5rem;
}

/* stop images in the sidebar from overflowing */

section.widget img {
	width: 100%;
}

/* COMPONENTS STYLING */

.entry-title {
	font-weight: bold;
	font-size: 1.875rem;
	font-size: var(--text-3xl);
}

.entry-title a {
	text-decoration: none;
	color: var(--green-800)
}

.entry-title a:hover {
		text-decoration: underline;
	}

/* COMMENTS SECTION */

.comments-container {
	padding: 0 1.5rem 1.5rem;
}

h2.comments-title {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gray-200);
	margin-bottom: 1rem;
}

ol.comments-list {
	list-style: none;
	padding: 0;
}

li.comment .comment-author {
	display: flex;
	font-size: 0.875rem;
	font-size: var(--text-sm);
	font-weight: 500;
	align-items: center;
}

li.comment cite.fn {
	margin-right: 0.3rem;
}

li.comment cite.fn > a {
	text-decoration: none;
}

.comment-meta {
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

li.comment p {
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

div.reply a {
	text-decoration: underline;
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

div.comment-respond {
	border-top: 1px solid var(--gray-200);
	margin-top: 1rem;
	padding-top: 1rem;
}

div.comment-respond form {
	display: flex;
	flex-direction: column;
	max-width: 420px;
}

div.comment-respond form > p.logged-in-as {
	display: block;
}

div.comment-respond form  span.required-field-message {
	display: block;
}

div.comment-respond form > p {
	font-size: 0.875rem;
	font-size: var(--text-sm);
	display: flex;
	flex-direction: column;
}

p.comment-notes {
	font-style: italic;
}

div.comment-respond label {
	font-weight: 500;
	color: var(--primary-darkest);
}

div.comment-respond input, textarea {
	outline: none;
	border: 1px solid var(--gray-300);
	padding: 0.4rem;
	border-radius: 5px;
	color: var(--gray-900);
}

div.comment-respond p.comment-form-cookies-consent {
	display: flex;
	flex-direction: column-reverse;;
	justify-content: center;
	font-weight: 400;
}

div.comment-respond p.comment-form-cookies-consent input {
	margin-right: 0.5rem;
}

h2.comment-reply-title {
	font-size: 1.125rem;
	font-size: var(--text-lg);
}

div.comment-respond .submit {
	color: white;
	background-color: var(--green-800);
	font-weight: 500;
	padding: 0.5rem;
}

/* PAGE LAYOUT */

/*
 * It is important to note that these classes *don't* actually apply to Page
 * objects, generally, because generally, pages get rendered by page.php, which
 * doesn't use these classes, because they use Gutenberg blocks, which should
 * be able be fullwidth. These classes apply to other "pages" like single blog
 * posts, single products, and other "single" post type pages.
 *
 * This = single.php (and blog.php) and maybe a few others
 */

.page-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.page-content {
	padding: 1rem 1.5rem;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1080px;
	max-width: var(--wide-column-width);
}

.page-content__horizontal {
	flex-direction: row
}

@media(max-width: 1024px) {

.page-content__horizontal {
		flex-direction: column
}
	}

.page-content__narrow {
	max-width: 768px;
	max-width: var(--default-column-width);
}

/* wocoommerce support */

.show-password-input {
	display: none;
}

.woocommerce-MyAccount-navigation {
	float: left;
	width: 30%;
	background-color: var(--gray-100);
	padding: 1rem 1.5rem;
	border-radius: 5px;
	font-size: 0.875rem;
	font-size: var(--text-sm)
}

@media(max-width: 1024px) {

.woocommerce-MyAccount-navigation {
		width: 100%
}
	}

.woocommerce-MyAccount-navigation > ul > li {
	margin: 0.8rem 0;
}

.woocommerce-MyAccount-content {
	float: right;
	width: 68%;
	padding: 1rem 1.5rem
}

@media(max-width: 1024px) {

.woocommerce-MyAccount-content {
		width: 100%
}
	}

.woocommerce-message > a.button {
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

/* cart & checkout pages */

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--primary-800);
	color: white
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
		background-color: var(--primary-darkest);
	}

.woocommerce .cart_item dl {
	display: flex;
	flex-direction: column;
}

.woocommerce .cart_item td.product-name {
	font-weight: bold;
}

.woocommerce .cart_item td.product-name dl.variation {
	font-weight: normal;
	padding-left: 1rem;
	padding-top: 0.5rem;
}

.woocommerce .cart_item td.product-name dl.variation dt {
	font-style: italic;
}

.woocommerce .cart_item td.product-name dl.variation dd{
	padding-left: 0.5rem;
}

.woocommerce .woocommerce-checkout-payment button.button {
	background-color: var(--primary-800);
	color: white
}

.woocommerce .woocommerce-checkout-payment button.button:hover {
		background-color: var(--primary-darkest);
	}

button.woocommerce-button.button {
	color: white;
	background-color: var(--primary-800);
}

input.woocommerce-Input.input-text,
.woocommerce form input.input-text {
	padding: 0.5rem 0.8rem;
	border-radius: 5px;
	outline: none;
	border: 1px solid var(--gray-300);
}

/* help text in a woo form */

.woocommerce form .form-row > span {
	font-size: 0.875rem;
	font-size: var(--text-sm);
	color: var(--gray-700);
}

/* woo form label text */

.woocommerce form .form-row > label {
	font-size: 0.875rem;
	font-size: var(--text-sm);
	color: var(--gray-800);
	font-weight: 500;
}

.woocommerce {
	padding: 1rem 1.5rem;
}

.woocommerce-store-notice.demo_store {
	background-color: var(--primary-800);
}

/* Woocommerce's full page wrapper wrapper */

div.content-area {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Woocommerce's content wrapper */

main.site-main {
	padding: 1rem 1.5rem;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1080px;
	max-width: var(--wide-column-width);
}

nav.woocommerce-breadcrumb {
	display: flex;
	background-color: var(--gray-100);
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	padding: 0.8rem 2rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}

nav.woocommerce-breadcrumb a {
	margin: 0 0.5rem;
	color: var(--green-900);
	font-weight: 500;
	text-decoration: none;
	font-size: 0.875rem;
	font-size: var(--text-sm)
}

nav.woocommerce-breadcrumb a:hover: {
		text-decoration: underline;
	}

h1.entry-title.product_title {
	color: var(--gray-900);
}

.woocommerce-Price-amount {
	color: var(--green-800);
	font-weight: bold;
	font-size: 1.125rem;
	font-size: var(--text-lg);
}

.single_variation .woocommerce-Price-amount.amount {
	display: block;
	margin: 1rem 0;
}

.woocommerce-product-details__short-description {
	border-top: 1px solid var(--gray-200);
	border-bottom: 1px solid var(--gray-200);
	padding: 1rem 0;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

.product .single-product-upper-columns {
	display: flex
}

@media(max-width: 1024px) {

.product .single-product-upper-columns {
		flex-direction: column
}
	}

.woocommerce-product-gallery {
	flex: 2;
}

.woocommerce-product-gallery img {
	max-width: 100%;
	height: auto;
}

.product .summary {
	flex: 3;
	margin-left: 1.5rem
}

@media(max-width: 1024px) {

.product .summary {
		margin-left: 0
}
	}

form.cart {
	margin: 1rem 0;
}

form.cart .quantity > input {
	padding: 0.5rem 1rem;
	border: 1px solid var(--gray-200);
	border-radius: 5px;
}

form.cart button[type="submit"] {
	border: none;
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-weight: 500;
	outline: none;
	font-size: 0.875rem;
	font-size: var(--text-sm);
	background-color: var(--primary-800);
	color: white;
	margin-top: 1rem;
}

.product .product_meta {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--gray-200);
	display: flex;
	flex-direction: column;
	grid-gap: 0.5rem;
	gap: 0.5rem;
	color: var(--gray-700);
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

.product .product_meta .posted_in > a,
.product .product_meta .tagged_as > a {
	color: var(--gray-800);
	text-decoration: none
}

.product .product_meta .posted_in > a:hover, .product .product_meta .tagged_as > a:hover {
		text-decoration: underline;
	}

.woocommerce-tabs {
	margin-top: 2rem;
}

ul.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--gray-200);
}

ul.wc-tabs li  {
	padding: 0.5rem 1rem;
	list-style: none;
}

ul.wc-tabs li > a {
	text-decoration: none;
	font-size: 0.75rem;
	font-size: var(--text-xs);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--accent-900);
	white-space: nowrap;
}

ul.wc-tabs li.active {
	background-color: var(--gray-100);
}

.woocommerce-Tabs-panel {
	padding-top: 1rem;
}

/* attributes */

.woocommerce-product-attributes-item {
	text-align: left;
}

.woocommerce-product-attributes-item th {
	padding-right: 1rem;
}

/* related products */

section.related.products {

	margin-top: 1rem;
}

section.related.products h2 {
	font-size: 1.125rem;
	font-size: var(--text-lg);
	color: var(--accent-darkest);
}

section.related.products h2.woocommerce-loop-product__title {
	color: black;
}

section.related.products .price {
	color: var(--gray-900);
}

ul.products {
	display: flex
}

@media(max-width: 1024px) {

ul.products {
		flex-direction: column
}
	}

ul.products > li {
	width: 30%;
	margin: 1rem;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--gray-200);
	border-radius: 5px;
	padding: 1rem
}

@media(max-width: 1024px) {

ul.products > li {
		width: 100%
}
	}

ul.products > li img {
	background-color: var(--gray-100);
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 5px;
}

ul.products > li img:placeholder {
	display: none;
	color: transparent;
}

ul.products > li a {
	text-decoration: none;
}

ul.products > li a.button.add_to_cart_button {
	margin-top: 1rem;
	display: block;
	background-color: var(--primary-800);
	outline: none;
	font-weight: 500;
	font-size: 0.875rem;
	font-size: var(--text-sm);
	color: white;
	padding: 0.3rem 1rem;
	border-radius: 999px;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

/* variations */

table.variations {
	width: 100%;
}

table.variations tbody {
	display: flex;
	flex-direction: column;
	font-size: 0.875rem;
	font-size: var(--text-sm);
}

table.variations tbody tr {
	margin-bottom: 1rem;
}

table.variations tbody tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

table.variations tbody tr > th.label {
	margin-right: 1rem;
}

table.variations tbody tr a.reset_variations {
	display: none;
}

table.variations tbody tr select {
	border: 1px solid var(--gray-300);
	border-radius: 5px;
	background-color: white;
	color: var(--gray-800);
	padding: 0.2rem 0.6rem;
}

div#call_for_credit {
	display: flex;
	align-items: center;
}

/* Styles for include Woocommerce blocks */

.wc-block-grid__product {
	padding: 1rem;
	border: 1px solid var(--gray-200);
}