:root {

	/* SIDEBAR LAYOUT */
	--sidebar-width: 30%;
	--sidebar-padding-right: 20px;
	--sidebar-content-max-width: 1336px;

	/* WIDGETS */
	--widget-gap: var(--space-large);
	--widget-border: 1px solid var(--gray-light);

	/* Toggle buttons and filter chip icon gap */
	--widget-icon-offset: 0.5em;

	/* FILTER CHIPS */
	--filter-chip-border-radius: 1.5em;
	--upsell-header-font: var(--heading-medium);
}

/* stylelint-disable selector-id-pattern */

/* ── woocommerce-base.css ─────────────────────────────────────────────────── */

.woocommerce-page .entry-header-wrapper,
.woocommerce-page .entry-content-wrapper,
.woocommerce-page .entry-footer-wrapper {
	max-width: var(--max-width-wide);
}

.woocommerce-notices-wrapper {
	padding: 0 var(--gutter-width);
	margin: var(--space-small) auto;
}

/* My Account (not logged in), Cart, Checkout pages */
.entry-content .woocommerce-notices-wrapper {
	padding: 0;
	min-width: 100%;
	margin-top: 0;
}

/* This can exist on the page even when unused (my-account page not logged in) */
.woocommerce-notices-wrapper:empty {
	margin: 0;	
}

.woocommerce-MyAccount-content .woocommerce-notices-wrapper {
	margin: 0;
}

.wc-block-product-filter-checkbox-list__items label.wc-block-product-filter-checkbox-list__label {
    font-weight: var(--typeface-weight-regular);
}

/**
 * WC Messages & Notices
 */
.woocommerce-message, /* Single product, after adding to cart */
.woocommerce-info, /* Cart Notices, Checkout Returning User & Coupon */
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	margin-top: 0;
	margin-bottom: var(--space-large);
	padding: var(--space-small) var(--space-medium);
	border: 1px solid rgba(0, 0, 0, 0.125);
	background-color: var(--gray-xlight);
	border-radius: var(--border-radius);
	overflow: hidden;
}

.woocommerce-info {
	margin-top: var(--space-large);	
}

/* Sometimes messages show up inside the cart form - very strange indeed... */
.woocommerce-cart-form .woocommerce-info {
	margin-top: 0;	
}

/* Shows up after coupon applied successfully */
.woocommerce-form-coupon-toggle + .woocommerce-message,
.woocommerce-form-coupon-toggle + .woocommerce-error {
	margin-top: var(--space-large);	
}

.woocommerce-error {
	list-style: none;
}

.woocommerce-NoticeGroup-checkout ul.woocommerce-error::before {
	content: 'Checkout Errors:';
	display: block;
}

/* Should .button links always be floated right like this? */
.woocommerce-Message .button,
/* Single Product after adding to cart */
.woocommerce-message .button,
/* If using WC Cart Notices plugin */
.woocommerce-cart-notice .button {  
	float: right;
	margin-left: 0.25em;
}

.woocommerce-Message .button,
.woocommerce-message .button,
.woocommerce-cart-notice::after {
	content: '';
	display: block;
	clear: both;	
}

.woocommerce-message::before {
	font: var(--wc-icon-font);
	-webkit-font-smoothing: var(--icon-webkit-font-smoothing, antialiased);
	-moz-osx-font-smoothing: var(--icon-moz-osx-font-smoothing, grayscale);
	content: var(--icon-wc-notice-success);
	color: var(--color-success);
}

.shop_table:not(.cart) .button {
	padding-top: 0;
	padding-bottom: 0;
	margin-left: var(--space-xxsmall);
}

.variation {
	margin: 0;
}

.variation dt,
.variation dd {
	display: inline;
}

.variation dt {
	margin-right: 0.25em;	
}

.variation dd {
	margin: 0;
}

.variation p {
	margin: 0;
	display: inline;
}

.variation dd::after {
	content: "\A";
	white-space: pre;	
}

/**
 * Star rating
 */
.star-rating {
	overflow: hidden;
	position: relative;
	height: 1.618em;
	width: 5.3em;
	font: var(--star-icon-font);
	-webkit-font-smoothing: var(--icon-webkit-font-smoothing, antialiased);
	-moz-osx-font-smoothing: var(--icon-moz-osx-font-smoothing, grayscale);
}

.star-rating::before {
	content: "\53\53\53\53\53";
	opacity: .25;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
}

.star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "\53\53\53\53\53";
	top: 0;
	position: absolute;
	left: 0;
	color: var(--color-primary);
}

p.stars a {
	position: relative;
	height: 1em;
	width: 1em;
	text-indent: -999em;
	display: inline-block;
	text-decoration: none;
	margin-right: 1px;
}

p.stars a::before {
	font: var(--star-icon-font);
	-webkit-font-smoothing: var(--icon-webkit-font-smoothing, antialiased);
	-moz-osx-font-smoothing: var(--icon-moz-osx-font-smoothing, grayscale);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1em;
	height: 1em;
	content: "\53";
	color: var(--color-neutral-800);
	text-indent: 0;
	opacity: .25;
}

p.stars a:hover ~ a::before {
	content: "\53";
	color: var(--color-neutral-800);
	opacity: .25;
}

p.stars:hover a::before {
	content: "\53";
	color: var(--color-primary);
	opacity: 1;
}

p.stars.selected a.active::before {
	content: "\53";
	color: var(--color-primary);
	opacity: 1;
}

p.stars.selected a.active ~ a::before {
	content: "\53";
	color: var(--color-neutral-800);
	opacity: .25;
}

p.stars.selected a:not(.active)::before {
	content: "\53";
	color: var(--color-primary);
	opacity: 1;
}

/**
 * Password strength meter
 */
.woocommerce-password-strength {
	text-align: right;
}

.woocommerce-password-strength.strong {
	color: var(--color-success);
}

.woocommerce-password-strength.short {
	color: var(--color-warning-100);
}

.woocommerce-password-strength.bad {
	color: var(--color-error);
}

.woocommerce-password-strength.good {
	color: var(--color-correct);
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
	box-shadow: inset 2px 0 0 var(--color-form-success);
}

.form-row.woocommerce-invalid input.input-text {
	box-shadow: inset 2px 0 0 var(--color-form-error);
}

.required {
	color: var(--color-form-error);
}

/* Free-gift-notice styles moved to wc-cart-notices plugin: assets/css/cart-notices.css */

.woocommerce-info[data-type="swell"] {
	border-color: var(--dark_red);
}

/* ===== UPSELLS / RELATED / CROSS-SELLS PRODUCT GRID ===== */

.upsells .products,
.related .products,
.cross-sells .products {
	margin-top: var(--space-xlarge);

	@media (min-width: 75em) {
		grid-template-columns: repeat(4, 1fr); /* 4 columns */
	}
}

.upsells > h2,
.related > h2,
.cross-sells > h2 {
	font: var(--upsell-header-font);
}

/* ── woocommerce-shop.css ─────────────────────────────────────────────────── */

.woocommerce.archive,
.woocommerce.post-type-archive-product {
	--ftps-gutter-width: 0;
}

@media (max-width: 75em) {

	.woocommerce.archive,
	.woocommerce.post-type-archive-product {
		--ftps-gutter-width: var(--gutter-width);
	}
}

.woocommerce-products-header {
	padding: 0 var(--gutter-width);
	margin: var(--space-large) auto;
}

/**
 * Product Archives
 */
.position-wc_archive_before_content .page-section {
	margin: var(--space-large) 0;	
}

/* WC product Result Count and Orderby form */
.product-results-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

p.woocommerce-result-count {
	margin: 0;
	line-height: 40px; /* Magic Number? - Matches the height of the select box */	
}

ul.product-categories,
ul.product-categories ul,
ul.woocommerce-widget-layered-nav-list {
	list-style: none;
	padding: 0;	
}

ul.product-categories a,
ul.woocommerce-widget-layered-nav-list a {
	padding-left: 1.5em;
	position: relative;
}

ul.product-categories a::before,
ul.woocommerce-widget-layered-nav-list a::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 1em;
	height: 1em;
	border: 1px solid var(--gray-light);
	transform: translateY(-50%);
}

ul.product-categories .current-cat-parent > a::after,
ul.product-categories .current-cat > a::after,
ul.woocommerce-widget-layered-nav-list .chosen a::after {
	font: var(--icon-font);
	-webkit-font-smoothing: var(--icon-webkit-font-smoothing, antialiased);
	-moz-osx-font-smoothing: var(--icon-moz-osx-font-smoothing, grayscale);
	content: var(--icon-ftm-check);
	display: block;
	position: absolute;
	left: 0.125em;
	top: 50%;
	transform: translateY(-50%);
}

ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
    grid-gap: var(--space-medium);
	grid-template-columns: repeat(2, 1fr);
}

ul.products li.product,
div.product {
	position: relative;
}

li.product .onsale,
div.product .onsale {
	position: absolute;
	z-index: 9;
	top: 0;
	background-color: var(--color-primary);
	border-radius: 0 0 4px 4px;
	border-radius: 4px;
	color: var(--color-text-inverse);
	display: flex;
	font: var(--label-small);
	left: 7px;	padding: 5px;
	transform: translateY(-50%);
}

.woocommerce-LoopProduct-link {
	color: inherit;
	text-decoration: none;	
}

.woocommerce-loop-product__title {
	font: var(--label-large);
	font-weight: var(--typeface-weight-body-bold);
}

/* Product images */
.product img {
	width: 100%;
	height: auto; 
}

@keyframes infinite-spinning {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
}

.archive-add-to-cart-button-text {
	white-space: nowrap;
	text-transform: capitalize;	
}

.ajax_add_to_cart.loading .archive-add-to-cart-button-text,
.ajax_add_to_cart.added .archive-add-to-cart-button-text {
	font-size: 0;
}	

.ajax_add_to_cart.loading::before {
	content: 'Adding';	
}

.ajax_add_to_cart.added::before {
	content: attr(data-already-in-cart-text);
	white-space: nowrap;	
}

.ajax_add_to_cart::after {
	content: var(--icon-wc-spinner);
	font: var(--wc-icon-font);
	-webkit-font-smoothing: var(--icon-webkit-font-smoothing, antialiased);
	-moz-osx-font-smoothing: var(--icon-moz-osx-font-smoothing, grayscale);
	position: absolute;
	opacity: 0;
	display: inline-block;
	margin-left: 1em;
	transform: rotate(0);
}

.ajax_add_to_cart.loading::after {
	position: static;
	opacity: 1;
	content: var(--icon-wc-spinner);
	animation: infinite-spinning 1s infinite;
	
}

.ajax_add_to_cart.added::after {
	position: static;
	opacity: 1;
	content: var(--icon-wc-checkmark);
}

/* link that appears */
.added_to_cart.wc-forward {
	display: inline-block;
	text-decoration: none;
	font: var(--body-small);
}

/**
 * WooCommerce widgets
 */

 /* 6-1-19 - This still needs to be reworked... */
.widget_price_filter .price_slider {
	margin-bottom: 1.5em;
}

.widget_price_filter .price_slider_amount {
	text-align: right;
	line-height: 2.4;
}

.widget_price_filter .price_slider_amount .button {
	float: left;
	line-height: normal;
}

.widget_price_filter .ui-slider {
	position: relative;
	text-align: left;
}

.widget_price_filter .ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	cursor: ew-resize;
	outline: none;
	background: var(--color-primary);
	box-sizing: border-box;
	margin-top: -.25em;
	opacity: 1;
}

.widget_price_filter .ui-slider .ui-slider-handle:last-child {
	margin-left: -1em;
}

.widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
	box-shadow: var(--shadow-selection-soft);
}

.widget_price_filter .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	display: block;
	border: 0;
	background: var(--color-primary);
	border-radius: 0.5em;
}

.widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: var(--color-overlay-soft);
}

.widget_price_filter .ui-slider-horizontal {
	height: .5em;
}

.widget_price_filter .ui-slider-horizontal .ui-slider-range {
	height: 100%;
}

ul.products .see-details {
	display: inline-block;
	margin-left: var(--space-small);
	margin-top: var(--space-xxsmall);
	margin-bottom: var(--space-xxsmall);
	text-decoration: underline;
}

.added_to_cart {
	display: none !important;
}

/* 3-18-21 - Retired buttons are inverted (these only show in searches) */
.product_tag-retired-designs a.button {
	background-color: var(--color-white);
	border: 1px solid currentcolor;
	color: var(--color-primary);
}

a.product-details {
	color: var(--color-neutral-800, inherit);
	padding-right: 20px;
	text-decoration: underline;
}

span.only-x-left-text {
	margin-left: var(--space-xxxsmall);
}

/* We're adding a custom badge to anything in the Exclusives category */
li.product .onsale.exclusive,
div.product .onsale.exclusive {
	background-color: var(--color-secondary-500);
}

.onsale.exclusive .ftmicon-heart {
	font-size: 0.875em;
	margin-right: 5px;
}

/* If they're both showing we'll need to reposition one */
.sale li.product .onsale.exclusive,
.sale div.product .onsale.exclusive {
	left: 60px;
}

h2.woocommerce-loop-product__title {
	margin: var(--xspace-small) 0 0;
}

ul.products .price {
	font: var(--label-large);
	font-weight: var(--typeface-weight-body-bold);
	margin-bottom: var(--space-xxsmall);
	margin-top: 0;

}

.woocommerce-Price-currencySymbol {
		font-size: 0.75em;
		vertical-align: top;
	}

/* 4-28-22 - "Site Improvements" - Change product grid heading styles to match homepage product grid heading styles. */
.products > h2 {
	text-align: center;

}

.products > h2::after {
	background-image: url(../images/zig-zag.svg);
	content: "";
	display: block;
	height: 6px;
	margin: var(--space-small) auto;
	width: 70px;
}

@media (min-width: 37.5em) {

	ul.products {
		column-gap: 24px;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 60px;
	}

}

ul.products .price,
.archive-post.product .price {
	align-items: baseline;
	display: flex;
	font: var(--label-large);
	font-weight: var(--typeface-weight-body-bold);
	justify-content: flex-start;
}

/*
 * Show the sale price before the "Reg" price without reversing the whole
 * flex row. Using `order` on the sale price (instead of `flex-direction:
 * row-reverse`) keeps the natural source order for non-sale prices, so a
 * Subscription price like "$249.00 / year" no longer renders as "/ year$249.00".
 */
.price ins {
	order: -1;
	text-decoration: none;
}

.price del {
	color: var(--color-neutral-400);
	font: var(--label-small);
	line-height: 1.5;
	margin-left: 0.5em;
	text-decoration: none;
}

.price del::before {
	content: "Reg ";
}


.wc-product-columns .ftm-posts-pagination-nav {
	border-bottom: 1px solid var(--color-neutral-200);
}

.wc-product-columns .ftm-posts-pagination-nav-inner {
	padding-bottom: var(--space-large);
	padding-top: var(--space-large);
}

.wp-block-woocommerce-product-filter-price {
    margin: 0 var(--space-small);
}

/*
 * When there is no pagination, the pagination nav (and its borders) is not
 * rendered, so the dividing border moves to the term description instead —
 * top border with a top margin only.
 */
.wc-product-columns ul.products + .term-description {
	border-top: 1px solid var(--color-neutral-200);
	margin-top: var(--space-xlarge);
	padding-top: var(--space-small);
}

@media (min-width: 75em) {

	/* Shop archives go to 3 columns */
	ul.products {
		grid-template-columns: repeat(3, 1fr);
	}

}

@media (min-width: 64em) {

	.product-results-inner {
		justify-content: flex-end;
	}

	.product-results .woocommerce-ordering {
		margin-left: var(--space-xlarge);
	}

	.wc-product-columns .ftm-posts-pagination-nav {
		margin-bottom: 0;
	}

}

/* ===== SITE ASIDE ===== */

.site-aside {
	padding: 0 var(--gutter-width);

	@media (min-width: 64em) {
		clear: left;
		float: left;
		padding-left: 0;
		padding-right: 3rem;
		width: var(--sidebar-width);
		margin-top: var(--space-xlarge);
	}
}

@media (min-width: 64em) {

	.woocommerce.archive .site-aside,
	.woocommerce.post-type-archive-product .site-aside {
		padding-left: var(--ftps-gutter-width);
	}

	.page-section.wc-product-columns {
		padding-left: 0;
	}
}

/* Clearfix — contains the floated .site-aside */
@media (min-width: 64em) {

	.site-main::after {
		clear: both;
		content: "";
		display: block;
	}
}

/* ===== PRODUCT FILTERS — mobile overlay trigger ===== */

/*
 * WooCommerce only switches the product-filters block to its drawer /
 * overlay mode at <= 600px. Our shop sidebar stops floating beside the
 * products at 64em, so between 600px and 64em the stock block would show
 * the full inline accordion stacked in a single column. Re-assert the
 * plugin's mobile drawer rules up to 64em so the collapsed "Filter
 * products" trigger appears as soon as the layout is single-column.
 *
 * The plugin's own rules are wrapped in :where() (zero specificity), so
 * the un-prefixed selectors below outrank them regardless of load order.
 */
@media (max-width: 63.99em) {

	/*
	 * Every selector below is paired with an .is-overlay-opened variant so
	 * it matches (and, loading later, beats) the plugin's own (0,2,0)
	 * open-state rules — a plain single-class rule would lose to those.
	 */

	/*
	 * Above 782px the plugin sets --top-padding to the admin-bar height var,
	 * which is undefined on the front end — leaving the fixed overlay with an
	 * invalid `top` (it renders off-screen). Mirror the plugin's <=782px
	 * definition so the drawer sits at the top of the viewport (and still
	 * clears the admin bar when one is present).
	 */
	.wc-block-product-filters {
		--top-padding: var(--adminbar-mobile-padding, 0);
	}

	/* Show the drawer chrome that the plugin hides above 600px. */
	.wc-block-product-filters .wc-block-product-filters__open-overlay,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__open-overlay,
	.wc-block-product-filters .wc-block-product-filters__overlay-header,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-header {
		display: flex;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-footer,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-footer {
		display: block;
	}

	/* Re-fix the overlay over the viewport. */
	.wc-block-product-filters .wc-block-product-filters__overlay,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
		position: fixed;
		inset: 0;
		top: var(--top-padding);
	}

	.wc-block-product-filters .wc-block-product-filters__overlay {
		pointer-events: none;
		background-color: transparent;
		transition: background-color 0.5s;
	}

	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
		background-color: rgba(95, 95, 95, 0.35);
		pointer-events: auto;
		z-index: 9999;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-wrapper,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-wrapper {
		width: 100%;
		height: 100%;
	}

	/* Slide-up dialog. */
	.wc-block-product-filters .wc-block-product-filters__overlay-dialog,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		position: absolute;
		background-color: var(--wc-product-filters-overlay-background-color, var(--wc-product-filters-background-color, var(--wp--preset--color--base, #fff)));
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-dialog {
		transform: translateY(100vh);
		transition: none;
	}

	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		transform: translateY(0);
		transition: transform 0.5s;
	}

	.wc-block-product-filters .wc-block-product-filters__overlay-content,
	.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-content {
		flex-grow: 1;
		overflow-y: scroll;
		padding: 0 var(--wp--preset--spacing--40);
	}

	/*
	 * Restyle the trigger to match the legacy "Show Filters" toggle:
	 * full-width, centred, bordered button. --gray-light (#dadada) and
	 * --border-radius (3px) match the legacy values.
	 */
	.wc-block-product-filters .wc-block-product-filters__open-overlay {
		justify-content: center;
		width: 100%;
		padding: 0.5rem 1rem;
		border: var(--widget-border);
		border-radius: var(--border-radius);
		font-weight: 700;
	}
}

/* ===== WIDGETS ===== */

.site-aside .widget {
	margin: var(--widget-gap) auto;

	h4 {
		margin-bottom: 0;
	}

	select {
		max-width: 100%;
	}
}

/* Up-sells & related products on single product pages */

.single-product .up-sells.products ul.products,
.single-product .related.products ul.products {
	column-gap: 1rem;
	row-gap: 1.25rem;

	@media (min-width: 40rem) {
		column-gap: 1.25rem;
		row-gap: 1.5rem;
	}
}

.single-product .up-sells.products li.product,
.single-product .related.products li.product {
	height: 100%;
}

.single-product .up-sells.products .woocommerce-LoopProduct-link,
.single-product .related.products .woocommerce-LoopProduct-link {
	display: block;
	flex: 1;
	margin-bottom: var(--space-small);
}

.single-product section.up-sells.upsells.products li.product,
.single-product section.related.products li.product {
	display: flex;
	flex-direction: column;
}