/*
Theme Name:         Escapography
Theme URI:          https://www.escapography.com
Author:             Dan Suleski
Description:        The Escapography Theme
Version:            5.0
License:            GNU General Public License v2.0
License URI:        https://www.gnu.org/licenses/gpl-2.0.html
Template:           generatepress
Template Version:   0.1
Tags:               black
*/



/*/////////////////////////
 * OVERALL BASE
 */

/*
 * Ensure the footer hugs the bottom of the viewport.
 * Note: The ":not" pseudo-selectors are due to the <iframe> textareas especially in the Product backend.
 * Note: If using 'height' over 'min-height', #header will eventually scroll offscreen.
 */
body:not(.wp-admin):not(.mce-content-body) {
    display: flex;
    flex-direction: column;
	min-height: calc( 100vh - var( --wp-admin--admin-bar--height, 0px ) );
}
div.site.container {
    flex-grow: 1;
	width: 100vw;
}

/* Everything on the site gets rounded corners. */
:root {	--pog-border-radius: 0.33em; }
* { border-radius: var( --pog-border-radius ); }

/*
 * Everything on the site gets a different-colored text selection.
 * Note: The :not guards are in the selector to prevent the backend and textareas from being altered.
 */
body:not(.wp-admin):not(.mce-content-body) ::selection {
	background: var( --pog-white );
	color: var( --pog-black );
}



/*/////////////////////////
 * FORMAT: BUTTONS
 */

:root {
	--button-padding: 0.75em 1em;
}

/* 
 * _Overall - Can apply these to any of the other buttons.
 * Note: Colors are expected to be set locally on the GB Block level.
 */
button, .button-x, .button-x-icon, button[type=submit], .gb-button, input[type=submit]
button:hover, .button-x:hover, .button-x-icon:hover, button[type=submit]:hover, .gb-button:hover, input[type=submit]:hover {
	
	align-items: center;
	display: inline-flex;
	color: inherit;
	cursor: pointer;
	justify-content: center;
	outline: inherit;
	padding: var( --button-padding );
	text-decoration: none;
	white-space: nowrap;
	
	/* This is captured in the Customizer - leave it commented out here for reference */
	/*
	font-size: 1.25em;
    font-weight: normal;
	line-height: 1em;
    text-transform: uppercase;
	*/
}
.button-x-icon {
	padding: 0;
}



/*/////////////////////////
 * FORMAT: FORMS
 * The form fields are getting style values from different sources.
 *  - GenerateBlocks local styles.
 *  - GeneratePress Customizer.
 *  - Fluent Forms.
 *  - Elsewhere in THIS style.css file.
 * 
 * Give a good base of style defs that other cascading sources can build from.
 * Note: Buttons are handled alongside the .button-x class.
 */

/* INPUT/SELECT/TEXTAREA (common) */
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {

	/*
	 * Note: Remove the three colors (background-color, border-color, and color) and set the FF form
	 * to "Inherit Theme Styles" to drive the colors from Customizer >> Colors >> Content.
	 * https://generate.support/topic/override-fluent-forms-style-with-generatepress-customizer-style/
	 */

	background-color: var( --pog-black-off );
	border: none;
	border-color: var( --pog-white-off );
	border-radius: 0;
	border-style: solid;
	border-width: 0.15em 0;
	color: var( --pog-white-off );
	font-family: 'Lexend';
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
	box-shadow: 0 0 1em 0 var( --pog-white-off );
}
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder,
input[type="url"]::placeholder,
select::placeholder,
textarea::placeholder {
	color: currentColor;
	font-family: 'Lexend';
	font-size: 0.75em;
	opacity: 0.25;
}

/* CHECKBOX */
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;

	border: 0.1em solid var( --pog-white-off );
	border-radius: 0;
	height: 0.8em;
	width: 0.8em;
}
input[type="checkbox"]:checked {
	background: var( --pog-white );
}

/* NUMERIC */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input[type=number] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* RADIO */
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;

	border: 0.1em solid var( --pog-white-off );
	border-radius: 1em;
	height: 0.8em;
	width: 0.8em;
}
input[type="radio"]:checked {
	background: var( --pog-white );
}

/* SELECT */
select {
	appearance: none;
	background: var( --pog-black-off ) !important;
	color: var( --pog-white-off ) !important;
}
select:focus {
	border-color: var( --pog-white-off ) !important;
	box-shadow: 0 0 1em 0 var( --pog-white-off );
}

/* TEXTAREA */
textarea::-webkit-scrollbar { width: 0.25em; }
textarea::-webkit-scrollbar-track { background: var( --pog-black-off ); }
textarea::-webkit-scrollbar-thumb { background: var( --pog-white-off ); }
textarea {
	appearance: none;
	background: var( --pog-black-off ) !important;
	color: var( --pog-white-off ) !important;
}
textarea:focus {
	border-color: var( --pog-white-off ) !important;
	box-shadow: 0 0 1em 0 var( --pog-white-off );
}


/*
 * The auto-complete does not respect background-color because browsers
 * override it with an !important designation, so to change the background
 * color, special hacky styling is required.
 */
:-webkit-autofill,
:-webkit-autofill:active,
:-webkit-autofill:focus,
:-webkit-autofill:hover {
	-webkit-box-shadow: 0 0 0 1000px var( --pog-black-off ) inset !important;
	-webkit-text-fill-color: var( --pog-white-off );	
}



/*/////////////////////////
 * FORMAT: LINKS
 */

/* Links should have a special underline. */
a:not(.button-x) {
	padding: 0.25em;
	text-decoration: none;
	transition: all 500ms ease;
}
a:has(img):not(.button-x) {
	padding: 0;
}
a:not(.button-x):hover {
	background: var( --pog-white );
}



/*/////////////////////////
 * FORMAT: LISTS
 */

/* The lists are indented way too far. */
ul {
	margin-left: 3em;
}



/*/////////////////////////
 * FORMAT: SCROLLBAR
 */

/* Change the width of the scrollbar. */
body::-webkit-scrollbar {
	width: 1em;
}

/* The background area where the thumb is not visible. */
body::-webkit-scrollbar-track {
	background: var( --pog-olive );
}

/* The small bit that moves back-and-forth. */
body::-webkit-scrollbar-thumb {
	background: var( --pog-olive-light );
}



/*/////////////////////////
 * FORMAT: TYPOGRAPHY
 */

/* 
 * These are the general text sizes we use across the site.
 * Note: These values are referenced in the Customizer, so if changed here, the whole site will get it.
 * Note: Useful locally for when <p>, <div>, and <span> elements need to visually look to be a certain size, but not affect SEO.
 */
:root {
	--pog-small-size: 0.75em;
	--pog-body-size: 1em;
	--pog-button-size: 1.25em;
	--pog-h1-size: 3em;
	--pog-h2-size: 2.7em;
	--pog-h3-size: 2.4em;
	--pog-h4-size: 2.1em;
	--pog-h5-size: 1.8em;
	--pog-h6-size: 1.5em;

	--pog-small-size-tablet: 0.75em;
	--pog-body-size-tablet: 1em;
	--pog-button-size-tablet: 1.1em;
	--pog-h1-size-tablet: 2.3em;
	--pog-h2-size-tablet: 2.1em;
	--pog-h3-size-tablet: 1.9em;
	--pog-h4-size-tablet: 1.7em;
	--pog-h5-size-tablet: 1.5em;
	--pog-h6-size-tablet: 1.3em;

	--pog-small-size-mobile: 0.75em;
	--pog-body-size-mobile: 1em;
	--pog-button-size-mobile: 1em;
	--pog-h1-size-mobile: 1.6em;
	--pog-h2-size-mobile: 1.5em;
	--pog-h3-size-mobile: 1.4em;
	--pog-h4-size-mobile: 1.3em;
	--pog-h5-size-mobile: 1.2em;
	--pog-h6-size-mobile: 1.1em;
}



/*/////////////////////////
 * AREA: AFFILIATE
 */

.single-affiliate .wc-block-mini-cart .wc-block-mini-cart__button {
	transform: none;
}
.single-affiliate .wc-block-mini-cart .wc-block-mini-cart__button:hover {
	background: var( --pog-white );
	color: var( --pog-black );
}
.single-affiliate .wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__badge {
	font-weight: normal;
}
.single-affiliate .wc-block-mini-cart .wc-block-mini-cart__button:hover .wc-block-mini-cart__badge {
	background: var( --pog-black ) !important;
	color: var( --pog-white ) !important;
}
.single-affiliate .wc-block-mini-cart .wc-block-mini-cart__button::before {
	content: 'Cart';
}



/*/////////////////////////
 * AREA: BLOG
 */

/*
 * Adding outer/inner containers to every article is just asking to have a human error somewhere.
 * As such, build that padding into the regular WP structure instead.
 */
article.type-post {
	padding: var( --outer-xs-padding-y ) calc( var( --outer-padding-x ) + var( --inner-padding-x ) ) var( --outer-xs-padding-y );
}
@media ( max-width: 1024px ) {
	article.type-post { padding: var( --outer-xs-padding-y-tablet ) calc( var( --outer-padding-x-tablet ) + var( --inner-padding-x-tablet ) ) var( --outer-xs-padding-y-tablet ); }
}
@media ( max-width: 767px ) {
	article.type-post { padding: var( --outer-xs-padding-y-mobile ) calc( var( --outer-padding-x-mobile ) + var( --inner-padding-x-mobile ) ) var( --outer-xs-padding-y-mobile ); }
}

/*
 * Default spacing for the blog content.  Blog authors should place their content into a flat list
 * of logical Containers, then label those Containers.  The following CSS will space things out.
 * Note:	The special CSS selector is also targeting the backend so authors can see the spacing
 * 			without needing to flip over to the frontend for a preview constantly.
 */
article.type-post .entry-content, :where(.editor-styles-wrapper) .is-root-container.wp-block-post-content {
	display: flex;
	flex-direction: column;
	padding-bottom: 2em;
	padding-top: 2em;
	row-gap: 5em;
}
article.type-post .entry-content figure, .is-root-container.wp-block-post-content figure {
	margin-bottom: 0.5em;
}


/*
 * The comments area cannot be overwritten through GP/GB, so styling must be manual here.
 */
.comments-area {
	padding: var( --outer-xs-padding-y ) calc( var( --outer-padding-x ) + var( --inner-padding-x ) );
}
@media ( max-width: 1024px ) {
	.comments-area { padding: var( --outer-xs-padding-y-tablet ) calc( var( --outer-padding-x-tablet ) + var( --inner-padding-x-tablet ) ); }
}
@media ( max-width: 767px ) {
	.comments-area { padding: var( --outer-xs-padding-y-mobile ) calc( var( --outer-padding-x-mobile ) + var( --inner-padding-x-mobile ) ); }
}
.comments-area input#author {
	width: 100%;
}
.comments-area input#email {
	width: 100%;
}
.comments-area input#url {
	width: 100%;
}
.comments-area .comment-form {
	margin-bottom: 2em;
}



/*/////////////////////////
 * AREA: HEADER
 */

/* 
 * The header has some special requirements - should stick to the top.
 * Note: GB doc says 767px, but my local Chrome says 781px for mobile.
 */
#header {
	position: sticky;
	top: 0;
	z-index: 99;
}
body.admin-bar > #header {
    top: var(--wp-admin--admin-bar--height);
}
@media ( max-width: 767px ) {
	body.admin-bar > #header {
    	top: 0;
	}
}



/*/////////////////////////
 * AREA: OFF-CANVAS PANEL
 */

/*
 * This section changes the styling of the off-canvas panel.
 * 
 * Can change the width of the panel.
 * 
 * GP puts an X at the top corner of the off-canvas panel -
 * we are replacing it with our own, so remove the GP version.
 */
:root {
	/*
	--gp-slideout-width: 90vw !important;
	*/
}
.slideout-exit {
	display: none !important;
}



/*/////////////////////////
 * PLUGIN: GENERATEBLOCKS
 * https://generateblocks.com
 */

/*
 * Not all properties are exposed through the GUI for the Carousel Bullets.
 * https://generate.support/topic/carousel-not-displaying-two-slides-at-once/#post-192701
 */
/* DAN-NOTE: Keep bullets round for now, but uncomment this bit to make square. */
/*
.gb-carousel-pagination .gb-carousel-dot {
	border-radius: 0;
}
*/



/*/////////////////////////
 * PLUGIN: FLUENT FORMS
 * https://fluentforms.com
 * Note: Ensure that each form is set to "Inherit Theme Style".
 */

/* Labels surrounding the fields. */
.fluentform label {
	font-family: 'Fugaz One';
	text-transform: uppercase;
}

/* Error styling for the input fields/messages. */
.fluentform .error.text-danger {
	background-color: var( --pog-white-off );
	border-radius: 0;
	color: var( --pog-red );
	font-family: 'Lexend';
	font-weight: bold;
	line-height: 1.2em;
	padding: 0.5em;
	text-transform: uppercase;
}
.fluentform .ff-el-is-error input[type="email"].ff-el-form-control,
.fluentform .ff-el-is-error input[type="number"].ff-el-form-control,
.fluentform .ff-el-is-error input[type="password"].ff-el-form-control,
.fluentform .ff-el-is-error input[type="search"].ff-el-form-control,
.fluentform .ff-el-is-error input[type="tel"].ff-el-form-control,
.fluentform .ff-el-is-error input[type="text"].ff-el-form-control,
.fluentform .ff-el-is-error input[type="url"].ff-el-form-control,
.fluentform .ff-el-is-error select.ff-el-form-control,
.fluentform .ff-el-is-error textarea.ff-el-form-control {
	border-color: var( --pog-red );
}
.fluentform > .ff-message-success,
.fluentform > .ff-message-success > p {
	border: none;
	box-shadow: none;
	margin: 0;
}

/*
 * Several field types are not completely (or at all) styled
 * with the base text and base button efforts.  Thus, this
 * section covers everything else.
 */

/* ACCORDION */
.fluentform div.ff-accordion-container {
	border: none;
}
.fluentform div.ff-accordion-container > div.ff-accordion-content {
	background: var( --pog-black );
	border: 0;
}
.fluentform div.ff-accordion-container > div.ff-accordion-header {
	background: var( --pog-black-off );
}
.fluentform div.ff-accordion-container > div.ff-accordion-header > * {
	color: var( --pog-white );
	font-size: revert;
}
.fluentform div.ff-accordion-container .ff-accordion-icon::after,
.fluentform div.ff-accordion-container .ff-accordion-icon::before {
	background: var( --pog-white ) !important;
}

/* BUTTONS */
.fluentform button[type=submit].ff-btn-submit,
.fluentform span.ff_upload_btn:has( ~input[type=file] ),
.fluentform div.ff-step-body > div.fluentform-step .step-nav > button[type=button] {
	
	/* Default color scheme for most of the FF buttons. */
    background-color: var( --pog-olive-dark );
    color: var( --pog-white );
	
	/* FF buttons should not have a border. */
	border: none;
}
.fluentform button[type=submit].ff-btn-submit:focus,
.fluentform button[type=submit].ff-btn-submit:hover {

	/* No idea why FF changes hover opacity to 0.8. */
	opacity: 1;

	/* Default hover color for all the FF submit buttons. */
    background-color: var( --pog-brown );
    color: var( --pog-white );
}

/* CHAINED SELECT */
.fluentform select.el-chained-select:disabled {
	opacity: 0.5;
}

/* CHECKBOX */
.fluentform input[type="checkbox"] {
	position: relative;
}
.fluentform input[type="checkbox"]:checked {
	background: transparent;
}
.fluentform input[type="checkbox"]:checked:after {
	content: "";
	position: absolute;

	border: 0 solid var( --pog-white );
	border-width: 0 0.2em 0.2em 0;
	inset: 0.1em;
	top: 0;
	transform: rotate( 22.5deg );
}
.fluentform input[type="checkbox"].ff-el-form-check-checkbox+span {
	font-family: 'Lexend';
	text-transform: none;
}
.fluentform span.ff_tc_checkbox {
	padding-right: 0.5em;
}

/* CHECKBOX GRID */
.fluentform table.ff-checkable-grids {
	border: 0;
}
.fluentform table.ff-checkable-grids thead > tr > th {
	background: var( --pog-black );
	border-radius: 0;
	color: var( --pog-white-off );
}
.fluentform table.ff-checkable-grids tbody > tr > td {
	border-radius: 0;
}
.fluentform table.ff-checkable-grids tbody > tr:nth-child( 2n ) > td {
	background: var( --pog-olive );
	color: var( --pog-white-off );
}
.fluentform table.ff-checkable-grids tbody > tr:nth-child( 2n-1 ) > td {
	background: var( --pog-olive-dark );
	color: var( --pog-white-off );
}

/* COLOR PICKER */
.fluentform input[type=text].ff-el-color {
	background: var( --pog-black-off ) !important;
	color: var( --pog-white-off ) !important;
}
div.pcr-app {
	background: var( --pog-black );
	border-color: var( --pog-olive-light );
	border-style: solid;
	border-width: 0.25em 0;
	color: var( --pog-black );
}
div.pcr-app div.pcr-selection > div.pcr-color-preview::before {
	background: none !important;
}
div.pcr-app div.pcr-interaction > input.pcr-result {
	background: var( --pog-black-off );
	border: 0;
	color: var( --pog-white-off );
}
div.pcr-app div.pcr-interaction > input.pcr-result:focus {
	box-shadow: 0 0 1em 0 var( --pog-white-off );
}
div.pcr-app div.pcr-interaction > input.pcr-clear {
	background: var( --pog-black-off );
	color: var( --pog-white );
}
div.pcr-app div.pcr-interaction > input.pcr-save {
	background: var( --pog-white-off );
	color: var( --pog-black );
}

/* DATE/TIME CALENDAR - https://flatpickr.js.org */

/* Calendar. */
.flatpickr-calendar {
	background: var( --pog-black-off ) !important;
	border-color: var( --pog-white-off ) !important;
	border-style: solid !important;
	border-radius: 0 !important;
	border-width: 0.25em 0 !important;
	box-shadow: none !important;
}
.flatpickr-calendar::after,
.flatpickr-calendar::before {
	border: 0 !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays .flatpickr-weekday,
.flatpickr-calendar .flatpickr-days .flatpickr-day {
	color: var( --pog-white-off ) !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-next-month,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
	fill: var( --pog-olive-light );
}
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg {
	fill: var( --pog-white-off );
}
.flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months > option {
	appearance: none;
	background: var( --pog-black-off ) !important;
	color: var( --pog-white-off ) !important;
}
.flatpickr-calendar .flatpickr-months .numInputWrapper > .arrowUp { background: var( --pog-white-off ); }
.flatpickr-calendar .flatpickr-months .numInputWrapper > .arrowUp::after { border-bottom-color: var( --pog-black ); }
.flatpickr-calendar .flatpickr-months .numInputWrapper > .arrowDown { background: var( --pog-white-off ); }
.flatpickr-calendar .flatpickr-months .numInputWrapper > .arrowDown::after { border-top-color: var( --pog-black ); }

.flatpickr-calendar .flatpickr-days .flatpickr-day.nextMonthDay,
.flatpickr-calendar .flatpickr-days .flatpickr-day.prevMonthDay {
	color: var( --pog-olive ) !important;
}
.flatpickr-calendar .flatpickr-days .flatpickr-day.today {
	border: 2px solid var( --pog-white-off );
}
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected {
	background: var( --pog-olive-light );
	border: 0;
	color: var( --pog-black );
}
.flatpickr-calendar .flatpickr-days .flatpickr-day:focus,
.flatpickr-calendar .flatpickr-days .flatpickr-day:hover {
	background: var( --pog-olive );
	border: 0;
}

/* Time. */
.flatpickr-time {
	background: var(--pog-black-off ) !important;
	border: 0 !important;
}
.flatpickr-time .flatpickr-hour,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-minute,
.flatpickr-time .flatpickr-am-pm {
	color: var( --pog-white-off ) !important;
}
.flatpickr-time .flatpickr-hour:focus,
.flatpickr-time .flatpickr-hour:hover,
.flatpickr-time .flatpickr-minute:focus,
.flatpickr-time .flatpickr-minute:hover {
	background: var( --pog-black-off );
	color: var( --pog-white-off );
}
.flatpickr-time .numInputWrapper > .arrowUp { background: var( --pog-white-off ); }
.flatpickr-time .numInputWrapper > .arrowUp::after { border-bottom-color: var( --pog-black ); }
.flatpickr-time .numInputWrapper > .arrowDown { background: var( --pog-white-off ); }
.flatpickr-time .numInputWrapper > .arrowDown::after { border-top-color: var( --pog-black ); }
.flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time .flatpickr-am-pm:hover {
	background: var( --pog-peach-dark ) !important;
	color: var( --pog-white-off ) !important;
}

/* DYNAMIC FIELD */
.fluentform div.ff-dynamic-autocomplete-wrap > div.ff-autocomplete-suggestions {
	background: var( --pog-black-off );
	color: var( --pog-white-off );
}
.fluentform div.ff-dynamic-autocomplete-wrap > div.ff-autocomplete-suggestions > ul {
	overflow: hidden;
}
.fluentform div.ff-dynamic-autocomplete-wrap > div.ff-autocomplete-suggestions > ul > li {
	border: 0;
}
.fluentform div.ff-dynamic-autocomplete-wrap > div.ff-autocomplete-suggestions > ul > li:hover {
	background: var( --pog-olive-dark );
}

/* FILE UPLOAD */
.fluentform div.ff-dropzone span.ff_upload_btn.ff-btn {
	background: var( --pog-black );
	border-color: var( --pog-white-off );
	color: var( --pog-white );
	opacity: 0.75;
}
.fluentform div.ff-dropzone span.ff_upload_btn.ff-btn:focus,
.fluentform div.ff-dropzone span.ff_upload_btn.ff-btn:hover {
	background: var( --pog-black );
	opacity: 1.0;
}
.fluentform div.ff-upload-preview {
	border: 0.25em solid var( --pog-white-off );
}
.fluentform div.ff-upload-thumb,
.fluentform div.ff-upload-thumb > div.ff-upload-preview-img {
	background: var( --pog-brown );
	border-radius: 0;
}
.fluentform div.ff-upload-details {
	border: 0;
}

/* MULTISELECT */
.fluentform div.choices.is-focused { box-shadow: 0 0 1em 0 var( --pog-white-off ); }
.fluentform div.choices,
.fluentform div.choices > div.choices__inner,
.fluentform div.choices > div.choices__list {

	/*
	 * NOTE: Keep this styling the same as the default base form fields,
	 * (input, select, textarea) found towards the start of this CSS file.
	 */
	background-color: var( --pog-black-off );
	border: none;
	border-color: var( --pog-white-off );
	border-radius: 0;
	border-style: solid;
	border-width: 0.15em 0;
	color: var( --pog-white-off );
	font-family: 'Lexend';
}
.fluentform div.choices > div.choices__list div.is-highlighted {
	background-color: var( --pog-olive-dark );
}
.fluentform div.choices > div.choices__inner > div.choices__list div.choices__item {
	background-color: var( --pog-olive-dark );
	border: none;
	color: var( --pog-white-off );
}

/* NET PROMOTER SCORE */
.fluentform table.ff_net_table > thead {
	color: var( --pog-white-off );
}
.fluentform table.ff_net_table > tbody > tr > td {
	background: transparent;
	border: 0;
}
.fluentform table.ff_net_table > tbody > tr > td > input + label {
	background: var( --pog-olive );
	color: var( --pog-white-off );
	transition: all 0.1s ease-out;
}
.fluentform table.ff_net_table > tbody > tr > td > input + label:hover {
	background: var( --pog-olive-light );
	color: var( --pog-black );
}
.fluentform table.ff_net_table > tbody > tr > td > input:checked + label {
	background: var( --pog-olive-light );
	color: var( --pog-black );
	transform: scale( 1.25 );
	z-index: 1;
}
.fluentform table.ff_net_table > tbody > tr > td > input:not(:checked) + label {
	border-radius: 0;
}
.fluentform table.ff_net_table > tbody > tr > td > input + label::after {
	border: 0;
}

/* PAGE */
.fluentform div.ff-step-container div.fluentform-step::-webkit-scrollbar { background: var( --pog-black-off ); }
.fluentform div.ff-step-container div.fluentform-step::-webkit-scrollbar-thumb { background: var( --pog-olive ); }
.fluentform div.ff-step-container div.fluentform-step::-webkit-scrollbar-track { background: var( --pog-olive-dark ); }

/* PHONE */
.fluentform button.iti__selected-country {
	background-color: transparent;
}
.fluentform div.iti__dropdown-content {
	border-width: 0;
}
.fluentform ul.iti__country-list {
	background: var( --pog-black-off );
	border-radius: 0;
	color: var( --pog-white-off );
}
.fluentform ul.iti__country-list::-webkit-scrollbar { background: var( --pog-black-off ); }
.fluentform ul.iti__country-list::-webkit-scrollbar-thumb { background: var( --pog-olive ); }
.fluentform ul.iti__country-list::-webkit-scrollbar-track { background: var( --pog-olive-dark ); }

/* PROGRESS BAR */
.fluentform div.ff-el-progress {
	background: var( --pog-white );
	color: var( --pog-black );
}
.fluentform div.ff-el-progress > div.ff-el-progress-bar {
	background: var( --pog-peach );
	color: var( --pog-white );
}

/* RADIO */
.fluentform input[type="radio"].ff-el-form-check-radio ~ span {
	font-family: 'Lexend';
	text-transform: none;
}

/* RANGE SLIDER */
.fluentform div.rangeslider {
	background: var( --pog-white-off );
}
.fluentform div.rangeslider > div.rangeslider__fill {
	background: var( --pog-olive-light );
}
.fluentform div.rangeslider > div.rangeslider__handle {
	background: var( --pog-olive );
	border-color: var( --pog-white-off );
}
.fluentform div.rangeslider + div.ff_range_value {
	color: var( --pog-white-off );
}

/* RATINGS */
.fluentform div.ff-el-ratings label svg.ff-svg {
	fill: var( --pog-white-off );
}
.fluentform div.ff-el-ratings label.active svg.ff-svg {
	fill: var( --pog-peach );
}

/* REPEATER */
.fluentform table.ff_repeater_table div.ff-el-repeat-buttons-list {
	fill: var( --pog-white-off );
}

/* RICH TEXT */

/* TinyMCE top-level header/footer. */
.fluentform div.mce-tinymce.mce-container.mce-panel {
	background: var( --pog-black-off ) !important;
	border-color: var( --pog-white-off ) !important;
	border-style: solid !important;
	border-radius: 0 !important;
	border-width: 0.25em 0 !important;
	box-sizing: border-box !important;
}
.fluentform div.mce-tinymce div.mce-toolbar-grp,
.fluentform div.mce-tinymce div.mce-statusbar {
	background: var( --pog-black-off );
	border-radius: 0;
	color: var( --pog-white-off );
}
.fluentform div.mce-tinymce div.mce-edit-area {
	border-radius: 0;
}

/* TinyMCE toolbar dropdown. */
.fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn,
.fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn:focus,
.fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn:hover {
	background: var( --pog-black-off );
	border: 0;
}
.fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn button,
.fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn:focus button,
.fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn:hover button {
	color: var( --pog-white-off );
}

/* TinyMCE toolbar buttons. */
.fluentform div.mce-tinymce i.mce-ico,
.fluentform div.mce-tinymce i.mce-ico {
	color: var( --pog-white-off );
}
.fluentform div.mce-tinymce div.mce-btn.mce-active {
	background: var( --pog-olive );
}
.fluentform div.mce-tinymce div.mce-btn:focus,
.fluentform div.mce-tinymce div.mce-btn.mce-active:focus,
.fluentform div.mce-tinymce div.mce-btn.mce-disabled:focus,
.fluentform div.mce-tinymce div.mce-btn:hover,
.fluentform div.mce-tinymce div.mce-btn.mce-active:hover,
.fluentform div.mce-tinymce div.mce-btn.mce-disabled:hover {
	background: var( --pog-olive-light );
	border-color: transparent;
	box-shadow: none;
}
.fluentform div.mce-tinymce div.mce-btn:focus i.mce-ico,
.fluentform div.mce-tinymce div.mce-btn.mce-disabled:focus i.mce-ico,
.fluentform div.mce-tinymce div.mce-btn:hover i.mce-ico,
.fluentform div.mce-tinymce div.mce-btn.mce-disabled:hover i.mce-ico {
	color: var( --pog-white-off );
}
.fluentform div.mce-tinymce div.mce-btn button:focus,
.fluentform div.mce-tinymce div.mce-btn button:hover {
	background: transparent;
}

/* TinyMCE dialogs. */
div.mce-panel.mce-inline-toolbar-grp,
div.mce-floatpanel > div.mce-reset,
div.mce-floatpanel.mce-popover {
	background: var( --pog-black-off );
	border-color: var( --pog-white-off );
	border-style: solid;
	border-radius: 0;
	border-width: 0.25em 0;
}
div.mce-arrow-up::before, div.mce-arrow-up::after { border-bottom-color: var( --pog-black-off ) !important; }
div.mce-arrow-down::before, div.mce-arrow-down::after { border-top-color: var( --pog-black-off ) !important; }

div.mce-btn,
div.mce-btn:active,
div.mce-btn:focus,
div.mce-btn:hover,
div.mce-btn.mce-primary,
div.mce-btn.mce-primary:active,
div.mce-btn.mce-primary:focus,
div.mce-btn.mce-primary:hover,
div.mce-btn > button,
div.mce-btn > button:active,
div.mce-btn > button:focus,
div.mce-btn > button:hover,
div.mce-btn.mce-primary > button,
div.mce-btn.mce-primary:active > button,
div.mce-btn.mce-primary:focus > button,
div.mce-btn.mce-primary:hover > button {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
}
div.mce-btn {
	background: var( --pog-black-off ) !important;
}
div.mce-btn:active,
div.mce-btn:focus,
div.mce-btn:hover {
	background: var( --pog-black ) !important;
}
div.mce-btn > button,
div.mce-btn > button > i.mce-ico {
	color: var( --pog-white-off ) !important;
}

div.mce-btn.mce-primary {
	background: var( --pog-white-off ) !important;
}
div.mce-btn.mce-primary:active,
div.mce-btn.mce-primary:focus,
div.mce-btn.mce-primary:hover {
	background: var( --pog-olive-light ) !important;
}
div.mce-btn.mce-primary > button,
div.mce-btn.mce-primary > button > i.mce-ico {
	color: var( --pog-black ) !important;
}

div.mce-btn > button > span.mce-txt,
div.mce-btn.mce-primary > button > span.mce-txt {
	font-family: 'Fugaz One' !important;
}

/* TinyMCE dialog color grid. */
table.mce-colorbutton-grid div.mce-widget {
	background: transparent;
}
table.mce-colorbutton-grid div.mce-widget button {
	color: var( --pog-white-off );
}
table.mce-colorbutton-grid div.mce-widget button:hover {
	background: transparent;
	color: var( --pog-olive-light );
}

/* TinyMCE dialog color selector. */
div.mce-floatpanel div.mce-window-head,
div.mce-floatpanel div.mce-window-body,
div.mce-floatpanel div.mce-foot {
	background: var( --pog-black-off );
	border: 0;
}
div.mce-floatpanel div.mce-window-head > div.mce-title,
div.mce-floatpanel div.mce-window-head > button.mce-close > i.mce-ico::before,
div.mce-floatpanel div.mce-window-body label.mce-label {
	color: var( --pog-white-off ) !important;
	font-family: 'Fugaz One' !important;
	font-weight: normal !important;
	text-shadow: 0 !important;
	text-transform: uppercase !important;
}
div.mce-floatpanel input.mce-textbox {
	background: var( --pog-black );
	border: 0;
	color: var( --pog-white-off );
}
div.mce-floatpanel input.mce-textbox:focus {
	box-shadow: 0 0 1em 0 var( --pog-white-off );
}
div.mce-floatpanel div.mce-colorpicker-h,
div.mce-floatpanel div.mce-colorpicker-sv {
	border: 0;
}

/* TinyMCE dialog link. */
div.mce-panel.mce-toolbar-grp div.wp-link-input > label {
	color: var( --pog-white-off );
	font-family: 'Fugaz One';
	font-weight: normal;
	text-shadow: 0;
	text-transform: uppercase;
}
div.mce-panel.mce-toolbar-grp div.wp-link-input > input {
	background: var( --pog-black );
	border: 0;
	color: var( --pog-white-off );
}
div.mce-panel.mce-toolbar-grp div.wp-link-input > input:focus {
	box-shadow: 0 0 1em 0 var( --pog-white-off );
}

/* TinyMCE dialog link options - oddly, FF does not use classes??. */
#wp-link,
#wp-link > #link-modal-title,
#wp-link > #link-selector,
#wp-link > div.submitbox {
	background: var( --pog-black );
	border: 0;
	color: var( --pog-white-off );
}
#wp-link {
	border-color: var( --pog-olive-light );
	border-style: solid;
	border-width: 0.25em 0;
}
#wp-link button#wp-link-close { color: var( --pog-white-off ); }
div.mce-floatpanel div.mce-window-head > div.mce-title,
div.mce-floatpanel div.mce-window-head > button.mce-close > i.mce-ico::before,
div.mce-floatpanel div.mce-window-body label.mce-label {
	color: var( --pog-white-off ) !important;
	font-family: 'Fugaz One' !important;
	font-weight: normal !important;
	text-shadow: 0 !important;
	text-transform: uppercase !important;
}

#wp-link div#most-recent-results {
	background: var( --pog-white-off );
	color: var( --pog-black );	
}
#wp-link div#most-recent-results { border: 0; box-shadow: none; }
#wp-link div#most-recent-results::-webkit-scrollbar { background: var( --pog-black-off ); }
#wp-link div#most-recent-results::-webkit-scrollbar-thumb { background: var( --pog-olive ); }
#wp-link div#most-recent-results::-webkit-scrollbar-track { background: var( --pog-olive-dark ); }
#wp-link div#most-recent-results > div#query-notice-message {
	background: var( --pog-white-off );
	border: 0;
	border-radius: 0;
	color: var( --pog-black );
	overflow: hidden;
}
#wp-link div#most-recent-results > div#query-notice-message > em.query-notice-default,
#wp-link div#most-recent-results > div#query-notice-message > em.query-notice-hint {
	border-color: var( --pog-peach-dark );
	border-radius: 0;
}
#wp-link div#wp-link-cancel > button,
#wp-link div#wp-link-update > input {
	background: var( --pog-black );
	border: 0;
	color: var( --pog-white-off );
	padding: var( --button-padding );
}
#wp-link div#wp-link-cancel > button:hover { background: var( --pog-black-off ); }
#wp-link div#wp-link-update > input { background: var( --pog-white-off ); color: var( --pog-black ); }
#wp-link div#wp-link-update > input:hover { background: var( --pog-olive-light ); }

/* STEPS */
.fluentform ul.ff-step-titles > li::before {
	background: var( --pog-white );
	color: var( --pog-black );
}
.fluentform ul.ff-step-titles > li.ff_active::before {
	background: var( --pog-peach );
	color: var( --pog-white );
}
.fluentform ul.ff-step-titles > li.ff_completed:before {
	background: var( --pog-peach-light );
	color: var( --pog-white-off );
}
.fluentform ul.ff-step-titles > li.ff_active::after,
.fluentform ul.ff-step-titles > li.ff_completed::after {
	background: var( --pog-white );
}
.fluentform ul.ff-step-titles > li > span {
	color: var( --pog-white );
}


/*
 * There are times when we want to change the styling of an element,
 * but only in special one-off type of cases, so create class overrides
 * here that can optionally be used.
 */

/* BUTTONS */

/* theme-black */
.fluentform button[type=submit].ff-btn-submit.theme-black,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-black ),
.fluentform div.ff-step-body > div.fluentform-step.theme-black .step-nav > button[type=button] {
	background-color: var( --pog-black ); color: var( --pog-white );
}
.fluentform button[type=submit].ff-btn-submit.theme-black:focus,
.fluentform button[type=submit].ff-btn-submit.theme-black:hover,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-black ):focus,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-black ):hover,
.fluentform div.ff-step-body > div.fluentform-step.theme-black .step-nav > button[type=button]:focus,
.fluentform div.ff-step-body > div.fluentform-step.theme-black .step-nav > button[type=button]:hover {
	background-color: var( --pog-black-off ); color: var( --pog-white );
}

/* theme-olive */
.fluentform button[type=submit].ff-btn-submit.theme-olive,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-olive ),
.fluentform div.ff-step-body > div.fluentform-step.theme-olive .step-nav > button[type=button] {
	background-color: var( --pog-olive-light ); color: var( --pog-black );
}
.fluentform button[type=submit].ff-btn-submit.theme-olive:focus,
.fluentform button[type=submit].ff-btn-submit.theme-olive:hover,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-olive ):focus,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-olive ):hover,
.fluentform div.ff-step-body > div.fluentform-step.theme-olive .step-nav > button[type=button]:focus,
.fluentform div.ff-step-body > div.fluentform-step.theme-olive .step-nav > button[type=button]:hover {
	background-color: var( --pog-brown ); color: var( --pog-white-off );
}

/* theme-peach */
.fluentform button[type=submit].ff-btn-submit.theme-peach,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-peach ),
.fluentform div.ff-step-body > div.fluentform-step.theme-peach .step-nav > button[type=button] {
	background-color: var( --pog-peach ); color: var( --pog-white );
}
.fluentform button[type=submit].ff-btn-submit.theme-peach:focus,
.fluentform button[type=submit].ff-btn-submit.theme-peach:hover,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-peach ):focus,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-peach ):hover,
.fluentform div.ff-step-body > div.fluentform-step.theme-peach .step-nav > button[type=button]:focus,
.fluentform div.ff-step-body > div.fluentform-step.theme-peach .step-nav > button[type=button]:hover {
	background-color: var( --pog-peach-dark ); color: var( --pog-white );
}

/* theme-white */
.fluentform button[type=submit].ff-btn-submit.theme-white,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-white ),
.fluentform div.ff-step-body > div.fluentform-step.theme-white .step-nav > button[type=button] {
	background-color: var( --pog-white-off ); color: var( --pog-black );
}
.fluentform button[type=submit].ff-btn-submit.theme-white:focus,
.fluentform button[type=submit].ff-btn-submit.theme-white:hover,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-white ):focus,
.fluentform span.ff_upload_btn:has( ~input[type=file].theme-white ):hover,
.fluentform div.ff-step-body > div.fluentform-step.theme-white .step-nav > button[type=button]:focus,
.fluentform div.ff-step-body > div.fluentform-step.theme-white .step-nav > button[type=button]:hover {
	background-color: var( --pog-white ); color: var( --pog-black );
}

.fluentform .ff-btn { margin-bottom: 0 !important; }

/* CONTAINER */
.fluentform .ff-t-container.centered { align-items: center; }

.fluentform .ff-t-container.autocol1 > :nth-child(1 of .ff-t-cell) { flex-basis: auto !important; }
.fluentform .ff-t-container.autocol2 > :nth-child(2 of .ff-t-cell) { flex-basis: auto !important; }

/* GROUP */
.fluentform .ff-el-group.marginless { margin-bottom: 0; }



/*/////////////////////////
 * PLUGIN: WOOCOMMERCE
 * https://woocommerce.com/
 */

/*
 * Display/Hide DOM elements that are specific to the state of the page.  For example:
 * 		- JS being enabled or not.
 * 		- WC Cart Store being initialized or not.
 */
body.js-disabled .js-required { display: none !important; }
body.js-enabled .js-fallback { display: none !important; }
body:not(.wc-cart-store-ready) .wc-cart-store-required { display: none !important; }
body.wc-cart-store-ready .wc-cart-store-fallback { display: none !important; }

/* WC has some flaws in its form controls and/or need to be styled to match FF and GB. */
.woocommerce .show-password-input,
.woocommerce-page .show-password-input {
	background: var( --pog-white-off ) !important;
	padding: 0.25em !important;
}

/*
 * Cart/Checkout pages.
 */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { text-align: center; }

/* There is a Mini-Cart Block that WC provides.  It needs some attention to make it look right. */
.wc-block-mini-cart .wc-block-mini-cart__button {
	transform: skew( var( --slant-skew-right ), 0 );
	/* Uncomment this to give the cart button a background. */
	/*background: var( --pog-olive-light );*/
}
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__amount {
	/* Intentionally empty. */
}
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__amount:focus,
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__amount:hover {
	/* Intentionally empty. */
}
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge {
	/* Intentionally empty. */
}


/* When the Mini-Cart is clicked, there is a drawer that slides out. */
.wp-block-woocommerce-mini-cart-contents {
	background: var( --pog-black ) !important;
	border-left: solid 0.25em var( --pog-white );
}
.wp-block-woocommerce-mini-cart-contents .wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background-color: var( --pog-peach );
	color: var( --pog-white-off );
	font-family: 'Fugaz One', display;
	font-size: 1rem;
	padding: var( --button-padding );
	text-transform: uppercase;
}
.wp-block-woocommerce-mini-cart-contents .wc-block-components-button:is(:hover,:focus),
.wp-block-woocommerce-cart .wc-block-cart__submit-button:is(:hover,:focus),
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:is(:hover,:focus) {
	background-color: var( --pog-peach-dark );
	color: var( --pog-white-off );
}
.wp-block-woocommerce-mini-cart-contents .wc-block-components-drawer__close {
	box-shadow: none !important;
}


/*
 * Style up the Product Archive Pages.
 * Note:	We are specifically styling up the Archives; not intending to
 * 			style up places like the Related Products and such here.
 */

.woocommerce.woocommerce-page ul.products li.product .woocommerce-product-details__short-description {
	/* Note: I tried "text-wrap: balance;", but did not look great.  Keeping stub around for future. */
}


/*DAN-TODO: Revisit this comment
 * The ATC buttons on the site are custom.  To get them to work properly, the following must be done.
 * 		- Add these two classes to the button: ajax_add_to_cart add_to_cart_button
 * 		- Add this data attribute to the button: data-product_id={{loop_item key:ID}} (or whichever ID desired)
 * 		- Add this data attribute to the button: data-quantity=1 (or however many desired)
 * 		- Add this href to the button: ?add-to-cart={{loop_item key:ID}} (or whichever ID desired)
 * 		- Add three SVG icons to the button with classes: idle, load, and done.
 * 		- Check WooCommerce >> Settings >> Products >> Enable AJAX add to cart buttons on archives.
 * 
 * https://stackoverflow.com/questions/25892871/woocommerce-product-page-how-to-create-ajax-on-add-to-cart-button
 * 
 * By default, we show the IDLE icon.  When the ATC button is clicked, we show the LOAD icon, and after
 * item is added to the cart, we show the DONE icon.  We are able to tell where WC is in the process of
 * adding an item to the cart by examining the classes that WC updates on the button.  Specifically,
 * 'loading' (processing) and 'added' (completed).
 * 
 * Additionally, we want to hide the "View Cart" link that appears.  Instead, we are relying on the DONE
 * animation and the change in item count from the mini-cart to alert the user.
 */

.add_to_cart_button svg { display: none; }

.add_to_cart_button:not(.added, .loading) svg.idle { display: inline; }
.add_to_cart_button:not(.added, .loading) svg.load { display: none; }
.add_to_cart_button:not(.added, .loading) svg.done { display: none; }

.add_to_cart_button.loading svg.idle { display: none; }
.add_to_cart_button.loading svg.load {
	animation: rotate 2s linear 0s infinite normal both;
	display: inline;
}
.add_to_cart_button.loading svg.done { display: none; }

.add_to_cart_button.added svg.idle { display: none; }
.add_to_cart_button.added svg.load { display: none; }
.add_to_cart_button.added svg.done {
	animation: heartBeat 2s ease 0s 1 normal both;
	display: inline;
}

@keyframes rotate {
	from { rotate: 0; }
	to { rotate: 1turn; }
}


/* 
 * Style up the Single Product Pages.
 * Note: 	There are several bits on these Pages that need some specific
 * 			attention.  In the case of buttons, it may just be a color and
 * 			the rest of the styling of the buttons happens across all WC
 * 			buttons earlier in this CSS.
 */

/* The Single Product Pages have a GenerateBlocks Carousel and thumbs to display the Product Gallery. */
.product-carousel .gb-carousel-pagination {
	display: none !important;
}
.product-carousel-thumbs img {
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}
.product-carousel-thumbs img.is-active {
	opacity: 1;
	outline: 2px solid var( --pog-white );
}


/*
 * Display the Bulk Pricing Table in a popup.
 * Notes:
 * 	- Anchor to the bottom of the Product Image.
 * 	- Unable to transition on height, so use max-height.
 * 	- Opacity and max-height are transitioned separately because popup padding appears before trigger.
 */
.product.bulk .bulk-popup-anchor {
	position: relative;
}
.product.bulk .bulk-popup {

	overflow: hidden;
	position: absolute;
	z-index: 999;

	bottom: 0;
	left: 0;
	right: 0;

	height: max-content;
	max-height: 0;
	opacity: 0;
	transition:
		max-height 0.3s ease-out,
		opacity 0.2s linear 0.1s;
}
.product.bulk .bulk-popup.active {
	max-height: 100%;
	opacity: 1;
	transition:
		max-height 0.5s ease-in,
		opacity 0.2s linear 0.1s;
}
.product:not(.bulk) .bulk-popup {
	display: none;
}

/*
 * The Bulk Price should be shown if the Product supports Bulk Pricing AND has any of
 * the Product in the Cart.  Be sure to cross out the MSRP when displaying Bulk.
 */
.product:not(.sale) .sale-price-container,
.product:not(.bulk) .bulk-price-container,
.product.bulk[data-cart-item-quantity="0"] .bulk-price-container {
	display: none;
}
.product.sale:not(.bulk) .regular-price-container,
.product.bulk:not([data-cart-item-quantity="0"]) .regular-price-container {
	opacity: 0.75;
	text-decoration: line-through;
	zoom: 0.75;
}

/*
 * The bit above the MSRP can change based on how many of the Product is in the Cart.
 * Note: This changes a bit based on whether we are on the B2B or D2C shop.
 */
.product:not(.bulk) .status-price-quantity-none {
	display: none;
}
.product.bulk:not([data-cart-item-quantity="0"]) .status-price-quantity-none {
	display: none;
}
.product.bulk[data-cart-item-quantity="0"] .status-price-quantity-some {
	display: none;
}
.product:not(.sale) .status-price-sale {
	display: none;
}
.product.sale .status-price-regular {
	display: none;
}

/* The bit below the quantity can change based on how many of the Product is in the Cart. */
.product:not(.bulk) .status-cart-quantity-updating {
	display: none;
}
.product.bulk.updating .status-cart-quantity-dormant {
	display: none;
}
.product.bulk:not(.updating) .status-cart-quantity-updating {
	display: none;
}

/* 
 * No reason to show the "View Cart" that WC appends under the ATC.
 * Note: GP does this already on pages that are classed with .woocommerce; expanding to whole site.
 */
.add_to_cart_button + .added_to_cart { display: none; }

/* If there are 0 of a product in the cart, then the minus/remove buttons should be disabled. */
.product[data-cart-item-quantity="0"] .bulk-quantity-control :is(.bulk-minus, .bulk-remove) {
	opacity: 0.35;
	pointer-events: none;
}


/* 
 * The WC messages need to be aligned properly.  Test this by using ATC on non-AJAX (e.g. on Single Pages).
 */
.woocommerce-notices-wrapper {
	;	/*TBD*/
}
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message {
	margin: 1em;
}
.woocommerce-notices-wrapper .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-info a,
.woocommerce-notices-wrapper .woocommerce-message a {
	color: var( --pog-white );
}
.woocommerce-notices-wrapper .woocommerce-error a:focus, .woocommerce-notices-wrapper .woocommerce-error a:hover,
.woocommerce-notices-wrapper .woocommerce-info a:focus, .woocommerce-notices-wrapper .woocommerce-info a:hover,
.woocommerce-notices-wrapper .woocommerce-message a:focus, .woocommerce-notices-wrapper .woocommerce-message a:hover {
	color: var( --pog-black );
}
.woocommerce-notices-wrapper .woocommerce-error { background: var( --pog-red ); }
.woocommerce-notices-wrapper .woocommerce-info { background: var( --pog-blue ); }
.woocommerce-notices-wrapper .woocommerce-message { background: var( --pog-green ); }


/*
 * Style the Login and Login-related Pages (e.g. /my-account).
 */

/* The Login. */
.woocommerce form.login {
	margin-bottom: 0 !important;
}
.woocommerce form.login .woocommerce-form-login__rememberme {
	margin-bottom: 1em;
}

/* Reset Password. */
.woocommerce form.lost_reset_password {
	align-items: center;
	display: flex;
	flex-direction: column;
}
.woocommerce form.lost_reset_password p:has(#user_login) {
	width: stretch;
	
}

/* Navigation links. */
.woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link > a {
	padding: 1em;
}
.woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active > a {
	background: var( --pog-peach-dark );
	color: var( --pog-white );
}
.woocommerce .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link > a:hover {
	background: var( --pog-white-off );
	color: var( --pog-black );
}

/* 
 * Payment methods.
 * Note: WC screwed up the HTML structure by putting the info class next to the wrapper instead of inside.
 */
.woocommerce .woocommerce-MyAccount-content .woocommerce-notices-wrapper + .woocommerce-info {
	background: var( --pog-blue );
	margin: 1em;
	margin-left: 0;
}

/*
 * Responsive stacking.  Need to give space between /my-account menu and content AND
 * need room in the WC notice wrapper for wrapped lines on tablet/mobile.
 */
@media ( max-width: 767px ) {
	.woocommerce .woocommerce-MyAccount-navigation {
		margin-bottom: 2em;
	}

	.woocommerce .woocommerce-MyAccount-content
	.woocommerce-notices-wrapper + .woocommerce-info > .button {
		clear: both;
		display: block;
		float: none;
		margin-top: 1em;
		width: fit-content;
	}
}



/*/////////////////////////
 * CLASS: CONTAINERS
 */

/*
 * We use a concept of Outer/Inner Containers on almost every Page/Post.
 * Unfortunately, GP does not offer a nice way to pad or otherwise style
 * these type of Containers in the Customizer or Elements.  To prevent
 * manually setting values in every GB Block instance, we are using the
 * Global Styles system to assign the apprpriate class to each Container
 * and styling it in exactly one place, here.
 * 
 * Why is this necessary?
 * Several reasons:
 * 		- 	Without this, the content within Inner Containers would be
 * 			butt-up against the left and right edges of the viewport.
 * 		-	A bunch of the floaters are going outside the bounds of the
 * 			Containers and causing the site to scroll horizontally.
 * 
 * Note
 * 		-	If the below is empty, there is a chance that the CSS Properties
 * 			were set through the GB class styling GUI, not here.
 * 		-	The "1200" max-width must match the value set in the Customizer.
 */
:root {
	--inner-padding-x: 1em;
	--inner-padding-x-tablet: 1em;
	--inner-padding-x-mobile: 0.5em;
	--outer-padding-x: 1em;
	--outer-padding-y: 5em;
	--outer-xl-padding-x: var( --outer-padding-x );
	--outer-xl-padding-y: 7em;
	--outer-xs-padding-x: var( --outer-padding-x );
	--outer-xs-padding-y: 3em;
	--outer-padding-x-tablet: 0.5em;
	--outer-padding-y-tablet: 4em;
	--outer-xl-padding-x-tablet: var( --outer-padding-x-tablet );
	--outer-xl-padding-y-tablet: 6em;
	--outer-xs-padding-x-tablet: var( --outer-padding-x-tablet );
	--outer-xs-padding-y-tablet: 2em;
	--outer-padding-x-mobile: 0.25em;
	--outer-padding-y-mobile: 3em;
	--outer-xl-padding-x-mobile: var( --outer-padding-x-mobile );
	--outer-xl-padding-y-mobile: 5em;
	--outer-xs-padding-x-mobile: var( --outer-padding-x-mobile );
	--outer-xs-padding-y-mobile: 1em;
}
.container-inner {
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	max-width: var( --gb-container-width );
	padding-left: var( --inner-padding-x );
	padding-right: var( --inner-padding-x );
	row-gap: 3em;
	width: 100%;
}
.container-outer, .container-outer-xl, .container-outer-xs, .container-outer-0 {
	border-radius: 0;
}
.container-outer-0 {
	padding: 0;
}
.container-outer, .container-outer-xl, .container-outer-xs {
	overflow: hidden;
	padding: var( --outer-padding-y ) var( --outer-padding-x );
}
.container-outer-xl {
	padding: var( --outer-xl-padding-y ) var( --outer-xl-padding-x );
}
.container-outer-xs {
	padding: var( --outer-xs-padding-y ) var( --outer-xs-padding-x );
}
@media ( max-width: 1024px ) {
	.container-outer {  
    	padding: var( --outer-padding-y-tablet ) var( --outer-padding-x-tablet );
	}
	.container-outer-xl {
		padding: var( --outer-xl-padding-y-tablet ) var( --outer-xl-padding-x-tablet );
	}
	.container-outer-xs {
		padding: var( --outer-xs-padding-y-tablet ) var( --outer-xs-padding-x-tablet );
	}
}
@media ( max-width: 767px ) {
	.container-inner {
		padding-left: var( --inner-padding-x-mobile );
		padding-right: var( --inner-padding-x-mobile );
	}
	.container-outer {  
    	padding: var( --outer-padding-y-mobile ) var( --outer-padding-x-mobile );
	}
	.container-outer-xl {
		padding: var( --outer-xl-padding-y-mobile ) var( --outer-xl-padding-x-mobile );
	}
	.container-outer-xs {
		padding: var( --outer-xs-padding-y-mobile ) var( --outer-xs-padding-x-mobile );
	}
}



/*/////////////////////////
 * CLASS: DESIGNS
 */

/* 
 * Dashed - Horizontal borders representing a road.
 * Note: 	This is a GB Global Class with additional styling that cannot be
 * 			done through the GUI.  Styles through the GUI take precedence.
 */
:root {
	--dashed-padding-stretch-x: 2em;		/* Double the button-padding width. */
	--dashed-padding-stretch-y: 0.25em;		/* Third the button-padding height. */
}
.design-dashed { align-self: center; border: 0.1em 0; border-color: currentColor transparent; border-style: dashed none; }
.design-dashed-hover { transition: all 0.25s ease; }
.design-dashed-hover:focus, .design-dashed-hover:hover { padding: var( --dashed-padding-stretch-y ) var( --dashed-padding-stretch-x ); }


/* 
 * Slant - Parallelograms leaning left and right.
 * Note: 	This is a GB Global Class with additional styling that cannot be
 * 			done through the GUI.  Styles through the GUI take precedence.
 */
:root {
	--slant-skew-left: 10deg;
	--slant-skew-right: -10deg;
}
.design-slant-left { align-items: center; transform: skew( var( --slant-skew-left ), 0 ); }
.design-slant-right { align-items: center; transform: skew( var( --slant-skew-right ), 0 ); }
.design-slant-hover { transition: all 0.25s ease; }
.design-slant-left.design-slant-hover:focus, .design-slant-left.design-slant-hover:hover { transform: skew( var( --slant-skew-right ), 0 ); }
.design-slant-right.design-slant-hover:focus, .design-slant-right.design-slant-hover:hover { transform: skew( var( --slant-skew-left ), 0 ); }


/* 
 * Trail -	Double lines prepended to the Text.
 * Note: 	This class is shared with a GB Global Class.
 */
:root {
	--trail-shift-major: -1400px;
	--trail-shift-minor: -0.5em;
	--trail-skew: -10deg;
}
.design-trail {
	align-items: center;
	display: flex;
	position: relative;
}
.design-trail::before {
	background-image:
		repeating-linear-gradient(
			to bottom,
			transparent 0%, transparent 20%,
			currentColor 20%, currentColor 40%,
			transparent 40%, transparent 60%,
			currentColor 60%, currentColor 80%,
			transparent 80%, transparent 100%
		);
	content: '';
	height: 0.75em;
	margin-right: 0.1em;
	transform: skew( var( --trail-skew ), 0 );
	transition: all 0.25s ease;
	width: 1.25em;
}
.design-trail-hover:hover::before {
	transform: skew( var( --trail-skew ), 0 ) translateX( var( --trail-shift-minor ) );
}
.design-trail-animate {
	animation: trail-animation 0.75s ease-out 0s 1 normal backwards;
}
@keyframes trail-animation {
	from { transform: skew( var( --trail-skew ), 0 ) translateX( var( --trail-shift-major ) ); opacity: 0; }
	50% { opacity: 0; }
	to { transform: skew( var( --trail-skew ), 0 ) translateX( 0 ); opacity: 1; }
}



/*/////////////////////////
 * CLASS: LAYOUTS
 */

/*
 * Masonry is not supported by the Grid Block or in the Query Loop, so we must support
 * it manually in this manner.
 * 
 * Reference:
 * https://www.gmitropapas.com/generatepress-tips-and-tricks/generateblocks/generateblocks-query-loop-and-grid-masonry-layout/
 * 
 * Note:
 * One suggestion from the original author is to change the selectors from 'x-masonry' to '#page .x-masonry'.  However,
 * I prefer to not limit the use of masonry to pages and do not want to dirty this up with other selectors, so I am
 * intentionally using '!important' where necessary.
 */
:root {
	--masonry-gap: 1em;
	--masonry-columns: 3;
	--masonry-columns-tablet: 2;
	--masonry-columns-mobile: 1;
}
.layout-masonry-less {
	--masonry-columns: 2;
}
.layout-masonry-more {
	--masonry-columns: 4;
}
.layout-masonry, .layout-masonry-less, .layout-masonry-more {
	column-count: var( --masonry-columns );
	column-gap: var( --masonry-gap );
	display: block !important;
}
.layout-masonry > div, .layout-masonry-less > div, .layout-masonry-more > div {
	display: inline-block;
	margin-bottom: var( --masonry-gap );
	width: unset !important;
}
@media ( max-width: 1024px ) {
	.layout-masonry, .layout-masonry-less, .layout-masonry-more {
		column-count: var( --masonry-columns-tablet );
	}
}
@media ( max-width: 767px ) {
	.layout-masonry, .layout-masonry-less, .layout-masonry-more {
		column-count: var( --masonry-columns-mobile );
	}
}


/*
 * The Polaroid layout is intended to place a photo or some sort of content, typically in a square aspect ratio,
 * towards the top of a white rectangle.  There is large padding at the bottom for text.  Since we use this layout
 * in several places on the site, we are standardizing through the CSS.  For use on a Container.
 */
:root {
	--polaroid-padding: 1.25em;
	--polaroid-padding-tablet: 1em;
	--polaroid-padding-mobile: 0.75em;
}
.layout-polaroid {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	padding: var( --polaroid-padding );
	row-gap: var( --polaroid-padding );
}
@media ( max-width: 1024px ) {
	.layout-polaroid {
		padding: var( --polaroid-padding-tablet );
		row-gap: var( --polaroid-padding-tablet );
	}
}
@media ( max-width: 767px ) {
	.layout-polaroid {
		padding: var( --polaroid-padding-mobile );
		row-gap: var( --polaroid-padding-mobile );
	}
}



/*/////////////////////////
 * CLASS: PATTERNS
 */

/* 
 * Band - A striping design.
 * Note: This class is shared with a GB Global Class.
 */
.pattern-band {
	background-image:
		linear-gradient(
			to bottom,
			var( --pog-black-off ) 0%, var( --pog-black-off ) 30%,
			var( --pog-olive-dark ) 30%, var( --pog-olive-dark ) 38%,
			var( --pog-olive-light ) 38%, var( --pog-olive-light ) 42%,
			var( --pog-white-off ) 42%, var( --pog-white-off ) 56%,
			var( --pog-peach ) 56%, var( --pog-peach ) 70%,
			var( --pog-black-off ) 70%, var( --pog-black-off ) 100%
		);
}
.pattern-band-full {
	background-image:
		linear-gradient(
			to bottom,
			var( --pog-olive-dark ) 0%, var( --pog-olive-dark ) 20%,
			var( --pog-olive-light ) 20%, var( --pog-olive-light ) 30%,
			var( --pog-white-off ) 30%, var( --pog-white-off ) 65%,
			var( --pog-peach ) 65%, var( --pog-peach ) 100%
		);
}


/* 
 * Dither - a dotted pattern with a retro feel, largely for use with Containers.
 * Note: This class is shared with a GB Global Class.
 * References:
 * 		https://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/
 * 		https://css-irl.info/css-halftone-patterns/
 * 		https://codepen.io/thebabydino/pen/gOpMeWv
 */
:root {
	--dither-color: currentColor;
	--dither-mask-alpha: 1.0;
	--dither-pitch-100: 1em;
	--dither-pitch-75: 0.75em;
	--dither-pitch-50: 0.5em;
	--dither-pitch-25: 0.25em;
	--dither-pos: calc( var( --dither-pitch-100 ) / 2 );
	--dither-stop-1: 0.1em;
	--dither-stop-2: 0.7em;
	--dither-stop-2-alt: 0.1em;
}
.pattern-dither, .pattern-dither-25, .pattern-dither-50, .pattern-dither-75, .pattern-dither-100 {
	background-image: radial-gradient( circle at center, var( --dither-color ) var( --dither-stop-1 ), transparent var( --dither-stop-2 ) );
	background-position: 0 0, var( --dither-pos ) var( --dither-pos );
	background-repeat: round;
	background-size: var( --dither-pitch-100 ) var( --dither-pitch-100 );
	mask-image: linear-gradient( var( --dither-color ), rgb( 0 0 0 / var( --dither-mask-alpha ) ) );
}
.pattern-dither-25, .pattern-dither-50, .pattern-dither-75, .pattern-dither-100 {
	background-image: radial-gradient( circle at center, var( --dither-color ) var( --dither-stop-1 ), transparent var( --dither-stop-2-alt ) );
}
.pattern-dither-25 { background-size: var( --dither-pitch-25 ) var( --dither-pitch-25 ); }
.pattern-dither-50 { background-size: var( --dither-pitch-50 ) var( --dither-pitch-50 ); }
.pattern-dither-75 { background-size: var( --dither-pitch-75 ) var( --dither-pitch-75 ); }
.pattern-dither-100 { background-size: var( --dither-pitch-100 ) var( --dither-pitch-100 ); }


/* 
 * Icon - A stripe of repeating icons.
 * Note: This class is shared with a GB Global Class.
 */
.pattern-icon, .pattern-icon-pin, .pattern-icon-plane {
	background-position: center;
	background-repeat: repeat-x;
}
.pattern-icon, .pattern-icon-plane {
	background-image:
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M552 264C582.9 264 608 289.1 608 320C608 350.9 582.9 376 552 376L424.7 376L256 560L176 560L237.3 376L137.6 376L80 448L32 448L64 320L32 192L80 192L137.6 264L237.3 264L176 80L256 80L424.7 264L552 264z"></path></svg>');
}
.pattern-icon-plane-white {
	background-image:
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="white"><path d="M552 264C582.9 264 608 289.1 608 320C608 350.9 582.9 376 552 376L424.7 376L256 560L176 560L237.3 376L137.6 376L80 448L32 448L64 320L32 192L80 192L137.6 264L237.3 264L176 80L256 80L424.7 264L552 264z"></path></svg>');
}
.pattern-icon-pin {
	background-image:
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M128 252.6C128 148.4 214 64 320 64C426 64 512 148.4 512 252.6C512 403.4 320 592 320 592C320 592 128 403.4 128 252.6zM320 320C355.3 320 384 291.3 384 256C384 220.7 355.3 192 320 192C284.7 192 256 220.7 256 256C256 291.3 284.7 320 320 320z"></path></svg>');
}
.pattern-icon-animate {
	animation: icon-animation 600s linear 0s infinite normal none;
}
@keyframes icon-animation {
	from { background-position: 0 0; }
	to { background-position: 10000% 0; }
}


/* 
 * Ribbon - a striped pattern with a retro feel, largely for use with Containers.
 * Note: This class is shared with a GB Global Class.
 * References:
 * 		https://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/
 */
:root {
	--ribbon-angle: 135deg;
	--ribbon-color: currentColor;
	--ribbon-stop-1: 0.2em;
	--ribbon-stop-2: 0.2em;
}
.pattern-ribbon, .pattern-ribbon-alt, .pattern-ribbon-alt-2 {
	background-image:
		repeating-linear-gradient(
			var( --ribbon-angle ),
			transparent
				calc( ( var( --ribbon-stop-1 ) * 0 ) + ( var( --ribbon-stop-2 ) * 0 ) )
				calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) ),
			var( --ribbon-color )
				calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) )
				calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 1 ) )
		);
}
.pattern-ribbon-alt, .pattern-ribbon-alt-2 {
	--ribbon-stop-1: 2em;
	--ribbon-stop-2: 2em;
}
.pattern-ribbon-alt-2 {
	--ribbon-angle: -135deg;
}
.pattern-ribbon-rainbow {
	/* Note: The two stop variables must add to 16.67% (or 1/6) since there are 6 colors involved. */
	--ribbon-stop-1: 15%;
	--ribbon-stop-2: 1.67%;
	background: repeating-linear-gradient(
		var( --ribbon-angle ), 
		var( --pink-dark )
			calc( ( var( --ribbon-stop-1 ) * 0 ) + ( var( --ribbon-stop-2 ) * 0 ) )
			calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) )
			calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 1 ) ),
		var( --orange-dark )
			calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 1 ) )
			calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 1 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 1 ) )
			calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 2 ) ),
		var( --yellow-dark )
			calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 2 ) )
			calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 2 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 2 ) )
			calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 3 ) ),
		var( --green-dark )
			calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 3 ) )
			calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 3 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 3 ) )
			calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 4 ) ),
		var( --blue-dark )
			calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 4 ) )
			calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 4 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 4 ) )
			calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 5 ) ),
		var( --purple-dark )
			calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 5 ) )
			calc( ( var( --ribbon-stop-1 ) * 6 ) + ( var( --ribbon-stop-2 ) * 5 ) ),
		var( --ribbon-color )
			calc( ( var( --ribbon-stop-1 ) * 6 ) + ( var( --ribbon-stop-2 ) * 5 ) )
			calc( ( var( --ribbon-stop-1 ) * 6 ) + ( var( --ribbon-stop-2 ) * 6 ) )
	);
}


/* 
 * Slant - A striping design, but angled.
 * Note: This class is shared with a GB Global Class.
 * References:
 * 		https://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/
 */
:root {
	--slant-angle: 120deg;
	--slant-color: currentColor;
	/* Note: The two stop variables must add to 16.67% (or 1/6) since there are 6 colors involved. */
	--slant-stop-1: 15%;
	--slant-stop-2: 1.67%;
}
.pattern-slant {
	background-image:
		repeating-linear-gradient(
			var( --slant-angle ),
			transparent
				calc( ( var( --slant-stop-1 ) * 0 ) + ( var( --slant-stop-2 ) * 0 ) )
				calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 0 ) ),
			var( --slant-color )
				calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 0 ) )
				calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 1 ) )
		);
}
.pattern-slant-rainbow {
	background: repeating-linear-gradient(
		var( --slant-angle ), 
		var( --pog-peach-light )
			calc( ( var( --slant-stop-1 ) * 0 ) + ( var( --slant-stop-2 ) * 0 ) )
			calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 0 ) ),
		var( --slant-color )
			calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 0 ) )
			calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 1 ) ),
		var( --pog-peach )
			calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 1 ) )
			calc( ( var( --slant-stop-1 ) * 2 ) + ( var( --slant-stop-2 ) * 1 ) ),
		var( --slant-color )
			calc( ( var( --slant-stop-1 ) * 2 ) + ( var( --slant-stop-2 ) * 1 ) )
			calc( ( var( --slant-stop-1 ) * 2 ) + ( var( --slant-stop-2 ) * 2 ) ),
		var( --pog-peach-dark )
			calc( ( var( --slant-stop-1 ) * 2 ) + ( var( --slant-stop-2 ) * 2 ) )
			calc( ( var( --slant-stop-1 ) * 3 ) + ( var( --slant-stop-2 ) * 2 ) ),
		var( --slant-color )
			calc( ( var( --slant-stop-1 ) * 3 ) + ( var( --slant-stop-2 ) * 2 ) )
			calc( ( var( --slant-stop-1 ) * 3 ) + ( var( --slant-stop-2 ) * 3 ) ),
		var( --pog-olive-light )
			calc( ( var( --slant-stop-1 ) * 3 ) + ( var( --slant-stop-2 ) * 3 ) )
			calc( ( var( --slant-stop-1 ) * 4 ) + ( var( --slant-stop-2 ) * 3 ) ),
		var( --slant-color )
			calc( ( var( --slant-stop-1 ) * 4 ) + ( var( --slant-stop-2 ) * 3 ) )
			calc( ( var( --slant-stop-1 ) * 4 ) + ( var( --slant-stop-2 ) * 4 ) ),
		var( --pog-olive )
			calc( ( var( --slant-stop-1 ) * 4 ) + ( var( --slant-stop-2 ) * 4 ) )
			calc( ( var( --slant-stop-1 ) * 5 ) + ( var( --slant-stop-2 ) * 4 ) ),
		var( --slant-color )
			calc( ( var( --slant-stop-1 ) * 5 ) + ( var( --slant-stop-2 ) * 4 ) )
			calc( ( var( --slant-stop-1 ) * 5 ) + ( var( --slant-stop-2 ) * 5 ) ),
		var( --pog-olive-dark )
			calc( ( var( --slant-stop-1 ) * 5 ) + ( var( --slant-stop-2 ) * 5 ) )
			calc( ( var( --slant-stop-1 ) * 6 ) + ( var( --slant-stop-2 ) * 5 ) ),
		var( --slant-color )
			calc( ( var( --slant-stop-1 ) * 6 ) + ( var( --slant-stop-2 ) * 5 ) )
			calc( ( var( --slant-stop-1 ) * 6 ) + ( var( --slant-stop-2 ) * 6 ) )
	);
}



/*/////////////////////////
 * CLASS: _COMMON
 */

/*
 * GB does not support several positions in their backend due to Gutenberg difficulties.
 * The suggested solution is to create a class until they can figure out how to make
 * Gutenberg respond properly.
 * https://generate.support/topic/how-to-position-absolute/
 */
.x-absolute {
	position: absolute;
}

/* GB does not have a GUI to balance multi-line headlines. */
.x-balance {
	text-wrap: balance;
}

/* 
 * Visually count a number between two ends of a range.
 * https://css-tricks.com/animating-number-counters/
 * 
 * Since attr() is not supported on all browsers, options
 * must be added through custom variables, as follows:
 * --counter-delay (the amount of time to wait until the counter starts)
 * --counter-duration (how long it takes to perform the counting animation)
 * --counter-stop-1 (the starting value of the counter)
 * --counter-stop-2 (the ending value of the counter)
 */
@property --counter-num {
	syntax: '<integer>';
	initial-value: 1;
	inherits: false;
}
.x-counter {
	--counter-delay: 0s;
	--counter-duration: 5s;
	--counter-stop-1: 434;
	--counter-stop-2: 5;
	animation: counter-animation var( --counter-duration ) linear var( --counter-delay ) 1 forwards;
	counter-reset: counter-num var( --counter-num );
}
.x-counter::after {
	content: counter( counter-num );
}
@keyframes counter-animation {
	from { --counter-num: var( --counter-stop-1 ); }
	to { --counter-num: var( --counter-stop-2 ); }
}

/* Truncate text and append an ellipsis. */
.x-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.x-ellipsis-multi {
	box-orient: vertical;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	line-claamp: 2;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


/*
 * At first, I thought that Conditions did not work for GB Blocks in GB, but then
 * I found a setting to activate them under GenerateBlocks >> Settings.  So, might
 * as well keep these classes here.
 */
body:not(.wp-admin).logged-in .x-hide-when-logged-in { display: none; }
body:not(.wp-admin):not(.logged-in) .x-hide-when-logged-out { display: none; }


/*
 * Force something to not wrap.
 * Note: I did not initally comment this and do not remember what it was for.
 */
.x-nowrap {
	white-space: nowrap;
}

/* Shrink something. */
.x-smallprint {
	zoom: 0.75;
}

/* Animate crossing out text. */
.x-strike {
	position: relative; 
}
.x-strike::after {
	animation: strike-animation 100ms linear 0.3s 1 forwards;
	background-color: var( --pink-light );
	content: '';
	height: 0.15em;
	left: -3%;
	opacity: 100%;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 0;
	z-index: 99;
}
@keyframes strike-animation { 
	to { width: 106%; } 
}

/* Some of the regular <p>/<span> text can be adjusted from regular body copy. */
.x-subheading {
	line-height: 1.1em;
	text-transform: uppercase;
}

/* In some cases, the default wavy line on links can look strange. */
.x-underline-none a {
	text-decoration: none;
}



/*/////////////////////////
 * SPECIAL
 */

/* 
 * Visually change up the ranking headline.
 */
.rank-headline {
	--rank-headline-background-color: var( --yellow-dark );
	--rank-headline-shadow-blur: 0;
	--rank-headline-shadow-color: var( --pink );
	--rank-headline-shadow-offset: 4px;
	--rank-headline-text-color: var( --white );
	background-color: var( --rank-headline-background-color );
	color: var( --rank-headline-text-color );
	text-shadow: var( --rank-headline-shadow-color ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-blur );
}
.rank-headline .start {
	font-size: 0.8em;
	vertical-align: bottom;
}
.rank-headline .prefix {
	font-size: 0.67em;
	vertical-align: bottom;
}
.rank-headline .end {
	position: relative;
}
.rank-headline .end-world {
	animation-name: headShake, hinge;
	animation-delay: 5s, 5.5s;
	animation-duration: 0.5s, 2s;
	animation-fill-mode: both;
	display: inline-block;
	font-size: 0.95em;
	transform-origin: center left;
	vertical-align: bottom;
}
.rank-headline .end-mom {
	animation-name: fadeIn, tada;
	animation-delay: 7.5s, 9s;
	animation-duration: 1.5s, 2s;
	animation-fill-mode: both;
	color: var( --rank-headline-shadow-color );
	display: inline-block;
	font-weight: bold;
	left: 0;
	position: absolute;
	text-shadow: var( --rank-headline-text-color ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-blur );
}

/*
 * The Bonus soundboard needs a little love.
 */
.sound-trigger {
	cursor: pointer;
}



/*/////////////////////////
 * FIXES
 */

/* The off-canvas panel is being forced to have white text. */
.slideout-navigation .off-canvas-social-bar a {
	color: var( --black );
}

/*
 * Featherlight has security issues and is no longer updated by the author.  As such, the popup
 * video now goes through GB Overlay Panels.  Assuming a YT Embed Video with class "pop-video"
 * (can be in an optional parent GB Container), the following code makes it so that the video
 * displays in a 16:9 ratio on all device widths - tested especially on the extremes.
 * 
 * Note:	This was very challenging to make work.  The YT Embed Block hardcodes width=1200 and
 * 			height=675 as HTML attributes - not as CSS.  As such, the heights of all child elements
 * 			that YT Embed Block produces must be explicitly set to ignore those HTML attributes.
 * 
 * Note:	Also, the "85dvh" is a magic number wrt the X close button not going outside the screen.
 */
.pop-video {
	aspect-ratio: 16 / 9;
	height: 100%;
	max-height: 85dvh;
	max-width: 85vw;
	overflow: clip;
}
.pop-video > div {
	height: 100%;
}
.pop-video > div > iframe {
	height: 100%;
	max-height: 85dvh;
}

/*
 * Browsers use their own default black on the <body> when the <html> color is not set; so set it here for the patterns.
 * Note: Search for "css currentColor on <body> is always black" on Google.
 */
body.pattern-dither, body.pattern-dither-25, body.pattern-dither-50, body.pattern-dither-75, body.pattern-dither-100 {
	--dither-color: var( --pog-white-off );
}
body.pattern-slant {
	--slant-color: var( --pog-white-off );
}

/*
 * The Square CC fields on /checkout sometimes vertically truncate on tablet/mobile.
 */
@media ( max-width: 1024px ) {
	.wp-block-woocommerce-checkout .sq-card-iframe-container,
	.wp-block-woocommerce-checkout iframe.sq-card-component { height: 100% !important; }
	.wp-block-woocommerce-checkout iframe.sq-card-component { display: block; }
}