* {
	box-sizing: border-box;
}

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .5s;
}

:root {
	--page-width: 1400px;
	--double-gutter: calc(2 * var(--container-gutter));
	--container-width: calc(var(--page-width) + var(--double-gutter));
	--container-large-width: 90rem;
	--container-medium-width: 75rem;
	--container-small-width: 950px;
	--container-gutter: 1rem;

	--full-width-margin: calc(
  	(-1 * var(--container-gutter))
  	- max(0px, (100dvw - var(--container-width)) / 2)
	);

	--header-scroll-amount: 75px;

	--hero-overlay: linear-gradient(0deg, rgb(from var(--color-black) r g b / 0.80) 0%, rgb(from var(--color-black) r g b / 0.50) 20%, rgb(from var(--color-black) r g b / 0) 50%, rgb(from var(--color-black) r g b / 0) 80%, rgb(from var(--color-black) r g b / 0.50) 100%);
	--hero-overlay-blend-mode: multiply; 
	--hero-text-shadow: 0 2px 1px rgba(0, 0, 0, 0.50);

	--global-baseline: 8px;
	--spacing-xxs: 4px;
	--spacing-xs: 8px;
	--spacing-s: 16px;
	--spacing-m: 24px;
	--spacing-l: 32px;
	--spacing-xl: 40px;
	--spacing-xxl: 48px;

	--font-family-montserrat: Montserrat, serif;

	--font-family-headings: var(--font-family-montserrat);
	--font-family-body: var(--font-family-montserrat);
	--font-family-button: var(--font-family-headings);

	--font-weight-regular: 400;
	--font-weight-semi-bold: 600;
	--font-weight-bold: 700;

	--font-size-body-desktop: 1.125rem;
	--font-size-body-mobile: 1rem;
	--line-height-body-desktop: 1.3;
	--line-height-body-mobile: 1.3;
	--font-size-small: 14px;
	--line-height-small: 1.286;
	--font-size-medium: var(--font-size-h5-desktop);
	--font-size-medium-tablet: var(--font-size-h5-tablet);
	--line-height-medium: 1.5;
	--font-size-large: var(--h2-font-size);
	--line-height-large: 1.5;
	--font-size-extra-large: var(--h1-font-size);
	--line-height-extra-large: 1.5;
	--font-size-h1-desktop: 42px;
	--font-size-h1-mobile: 32px;
	--line-height-h1-desktop: 1.222;
	--line-height-h1-mobile: 1.222;
	--margin-bottom-h1: var(--spacing-l);
	--font-size-h2-desktop: 36px;
	--font-size-h2-mobile: 28px;
	--line-height-h2-desktop: 1.25;
	--line-height-h2-mobile: 1.25;
	--margin-bottom-h2: var(--spacing-m);
	--font-size-h3-desktop: 28px;
	--font-size-h3-mobile: 24px;
	--line-height-h3-desktop: 1.35;
	--line-height-h3-mobile: 1.35;
	--margin-bottom-h3: var(--spacing-s);
	--font-size-h4-desktop: 24px;
	--font-size-h4-mobile: 20px;
	--line-height-h4-desktop: 1.4;
	--line-height-h4-mobile: 1.4;
	--margin-bottom-h4: var(--spacing-s);
	--font-size-h5-desktop: 20px;
	--font-size-h5-mobile: 18px;
	--line-height-h5-desktop: 1.45;
	--line-height-h5-mobile: 1.45;
	--margin-bottom-h5: var(--spacing-s);
	--font-size-h6-desktop: 18px;
	--font-size-h6-mobile: 18px;
	--line-height-h6-desktop: 1.5;
	--line-height-h6-mobile: 1.5;
	--margin-bottom-h6: var(--spacing-xs);
	--font-size-primary-nav-desktop: 18px;
	--font-size-primary-nav-mobile: 20px;
	--font-size-footer-widget-title: 18px;
	--line-height-footer-widget-title: normal;

	--button-font-size: 1rem;
	--button-small-font-size: calc(var(--button-font-size) * .75);
	--button-line-height: 1.25;
	--button-small-line-height: 1;
	--button-letter-spacing: 0.005rem;
	--button-padding: 0.5rem 1.375rem;
	--button-small-padding: .875rem 1rem;
	--button-font-weight: 600;
	--button-background: var(--color-page-link);
	--button-background-hover: var(--color-page-link-hover);
	--button-border: unset;
	--button-border-radius: 0;
	--button-color: var(--color-white, #fff);
	--button-color-hover: var(--button-color);
	--button-text-transform: uppercase;
	--button-disabled-opacity: .5;

	--site-search-background: #fff;

	--heading-color: var(--color-heading-text, var(--color-black));
	--h1-color: var(--heading-color);
	--h2-color: var(--heading-color);
	--h3-color: var(--heading-color);
	--h4-color: var(--heading-color);
	--h5-color: var(--heading-color);
	--h6-color: var(--heading-color);

	--h1-font-size: clamp(1.5rem, 4dvw, 2.1875rem);
	--h2-font-size: clamp(1.4rem, 3.325dvw, 1.82rem);
	--h3-font-size: clamp(1.1875rem, 2.8dvw, 1.53rem);
	--h4-font-size: clamp(1rem, 2.35dvw, 1.285rem);
	--h5-font-size: clamp(.85rem, 2dvw, 1.1rem);
	--h6-font-size: clamp(.72rem, 1.666dvw, .925rem);

	--heading-font-weight: 600;
	--h1-font-weight: var(--heading-font-weight);
	--h2-font-weight: var(--heading-font-weight);
	--h3-font-weight: var(--heading-font-weight);
	--h4-font-weight: var(--heading-font-weight);
	--h5-font-weight: var(--heading-font-weight);
	--h6-font-weight: var(--heading-font-weight);

	--heading-line-height: 1;
	--h1-line-height: var(--heading-line-height);
	--h2-line-height: var(--heading-line-height);
	--h3-line-height: var(--heading-line-height);
	--h4-line-height: var(--heading-line-height);
	--h5-line-height: var(--heading-line-height);
	--h6-line-height: var(--heading-line-height);

	--heading-letter-spacing: -0.01875rem;
	--h1-letter-spacing: var(--heading-letter-spacing);
	--h2-letter-spacing: var(--heading-letter-spacing);
	--h3-letter-spacing: var(--heading-letter-spacing);
	--h4-letter-spacing: var(--heading-letter-spacing);
	--h5-letter-spacing: var(--heading-letter-spacing);
	--h6-letter-spacing: var(--heading-letter-spacing);

	--heading-text-transform: none;
	--h1-text-transform: var(--heading-text-transform);
	--h2-text-transform: var(--heading-text-transform);
	--h3-text-transform: var(--heading-text-transform);
	--h4-text-transform: var(--heading-text-transform);
	--h5-text-transform: var(--heading-text-transform);
	--h6-text-transform: var(--heading-text-transform);

	--eyebrow-font-family: var(--font-family-button);
	--eyebrow-font-size: .875rem;
	--eyebrow-font-weight: 400;
	--eyebrow-letter-spacing: 0.7px;
	--eyebrow-text-transform: uppercase;

	--header-logo-width: 100px;
	--scrolled-header-logo-width: 60px;

	--color-gold: #7f6d47;
	--color-white: #fff;
	--color-black: #000;
	--color-almost-white: #f6f5f2;
	--color-gray: #dad8cf;
	--color-warm-gray: #7f7f7f;

	--wines-listing-max-columns: 4;
	--wines-listing-featured-max-columns: 4;
	--wines-listing-max-width: 100%;

	--hero-height: 70dvh;
	--hero-height-home: 80dvh;

	@media(width > 1024px) {
		--hero-height: 80dvh;
		--hero-height-home: 90dvh;
	}

	--slide-in-speed: .3s;

	@media(width > 900px) {
		font-size: var(--font-size-body-desktop);
	}

	background-color: var(--color-site-background, #fff);
	font-size: 16px;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);

	@media(1080px <=width) {
		--container-gutter: 2rem;
	}

	:where(.is-layout-constrained)>* {
		margin-block: unset;
	}
}

body {
	color: var(--color-site-text);
	font: var(--font-weight-regular) var(--font-size-body-mobile)/var(--line-height-body-mobile) var(--font-family-body);
	position: static;

	@media(width > 900px) {
		font-size: var(--font-size-body-desktop);
		line-height: var(--line-height-body-desktop);
	}
}

#page {
	overflow: clip;
}

p {
	margin: 0 0 1rem;

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

	&.has-large-font-size {
		font-size: var(--font-size-large) !important;

		@media(width<1001px) {
			font-size: 1.5rem !important;
		}
	}
}

ul,
ol {
	padding-left: 1rem;
}

ol {
	li {
		padding-left: 0.25rem;

		&::marker {
			font-size: 1rem;
		}
	}
}

.heading-font {
	font-family: var(--font-family-headings);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	color: var(--color-heading-text, var(--color-site-text, var(--color-black)));
	font-family: var(--font-family-headings);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 .5em;

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

	a {
		color: inherit;
		text-decoration: inherit;
	}
}
		

h1, .h1 {
	color: var(--h1-color);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  text-transform: var(--h1-text-transform);

	.kt-inside-inner-col:has(& + .wp-block-kadence-column .wp-block-separator) & {
		margin-bottom: 0;
	}
}

h2, .h2 {
	color: var(--h2-color);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: var(--h2-text-transform);

	a:hover {
		text-decoration: underline;
	}
}

h3, .h3 {
	color: var(--h3-color);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  text-transform: var(--h3-text-transform);
}

h4, .h4 {
	color: var(--h4-color);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  text-transform: var(--h4-text-transform);
	
	&.wp-block-heading {
		margin-bottom: .25em;
	}
}

h5, .h5 {
	color: var(--h5-color);
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
  text-transform: var(--h5-text-transform);
}

h6, .h6 {
	color: var(--h6-color);
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  text-transform: var(--h6-text-transform);

	em a {
		color: var(--color-page-link);
	}
}

.eyebrow> :is(h1, h2, h3, h4, h4, h6),
.eyebrow {
	color: var(--color-eyebrow, var(--color-heading-text, var(--color-black)));
	font-family: var(--eyebrow-font-family);
	font-size: var(--eyebrow-font-size);
	font-weight: var(--eyebrow-font-weight);
	letter-spacing: var(--eyebrow-letter-spacing);
	text-transform: var(--eyebrow-text-transform);
}

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

a {
	color: var(--color-page-link);
	transition: all .3s;
	word-wrap: break-word;

	&:hover {
		color: var(--color-page-link-hover, var(--color-page-link));
		text-decoration: none;
	}

	&:not(.button):active,
	&:not(.button):focus {
		color: var(--color-page-link-active, var(--color-page-link-hover, var(--color-page-link)));
	}

	&[href^="tel:"] {
		text-decoration: none;
	}

	&.more {
		cursor: pointer;
	}
}

body.single-wine #main .entry-content {
	max-width: unset;
	padding-top: 0;
}

/* BUTTON */
.wp-block-button.is-style-outline>a.wp-element-button {
	background: var(--color-white, #fff);
	border: unset;
	color: var(--color-page-link);
	outline-style: solid;
	outline-offset: -1.5px;
	color: var(--color-page-link) !important;
	outline-width: 1px;

	&:hover {
		background-color: var(--color-page-link);
		color: var(--color-white, #fff);
		outlne-color: var(--color-page-link);
	}
}

.button,
input[type="submit"],
.wp-element-button,
#page .kb-button,
.wp-block-kadence-advancedbtn .kt-button {
	background-color: var(--button-background);
	border: var(--button-border);
	border-radius: var(--button-border-radius);
	color: var(--button-color);
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-family-button);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	line-height: var(--button-line-height);
	letter-spacing: var(--button-letter-spacing);
	padding: var(--button-padding);
	text-align: center;
	text-decoration: none;
	text-transform: var(--button-text-transform);
	transition: all .3s;

	&:hover,
	&:active,
	&:focus {
		background-color: var(--button-background-hover);
		color: var(--button-color-hover);
	}

	&.kb-btn-global-outline,
	&.outline {
		background: var(--color-white, #fff);
		border: unset;
		color: var(--button-background);
		outline-style: solid;
		outline-offset: -1.5px;
		outline-color: var(--button-background);
		outline-width: 1px;

		&:hover {
			background-color: var(--button-background-hover);
			border: unset;
			color: var(--button-color-hover);
			outline-color: var(--button-background-hover);
		}
	}

	&.disabled,
	&[disabled] {
		opacity: var(--button-disabled-opacity);
  	pointer-events: none;
	}

	&.small {
		font-size: var(--button-small-font-size);
    line-height: var(--button-small-line-height);
		padding: var(--button-small-padding);
		text-box: trim-end ex alphabetic;
	}

	&.ghost {
		background: transparent;
    border: none;
    color: var(--button-background);
		outline: 1px solid currentColor;
    outline-offset: -1px;

		&:hover {
    	color: var(--button-background-hover);
		}
	}

	&.scroll-down {
		background-color: currentColor;
		border: unset;
  	display: block;
  	filter: drop-shadow(var(--hero-text-shadow));
		font-size: 0;
  	height: 48px;
  	margin: .25rem auto 0;
  	-webkit-mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#down-arrow');
  	-webkit-mask-size: contain;
  	mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#down-arrow');
  	mask-size: contain;
  	width: 48px;

		&:hover {
			background-color: hsl(from currentColor h s calc(l - 10));
		}
	}
}

button.link {
  background: unset;
  border: unset;
  cursor: pointer;
  padding: unset;
  text-decoration: underline;
}

.icon-search {
	-webkit-mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#search');
	-webkit-mask-size: contain;
	mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#search');
	mask-size: contain;
	background-color: currentColor;
	border: none;
	cursor: pointer;
	display: block;
	font-size: 0;
	height: 1.5rem;
	padding: 0;
	position: relative;
	margin-inline: 0;
	transition: all .3s;
	width: 1.5rem;

	#masthead & {
		color: var(--color-primary-nav-links);

		&:hover {
			color: var(--color-primary-nav-hover);
		}
	}
}
/* END BUTTON */

.wp-block-separator.is-style-default {
	margin: 1.5rem auto;
	max-width: 160px;

	&:not(.has-background) {
		border-color: var(--color-option-4, var(--color-eyebrow, var(--color-heading-text, var(--color-black))));
	}

	.aos-animate & {
		animation: .3s 1s both draw-separator-line;
	}

	.panel.dark & {
		border-color: currentColor !important;
	}
}

@keyframes draw-separator-line {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

::marker {
	font-size: .75rem;
}

.reservation-note {
	font-size: .8125rem;
	font-style: italic;
}

.container {
	margin-inline: auto;
	max-width: var(--container-width);
	padding-inline: var(--container-gutter);
}

.container-medium,
.container.medium {
	margin-inline: auto;
	max-width: var(--container-medium-width);
}

.container-small,
.container.small {
	margin-inline: auto;
	max-width: var(--container-small-width);
}

.full-width,
.full-bleed {
	margin-left: var(--full-width-margin) !important;
	width: 100dvw !important;
}

.full-width .entry-content > & > .kt-inside-inner-col {
	padding-inline: var(--container-gutter);
}

@media(width > 1200px) {
	.hide-for-desktop {
		display: none;
	}
}

@media(width <=1200px) {
	.show-for-desktop {
		display: none;
	}
}

@media(width <=767px) {
	.hide-for-mobile {
		display: none;
	}
}

@media(width > 767px) {
	.show-for-mobile {
		display: none;
	}
}

#masthead:not(.type-fixed) ~ #main {
	padding-top: var(--header-height);
}

body:not(:has(.hero)) #main {
	padding-top: calc(2rem + var(--header-height));
}

.zoetrope {

	/*& .zoetrope-dots {
		align-items: center;

		button {
			background: transparent !important;
			border: 1px solid var(--color-black);
			font-size: 0;
			height: .5rem !important;
			padding: 0;
			width: .5rem !important;

			&.active {
				background: var(--color-black) !important;
				border: none;
				height: .75rem !important;
				width: .75rem !important;
			}
		}
	}*/

	.zoetrope-button {
		border: none;
		height: 3rem;
		width: 1.875rem;
	}

	.zoetrope-button-prev {
		background: transparent url('../img/icons.svg#arrow-left') 50% 50% / contain no-repeat;

		.carousel-gallery.full-bleed & {
			left: var(--container-gutter);
		}
	}

	.zoetrope-button-next {
		background: transparent url('../img/icons.svg#arrow-right') 50% 50% / contain no-repeat;
		
		.carousel-gallery.full-bleed & {
			right: var(--container-gutter);
		}
	}
}

[popover] {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	border: 1px solid #d4d4d4;
	font-size: 1rem;
	max-width: 94dvw;
	opacity: 0;
	overflow: visible;
	padding: 1.5rem;
	pointer-events: all;
	transition: all .3s allow-discrete;
	width: 600px;

	body:has(&:popover-open) {
		pointer-events: none;
	}

	&::backdrop {
		background: transparent;
		backdrop-filter: blur(0px);
		transition: all .3s ease-out allow-discrete;
	}

	&.no-backdrop {
		&::backdrop {
			display: none;
		}
	}

	[popovertargetaction="hide"] {
		background: url('../img/icons.svg#close') 50% 50% / .875rem auto no-repeat;
		border: unset;
		content: "";
		cursor: pointer;
		font-size: 0;
		height: 2rem;
		outline: none;
		position: absolute;
		right: 0;
		top: 0;
		width: 2rem;
	}
}

[popover]:popover-open {
	opacity: 1;

	&::backdrop {
		background: color(from var(--color-backgrounds-backdrops, var(--color-page-link)) srgb r g b / .7);
		/*color(from var(--color-option-3) srgb r g b / .8);*/
		backdrop-filter: blur(3px);
	}
}

@starting-style {
	[popover]:popover-open {
		opacity: 0;
	}

	[popover]:popover-open::backdrop {
		background: transparent;
		backdrop-filter: blur(0px);
	}
}

.tasting-notes[popover] {
	padding: 5rem 3.5rem;
}

/* header */
#masthead {
	padding-block: 2.5rem;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	transition: all .3s;
	z-index: 3;

	&:not(.type-fixed) {
		background: var(--color-white, #fff);
		border-bottom: 1px solid var(--color-gray);
	}

	&.type-fixed {
		background: linear-gradient(180deg, black, transparent);
	}

	@media(1080px <=width < 1360px) {
		--container-gutter: 2.5rem;
	}

	@media(width >=1360px) {
		--container-gutter: 5.5rem;
	}

	html:not(.scrolled) & {
		top: var(--topbar-height, 0);
	}

	html:not(.scrolled) body:has(#topbar.inactive) & {
		top: 0;
	}

	@media(width > 1200px) {
		html:not(.scrolled) & {
			padding-block: 1rem;
		}
	}

	html.scrolled &,
	#page:not(:has(.entry-content>.hero:first-child)) & {
		background: var(--color-black);
		padding-block: 1rem;
	}

	&>.container {
		align-items: center;
		display: grid;
		grid-template-columns: auto auto;
		position: relative;
		gap: 2.5rem 2rem;
    width: 100%;

		@media(width > 1200px) {
			grid-template-columns: var(--header-logo-width, 100px) 1fr auto;

			&:has(.header-actions #hamburger-button:not(:only-child)) {
				grid-template-rows: auto auto;
				row-gap: 1.75rem;

				.site-branding {
					grid-row: span 2;
				}

				#site-navigation {
					grid-row: 2;

					.primary-menu-container {
						padding-right: 0;
					}
				}

				.header-actions {
					grid-row: 1;
					grid-column: 2;
					justify-content: flex-end;
				}
			}
		}	
	}

	.site-branding {
		align-items: center;
		display: flex;
		grid-column: 1;

		.site-logo { 
			max-width: unset;

			& > a {
				display: block;
				/*height: 100px;*/
				transition: all .3s;
				width: var(--header-logo-width);

				html.scrolled &,
				#page:not(:has(.entry-content>.hero:first-child)) & {
					width: var(--scrolled-header-logo-width);
				}

				img {
					display: block;
					height: 100%;
					margin: auto;
					object-fit: contain;
					width: 100%;
				}

				svg {
					display: block;
					height: 100%;
					margin: auto;
					width: 100%;
				}
			}
		}
	}

	&.logo-position-center {
		>.container {
			@media(width <=1200px) {
				gap-inline: 1rem;
				grid-template-columns: 1fr var(--header-logo-width) 1fr;
			}
		}

		.site-branding {
			grid-column: 2;

			@media(width <=1200px) {
				justify-content: center;
			}
		}
	}

	.header-actions {
		align-items: center;
		display: flex;
		gap: 0 1.5rem;

		@media(width < 1360px) {
			justify-content: end;
		}

		@media(width < 768px) {
			position: absolute;
			right: var(--container-gutter);
			top: 50%;
			transform: translateY(-50%);
		}
	}
}

#site-navigation,
#mobile-menu {
	.menu-item>svg.svg-icon {
		display: none;
	}
}

#site-navigation {
	grid-column: 2;

	@media (width <=1200px) {
		grid-column: 1;
		grid-row: 2;
	}

	@media(width <=1200px) {
		display: none;
	}

	ul {
		list-style: none;
	}

	&>div>ul {
		--column-gap: 3rem;
		align-items: center;
		display: flex;
		gap: 1rem var(--column-gap);
		margin: 0;
		padding: 0;
	}

	@media(width < 768px) {
		position: fixed;
		background: rgba(0, 0, 0, .75);
		inset: 0 0 0 0;
		opacity: 0;
		padding: var(--container-gutter);
		pointer-events: none;
		transition: opacity .3s;
		z-index: 9;

		.menu-open & {
			opacity: 1;
			pointer-events: all;
		}

		a {
			color: var(--color-white, #fff);
		}
	}

	.primary-menu-container {
		padding-right: 2rem;
		
		&>.menu-wrapper {

			&>li {
				margin-inline: auto;
				position: relative;

				&:not(:last-of-type)::after {
					background: rgb(from var(--color-primary-nav-links) r g b / .25);
					content:"";
					height: 100%;
					position: absolute;
					right: calc(-.5 * var(--column-gap));
					width: 1px;
				}

				&>a {
					color: var(--color-primary-nav-links);
					display: block;
					font-family: var(--font-family-headings);
					font-size: 1.25rem;
					font-weight: 600;
					letter-spacing: .05em;
					line-height: 1;
					position: relative;
					text-decoration: none;
					text-transform: uppercase;
					z-index: 2;

					&:hover {
						color: var(--color-primary-nav-hover);
					}
				}

				.sub-menu-wrap {
					--width: calc(100% + 3rem);
					left: 50%;
					width: max(var(--width), 200px);
					opacity: 0;
					padding-top: 1rem;
					pointer-events: none;
					position: absolute;
					text-align: center;
					top: 100%;
					transform: translateX(-50%);
					transition: all .3s;
				}

				&:hover {
					color: var(--color-site-text);

					.sub-menu-wrap {
						opacity: 1;
						pointer-events: all;

						&>ul {
							pointer-events: all;
						}
					}
				}
			}

			/*.sub-menu {*/
			.menu-context-wrapper {
				border-radius: 0px 0px 8px 8px;
				background: #F9F8F6;
				box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.12);
				display: grid;
				padding: 1rem 1.5rem;

				&:has(.contextual-conent) {
					background: linear-gradient(to right, hsl(39.13deg 19.66% 92.06%) 50%, #F9F8F6 50%);
					gap: 1.5rem;
					grid-template-columns: repeat(2, 1fr);
					padding-top: .75rem;
					width: 500px;
				}

				.contextual-conent {
					text-align: left;

					.description {
						font-size: .9375rem;

						&:last-child:not(:only-child) {
							padding-top: 1rem;
						}

						&:first-child:not(:only-child) {
							padding-bottom: 1.5rem;
						}
					}
				}
			}

			.sub-menu {
				align-items: start;
				background: unset;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				min-width: unset;
				padding: 0;
				position: static;

				li {
					text-align: left;
					white-space: nowrap;
				}

				a {
					color: var(--text-text-primary, #262626);
					font-size: 14px;
					font-weight: 600;
					letter-spacing: 0.7px;
					text-decoration: none;
					text-transform: uppercase;
				}
			}

			.contextual-conent+.sub-menu {
				padding-top: .75rem;
			}
		}
	}
}

dialog.slide-in {
	background: var(--color-option-1);
	border: 0;
	color: var(--color-primary-nav-links);
	container-type: inline-size;
	height: 100dvh;
	left: unset;
	letter-spacing: .05em;
	margin: 0;
	max-height: unset;
	max-width: unset;
	opacity: 0;
	padding: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	transform: translateX(100%);
	transition:
		opacity var(--slide-in-speed) ease-out,
		transform var(--slide-in-speed) ease-out,
		overlay var(--slide-in-speed) ease-out,
		display var(--slide-in-speed) ease-out;
	transition-behavior: allow-discrete;
	width: min(600px, 96dvw);
	z-index: 15;

	&::backdrop {
		background: color(from var(--color-backgrounds-backdrops, var(--color-page-link)) srgb r g b / .7);
		backdrop-filter: blur(0px);
		opacity: 0;
		transition:
			backdrop-filter var(--slide-in-speed) ease-out,
			opacity var(--slide-in-speed) ease-out,
			overlay var(--slide-in-speed) ease-out,
			display var(--slide-in-speed) ease-out;
		transition-behavior: allow-discrete;
	}

	&[open] {
		opacity: 1;
		transform: translateX(0);

		@starting-style {
			opacity: 0;
			transform: translateX(100%);
		}

		&::backdrop {
			backdrop-filter: blur(3px);
			opacity: 1;

			@starting-style {
				backdrop-filter: blur(0px);
				opacity: 0;
			}
		}
	}

	a, .icon-search {
		color: var(--color-primary-nav-links);
		text-decoration: none;

		&:hover {
			/*color: var(--color-primary-nav-hover);*/
			color: hsl(from var(--color-primary-nav-links) h s calc(l - 20));
		}
	}

	.wrapper {
		height: 100%;
		overflow: scroll;
		padding: 60px 12.5% 1rem;
	}

	hamburger-button,
	form[method="dialog"] button,
	button[command="close"] {
		-wekit-mask-image: url('../img/icons.svg#close');
		-webkit-mask-size: contain;
		mask-image: url('../img/icons.svg#close');
		mask-size: contain;
		background: var(--color-primary-nav-links);
		border: none;
		cursor: pointer;
		font-size: 0;
		height: 22px;
		outline: none;
		padding: 0;
		position: absolute;
		right: 12.5%;
		top: 45px;
		transform: translateY(-50%);
		width: 22px;
	}

	.logo img {
		/*aspect-ratio: 1;
		height: 144px;*/
		margin-inline: auto;
		object-fit: contain;
		width: 144px;
	}
}

.dialog-main-menu > ul {
	display: flex;
	flex-direction: column;
	font-family: var(--font-family-headings);
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 3rem 0 0;
	text-align: center;
	text-box: trim-both cap alphabetic;

	li:not(:last-child) {
		border-bottom: 1px solid rgb(from var(--color-white, #fff) r g b / .25);
		margin-bottom: 1.5rem;
		padding-bottom: 1.5rem;
	}

	a {
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
	}
}

#mobile-menu {
	.icons:empty,
	.contact-info:empty {
		display: none;
	}

	.links {
		display: grid;
		gap: 1.5rem 8cqw;
		grid-template-columns: 1fr 1fr;
		list-style: none;
		margin-inline: auto;
		max-width: 400px;
		padding: 2rem 0 1.75rem;
    text-align: center;

		a {
			font-family: "Montserrat", sans-serif;
			font-size: 0.875rem;
			font-weight: 500;
			letter-spacing: 0.04375rem;

			@media(width > 500px) {
				text-transform: uppercase;
			}
		}
	}

	.icons {
		align-items: center;
		display: flex;
		gap: 2.375rem;
		justify-content: center;
		padding: 3rem 0;

		.item {
			&:not(:only-child) {
				text-align: center;
			}
		}
	}

	.contact-info {
		font-size: 1.125rem;
		padding-top: 1.25rem;
		letter-spacing: 0.01em;
		font-weight: 400;
	}

	.menu-social {
		padding-top: .25rem;

		a {
			background: currentColor;
		}
	}

	.phone-email {
		font-family: var(--font-family-headings);
		font-size: 1.25rem;
	}
}

html:has(#mobile-menu[open]) {
	overflow: hidden;
}

#hamburger-button {
	background: unset;
	border: unset;
	color: var(--color-primary-nav-links);
	cursor: pointer;
	display:flex;
	flex-direction: column;
	font-size: 0;
	gap: 5px;
	padding: 0;
	width: fit-content;

	span,
	&::before,
	&::after {
		display: block;
		width: 27px;
		height: 2px;
		background: currentColor;
		transition: 0.3s;
	}

	&:hover {
		color: var(--color-primary-nav-hover);
	}

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

	body:has(#mobile-menu[open]) &::before { transform: translateY(8px) rotate(45deg); }
	body:has(#mobile-menu[open]) & span { opacity: 0; }
	body:has(#mobile-menu[open]) &::after { transform: translateY(-8px) rotate(-45deg); }
}

/* TopBar */
body {
	transition: padding .3s;
}

body:has(#topbar:not(.inactive)) {
	padding-top: var(--topbar-height, 0);
}

#topbar {
	background: var(--color-top-bar-bg, #f6f6f6);
	color: var(--color-top-bar-text);
	font-family: var(--font-family-montserrat);
	font-size: .875rem;
	left: 0;
	line-height: 1;
	padding-block: 0.875rem;
	position: fixed;
	text-align: center;
	top: var(--wp-admin--admin-bar--height, 0);
	transition: transform .3s;
	width: 100dvw;
	z-index: 15;

	@media(1080px <=width < 1360px) {
		--container-gutter: 2.5rem;
	}

	@media(width >=1360px) {
		--container-gutter: 5.5rem;
	}

	.container {
		max-width: unset;
	}

	html.scrolled &,
	&.inactive {
		transform: translateY(-100%);
	}

	&>.close {
		background: transparent url('../img/icons.svg#close') 50% 50% / contain no-repeat;
		border: none;
		cursor: pointer;
		font-size: 0;
		height: 1.25rem;
		padding: 0;
		position: absolute;
		right: var(--container-gutter);
		top: 50%;
		width: 1.25rem;
		transform: translate(0px, -50%);
		display: none;
	}
}

#topbar-banners {
	margin-inline: auto;
	padding-inline: 1.5rem;

	@media(width >=1080px) {
		&.zoetrope {
			padding-inline: 2.5rem;
		}
	}

	.zoetrope-button {
		background: transparent url('../img/icons.svg#carousel-arrow') 50% 50% / contain no-repeat;
		border: none;
		height: .625rem;
		padding: 0;
		width: .375rem;
	}

	.zoetrope-button-prev {
		left: 1rem;
		transform: translate(-100%, -50%);

		@media(width >=1360px) {
			left: -2rem;
		}

		@media(1080px <=width < 1360px) {
			left: -1rem;
		}
	}

	.zoetrope-button-next {
		right: 1rem;
		transform: translate(100%, -50%) rotate(180deg);

		@media(width >=1360px) {
			right: -2rem;
		}

		@media(1080px <=width < 1360px) {
			right: -1rem;
		}
	}

	.banner .grid {

		@media(width >=768px) {
			align-items: center;
			display: grid;
			gap: 2px 16px;
			grid-template-areas:
				"title button"
				"text button";
			grid-template-columns: 1fr auto;
		}

		h4 {
			color: var(--color-top-bar-text);
			font-size: 18px;
			grid-area: title;
			margin: 0;

			@media(width >=768px) {
				text-align: left;
			}
		}

		p {
			color: #594c32;
			font-size: 14px;
			grid-area: text;
			margin-bottom: .25rem;

			@media(width >=768px) {
				margin-bottom: 0;
				text-align: left;
			}
		}

		a.button {
			font-size: 12px;
			grid-area: button;
			padding: 8px 16px;
		}
	}
}

/* storefront */
sf-cart,
.search-form-wrapper,
sf-account-container,
#foley-c7-account-icon {
	color: var(--color-primary-nav-links);
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;

	&:hover {
		color: var(--color-primary-nav-hover);
	}
}

/* C7 account menu in dialog */
#foley-c7-account-icon {
	-webkit-mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#user');
	-webkit-mask-size: contain;
	mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#user');
	mask-size: contain;
	background-color: currentColor;
	content: "";
	display: block;
	height: 1.5rem;
	transition: all .3s;
	width: 1.5rem;
}

sf-account-container>ul:empty {
	display: none;
}

sf-account-container {
	position: relative;

	#masthead & {
		@media(max-width:767px) {
			margin-left: 4rem;
		}
	}

	ul {
		background-color: var(--color-white, #fff);
		box-shadow: 0 0 4px 1px rgba(var(--color-site-text-rgb), .1);
		font-size: 1rem;
		left: 0;
		list-style: none;
		margin: 0;
		min-width: 125px;
		opacity: 0;
		padding: .5rem 0;
		pointer-events: none;
		position: absolute;
		top: 100%;
		transform: translateY(1rem);
		width: 100%;
		z-index: 5;

		a {
			color: var(--color-site-text);
			display: block;
			font-size: 0.875rem;
			padding: .5rem var(--spacing-s);
			text-decoration: none;
			text-underline-offset: 0.125rem;
		}
	}

	&:hover ul {
		opacity: 1;
		pointer-events: all;

		&::before {
			content: "";
			bottom: 100%;
			height: 1rem;
			left: 0;
			position: absolute;
			right: 0;
		}
	}

	&>a {
		align-items: center;
		color: inherit;
		/*display: flex;*/
		display: block;
		font-size: 0;
		justify-content: center;

		&::before {
			-webkit-mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#user');
			-webkit-mask-size: contain;
			mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#user');
			mask-size: contain;
			background-color: currentColor;
			content: "";
			display: block;
			height: 1.5rem;
			transition: all .3s;
			width: 1.5rem;
		}

		&:hover {
			color: inherit;
		}

		&:not(:hover)::before {
			filter: grayscale(1);
		}

		span {
			display: none;
		}
	}
}

:is(.header-actions, #mobile-search) .search-form-wrapper {

	form {
		input[type="search"] {
			background: rgba(255, 255, 255, .95);
			border: 1px solid var(--color-page-link);
			border-width: 0 0 1px;
			color: var(--color-page-link);
			font-size: .875rem;
			line-height: 1;
			outline: none;
			padding: 0 1rem;
		}
	}

	#masthead & {
		position: relative;

		form {
			label {
				background: var(--color-white, #fff);
				margin-top: -.5rem;
				overflow: hidden;
				padding-block: .5rem;
				position: absolute;
				right: 50%;
				transition: .3s all;
				width: 0;
			}
		}

		&:hover,
		&:focus-within {
			form {
				label {
					width: 200px;
				}
			}
		}
	}

	#masthead &,
	#mobile-menu & {
		button[type="submit"] {
			background: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#search') 50% 50% / contain no-repeat;
			border: none;
			display: block;
			font-size: 0;
			height: 1.675rem;
			padding: 0;
			position: relative;
			margin-inline: auto;
			transition: all .3s;
			width: 1.5rem;

			&:hover {
				background-color: transparent !important;
			}

			&:not(:hover) {
				filter: grayscale(1);
			}
		}
	}

	#mobile-menu & {
		form {
			label {
				display: none;
			}
		}
	}
}

aside#site-search .search-form-wrapper {
	padding-top: 1rem;
	width: 100%;

	form {
		display: flex;
		gap: 1rem;

		label {
			flex-grow: 1;
		}

		input[type="search"] {
			background: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#search') 0% 50% / 1.5rem auto no-repeat;
			border-bottom: 1px solid var(--color-gray);
			border-width: 0 0 1px;
			font-family: var(--font-family-montserrat);
			font-size: 1rem;
			line-height: 1.5;
			outline: none;
			padding: .375rem .5rem .375rem 2rem;
			width: 100%;
		}
	}
}

aside#site-search {
	background: var(--site-search-background);
	box-shadow: 0 0 2px rgb(from var(--color-backgrounds-backdrops) r g b / 0.5);
	opacity: 0;
	padding: 3rem;
	position: fixed;
	top: 0;
	transform: translateY(-100%);
	transition: all .3s;
	width: 100%;
	z-index: 10;

	&.active {
		opacity: 1;
		transform: none;

		body:has(&) {
			overflow: hidden;
		}

		&+#mobile-menu {
			opacity: 0 !important;
			filter: opacity(0) !important;
			display: none;
			visibility: hidden;
			pointer-events: none;
		}
	}

	.container {
		max-width: 1064px;
		position: relative;
	}

	button.close {
		background: transparent url('../img/icons.svg#close') 50% 50% / contain no-repeat;
		border: none;
		bottom: 100%;
		cursor: pointer;
		font-size: 0;
		height: 22px;
		left: 100%;
		padding: 0;
		position: absolute;
		width: 22px;
	}
}

sf-cart {
	display: flex;
	position: relative;

	#masthead & {
		width: 22px;
	}

	&>a {
		align-items: center;
		color: inherit;
		display: inline-flex;
		font-size: .625rem;
		font-weight: 600;
		height: 1.5rem;
		justify-content: center;
		line-height: 1;
		text-decoration: none;
		width: 1.5rem;

		#masthead &:hover {
			color: var(--color-primary-nav-hover);
		}

		&::before {
			-webkit-mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#bag');
			-webkit-mask-size: contain;
			mask-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#bag');
			mask-size: contain;
			background-color: currentColor;
			content: "";
			display: block;
			height: 1.625rem;
			transition: all .3s;
			width: 1.625rem;
		}
	}

	.minicart {
		background-color: color-mix(in srgb, var(--color-backgrounds-backdrops, var(--color-page-link)) 30%, var(--color-white, #fff) 100%);
		box-shadow: 0 0 4px 1px rgba(var(--color-site-text-rgb), .1);
		max-width: 400px;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(calc(var(--header-height) / 2));
		width: 100dvw;
		z-index: 5;
	}

	&.active {
		.minicart {
			opacity: 1;
			pointer-events: all;
		}
	}
}

.minicart {
	color: var(--color-site-text);
	padding: var(--spacing-s) var(--spacing-xxs);

	dialog & {
		top: 100%;
		transform: translateY(1rem);
	}

	#mobile-menu & {
		display: flex;
		flex-direction: column;
	}

	#mobile-menu sf-cart:not(.active) & {
		height: 0;
		padding: 0;
	}

	.minicart-title {
		grid-gap: var(--spacing-s);
		align-items: center;
		display: grid;
		font-weight: 500;
		grid-template-columns: 1fr min-content;
		padding-bottom: var(--spacing-s);
		padding-left: var(--spacing-s);
		padding-right: var(--spacing-s);
		text-underline-offset: .125rem;

		:is(p, a) {
			font-size: var(--font-size-small);
			line-height: var(--line-height-small);
		}

		p {
			color: var(--color-heading-text);
			/*var(--color-option-1);*/
			font-weight: var(--font-weight-bold);
			margin-bottom: auto;
		}

		a {
			color: var(--color-site-text);
			/*var(--color-option-1);*/
			display: block;
			text-decoration: underline;
			white-space: nowrap;
		}
	}

	.product-summary {
		border-bottom: 1px solid var(--color-gray-4);
		margin-bottom: var(--spacing-s);
		margin-left: var(--spacing-s);
		margin-right: var(--spacing-s);
		max-height: 40vh;
		overflow-y: auto;
		overscroll-behavior: contain;

		@media (min-width: 782px) {
			max-height: calc(var(--spacing-xs)* 30);
		}
	}

	.product-line-item {
		grid-gap: var(--spacing-s);
		background-color: var(--color-white, #fff);
		color: var(--color-page-link);
		display: grid;
		grid-template-columns: 20% 1fr 10%;
		margin-bottom: var(--spacing-s);
		padding: var(--spacing-s);
		text-decoration: none;

		.item-image {
			align-items: center;
			display: flex;
			justify-content: center;

			img {
				max-height: 150px;
				object-fit: contain;
			}
		}

		.item-detail {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.pricing {
				font-family: var(--font-family-body);
				font-size: var(--font-size-body-mobile);
				font-weight: var(--font-weight-regular);
				font-weight: var(--font-weight-bold);
				line-height: var(--line-height-body-mobile);

				@media (min-width: 1025px) {
					font-size: var(--font-size-body-desktop);
					line-height: var(--line-height-body-desktop);
				}
			}

			.product-name {
				color: var(--color-site-text);
				/*var(--color-option-1);*/
				display: block;
				font-family: var(--font-family-body);
				font-size: var(--font-size-body-mobile);
				font-weight: var(--font-weight-regular);
				font-weight: var(--font-weight-bold);
				line-height: var(--line-height-body-mobile);
				padding-bottom: var(--spacing-xxs);

				@media (min-width: 1025px) {
					font-size: var(--font-size-body-desktop);
					line-height: var(--line-height-body-desktop);
				}
			}
		}

		.item-quantity {
			align-items: center;
			display: flex;
			font-family: var(--font-family-body);
			font-size: var(--font-size-body-mobile);
			font-weight: var(--font-weight-regular);
			justify-content: center;
			line-height: var(--line-height-body-mobile);

			@media (min-width: 1025px) {
				font-size: var(--font-size-body-desktop);
				line-height: var(--line-height-body-desktop);
			}
		}
	}

	.minicart-footer {
		padding-left: var(--spacing-s);
		padding-right: var(--spacing-s);

		#mobile-cart & {
			margin-block: auto 0;
		}

		.estimated-total {
			grid-gap: var(--spacing-s);
			align-items: center;
			display: grid;
			font-size: 0.875rem;
			font-weight: var(--font-weight-bold);
			grid-template-columns: 1fr min-content;
			padding-bottom: var(--spacing-s);
		}

		.estimated-total .sub-total {
			text-align: right;
		}

		.checkout-continue {
			align-items: center;
			display: flex;
			justify-content: center;

			a.button {
				width: 100%;
			}
		}
	}
}

/* Footer */
#colophon {
	color: var(--color-footer-main-text);
	margin: 0;

	ul.menu {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.button,
	input[type=submit],
	.wp-element-button {
		background-color: var(--color-footer-main-links);
		color: var(--color-white, #fff);
		padding: 1.25rem 2.625rem;
	}
}

#footer-section-newsletter {
	background-color: var(--color-newsletter-bg, var(--color-page-link));
	padding-block: 3.6875rem;
}

#footer-subscription-form {
	align-items: center;
	color: var(--color-newsletter-text, var(--color-white, #fff));
	display: grid;
	gap: 2rem 1.5rem;
	grid-template-columns: 1fr min-content;

	@media(width <= 900px) {
		grid-template-columns: 1fr;
		text-align: center;
	}

	h2 {
		color: var(--color-newsletter-text, var(--color-white, #fff));
		margin: 0 0 .5rem;
	}

	.button {
		--button-font-size: 1.5rem;
		--button-padding: 0.875rem 3.0625rem;
		background-color: var(--color-newsletter-button-bg, var(--color-eyebrow));
		/*var(--color-newsletter-button-bg, var(--color-option-2));*/
		color: var(--color-newsletter-button-text, var(--color-white, #fff));

		&:hover {
			background-color: var(--color-page-link-hover);
		}
	}
}

.menu-social {
	align-items: center;
	display: flex;
	gap: 1.5rem 2rem;
	justify-content: center;
	list-style: none;

	a {
		aspect-ratio: 1;
		display: block;
		font-size: 0;
		mask-size: contain;
		height: 32px;
	}

	a[href*="instagram.com"] {
		mask-image: url('../img/icons.svg#instagram');
	}

	a[href*="facebook.com"] {
		mask-image: url('../img/icons.svg#facebook');
	}

	a[href*="youtube.com"] {
		mask-image: url('../img/icons.svg#youtube');
	}

	a[href*="twitter.com"],
	a[href*="x.com"] {
		mask-image: url('../img/icons.svg#twitter-x-alt');
	}

	a[href*="pinterest.com"] {
		mask-image: url('../img/icons.svg#pinterst');
	}

	a[href*="yelp.com"] {
		mask-image: url('../img/icons.svg#yelp');
	}
}

#menu-social {

	&>ul {
		flex-direction: row;
		gap: 1.5rem;
		justify-content: flex-start;
	}

	a {
		background: currentColor;
		font-size: 0;
		height: 1.5rem;
		width: 1.5rem;
	}
}

#footer-logo {
	img {
		height: 100px;
		object-fit: contain;
		width: 100px;
	}
}

#footer-section-main {
	border-top: 1px solid var(--color-gray);
	color: var(--color-site-text);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.25;
	padding-block: 2.5rem 1.5rem;

	@media(width >=1080px) {
		padding-block: 2.5rem;
	}

	@media(width <= 900px) {
		text-align: center;
	}

	a:not(.button) {
		color: var(--color-footer-main-links);
		text-decoration: none;

		&:hover {
			color: var(--color-footer-main-links-hover);
		}
	}

	&>.container {
		display: grid;
		gap: 2rem 1.5rem;
		grid-template-columns: 1fr;
		/*grid-template-areas:"menu" "contact" "visit" "social" "hours";*/

		@media(width > 900px) {
			grid-template-columns: minmax(0, 296px) minmax(0, 296px) 1fr minmax(0, 296px);;
    	/*grid-template-areas: "visit hours . contact";*/
		}

		/*@media(768px < width <= 900px) {
			grid-template-columns: 1fr 1fr;
    	grid-template-areas: "visit hours" "contact contact";
		}*/
	}

	#menu-social ul {
		flex-direction: row;

		@media(width <= 900px) {
			justify-content: center;
		}
	}

	h4 {
		color: var(--color-site-text);
		font-size: 1.5rem;
		font-weight: 600;
		margin: 0;
		line-height: 1.25;
		padding: 0 0 1.125rem;
		text-transform: capitalize;
	}

	.phone {
		padding-bottom: .5rem;
	}

	.cell {
		&.menu-wrapper {
			display: block;
		}
			
		&.contact-us {
			.phone,
			.email {
				&:last-child {
					padding-bottom: 0;
				}
			}
		}

		&.social-links { padding-top: .75rem; }

		@media(width > 900px) {

			&.menu-wrapper {
				display: block;
				grid-column: 1 / span 2;
			}

			&.contact-us { grid-column: 4; }
			&.visit-us { grid-column: 1; }
			&.business-hours { grid-column: 2; }
		}

		@media(width <= 900px) {
			&.menu-wrapper .menu {
				align-items: center;
				flex-direction: column;
			}
		}
	}

	@media(width > 900px) {
		&:has(.cell.menu-wrapper) {
			.cell.visit-us {
				grid-column: 2;
			}
			.cell.business-hours {
				grid-column: 3;
			}
		}
	}

	@media(width > 900px) {
		&:not(:has(.cell:nth-child(3))) {
			.contact-us {
				text-align: right;

				.menu {
					justify-content: flex-end;
				}
			}
		}
	}

	&:not(:has(.contact-us)) {
		.cell.social-links {
			grid-area: contact;
		}
	}
}

#menu-footer-navigation {
	display: grid;
	gap: .5rem 1.5rem;
	grid-template-columns: repeat(5, 1fr);
}

#footer-section-bottom {
	font-size: .875rem;
	padding-block: 2.5rem;
	text-align: center;

	@media(width <=1080px) {
		padding-block: 2.5rem;
	}

	&>.container {
    align-items: center;
		display: flex;
    flex-direction: column;
		gap: 1.125rem 1.5rem;
	}

	a {
		color: var(--color-site-text);
	}

	hr {
    background: rgb( from var(--color-site-text) r g b / .1);
    border: unset;
		height: 1px;
		margin: 0 auto;
		width: 100%;
	}

	.menus {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem 2.5rem;
		justify-content: center;

		@media(width <=600px) {
			flex-direction: column;
		}
	}

	.menus {
		.menu {
			gap: .5rem 2.5rem;
			justify-content: center;

			@media(width <=600px) {
				flex-direction: column;
			}

			a {
				color: var(--color-site-text);
				font-size: 1.125rem;
				font-weight: 600;
				letter-spacing: 0.01em;
				line-height: 1.25;
				text-align: center;
				text-decoration: none;
			}
		}
	}

	.footer-text {
		color: var(--color-site-text);
		font-size: 0.875rem;
		font-style: normal;
		font-weight: 400;
		line-height: 1.25;
		text-align: center;
	}

	.logo {
		display: none;
		grid-area: logo;

		img {
			height: 100px;
			object-fit: contain;
			width: 100px;
		}
	}
}

#menu-global {
	flex-wrap: wrap;
}

/* accordion */
.wp-block-accordion {

	.wp-block-accordion__item {
		border-bottom: 1px solid var(--color-site-text);
		padding: 1.5rem 0;

		&:first-child {
			padding-top: 0;
		}

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

		.wp-block-accordion__toggle {
			background: none;
			border: 0;
			cursor: pointer;
			display: flex;
			font-family: var(--font-family-headings);
			font-size: 20px;
			font-style: normal;
			font-weight: 700;
			justify-content: space-between;
			line-height: 120%;
			padding: 0;
			text-align: left;
			width: 100%;

			&[aria-expanded="false"] .wp-block-accordion__icon-closed {
				display: none;
			}

		}

		.wp-block-accordion-title {
			font-size: 1.5rem;
		}

		.wp-block-accordion__content {
			padding-inline: 0 !important;
		}

		.wp-block-accordion__content{
			display: block;
			overflow: clip;
			

			@supports (interpolate-size: allow-keywords) {
  			interpolate-size: allow-keywords;
				height: auto;
				transition: height 0.3s ease-out;

				&[aria-hidden="true"] {
					height: 0;
				}
			}

			@supports not (interpolate-size: allow-keywords) {
				max-height: 0;
				transition: max-height 0.3s ease-out;

				&[aria-hidden="true"] {
					max-height: 400px;
				}
			}

			&[aria-hidden="true"] {
				padding: 0;
			}
		}

		&.active {
			.wp-block-accordion__toggle {
				.wp-block-accordion__icon-closed {
					display: block;
				}

				.wp-block-accordion__icon-open {
					display: none;
				}
			}
		}
	}
}

/* read more text links */
.truncated-text {
	height: 0;
	overflow: hidden;
	transition: height .3s ease-in-out;
}

/* TOCK */
div#Tock_widget_container>div.TockWidgetWrapper {
	.TockButton-blue {
		align-items: center;
		background: var(--color-page-link) !important;
		display: flex;
		justify-content: center;
		transition: .3s;

		&:hover {
			background: var(--color-page-link-hover) !important;
		}
	}

	.TockSearchBar-iconColorModeBlue {
		color: var(--color-gray) !important;
	}

	.entry-content>.wp-block-kadence-column:has(&) {
		position: relative;
	}
}

/* wine pdp */
.wine-price:empty { display: none; }

article.entry.type-wine {
	.entry-content {
		background: rgba(239, 237, 231, 0.10);
		padding-block: 2.5rem;
		position: relative;

		&::before,
		&::after {
			background: inherit;
			bottom: 0;
			content: "";
			position: absolute;
			top: 0;
			width: 50dvw;
		}

		&::before { right: 100%; }
		&::after { left: 100%; }

		.wrapper {
			display: grid;
			grid-template-columns: auto;
			gap: 1rem 3rem;

			@media(width > 900px) {
				/*grid-template-columns: 3fr 2fr;*/
				grid-template-columns: 1.25fr 1fr;
			}
		}

		.media {
			position: relative;
			text-align: center;

			.bottle-shot {
				filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .25));
				/*max-width: 275px;*/

				width: 100%;
    		object-fit: contain;
    		max-width: unset;
    		max-height: 500px;
			}

			.sticky-wrap {
				position: sticky;
    		top: calc(var(--header-height) + 4.5rem);
    		/*top: attr(data-attr type(<length>));*/
			}
		}

		.wine-price {
			padding-block: 1.5rem;
		}

		.sold-out-message {
			padding-block: 1rem;
		}
	}

	.details {
		margin-top: 2rem;
		max-width: 450px;

		@media(width <=900px) {
			margin-inline: auto;
		}

		h1 {
			font-size: 2rem;
			margin: 0;
			padding-bottom: 0.75rem;
		}

		h3 {
			font-size: 1.25rem;
			font-weight: 500;
      margin: 0;
      padding-bottom: 0.75rem;
		}

		.kb-dynamic-html h3 {
			padding-top: .25rem;
		}

		.wine-price {
			/*font-size: .9375rem;*/
	
			.number {
				font-size: 1.375em;
				font-weight: 600;
			}

			.club .label button[popovertarget] {
				anchor-name: --club-price-label;
			}

			&.kb-dynamic-html {
				padding-top: .5rem;

				&::before {
					content: "$";
				}
			}
		}

		.wine-price-label {
			display: block;
			font-size: 11px;
			font-weight: 700;
		}
	}

	.description {
		font-size: .9375rem;
		padding-bottom: 2rem;
	}

	.tasting-notes {
		/*font-size: 1.125rem;*/

		h5 {
			padding-bottom: 0.5rem;
		}
	}

	.wine-videos-list {
		list-style: none;

		.video-wrapper {
			iframe {
				max-width: 100%;
			}
		}
	}

	.wine-data {
		padding-top: 2.5rem;
	}

	.vintages-jump-link {
		padding-top: 2rem;

		a {
			font-size: 1rem;
			text-decoration: none;
		}
	}

	.entry-content .wine-fact-sheet {
		padding-top: 1.5rem;
	}

	.wine-scores {
		padding-top: 2rem;
	}

	.entry-content .wine-score {
		margin-bottom: .75rem;
	}

	.actions-buttons {
		padding: 1.25rem 2.3125rem;
	}

	.wine-fact-sheet {
		a {
			color: inherit;
			display: inline-block;
			padding-left: 2rem;
			position: relative;
			text-decoration: none;

			&::before {
				background: url('../img/icons.svg#pdf') 0 50% / contain no-repeat;
				bottom: 0;
				content: "";
				left: 0;
				position: absolute;
				top: 0;
				transition: all .3s;
				width: 1.5rem;
			}

			&:hover {
				&::before {
					transform: translateX(.5rem);
				}
			}

			.label {
				display: block;
				font-size: 1rem;
				font-weight: 700;
			}

			.description {
				font-size: .75rem;
			}

		}

		.entry-content .wine-fact-sheet {
			padding-top: 1.5rem;
		}
	}
}

.wine-score {
	/*background: var(--color-almost-white);
	border: 1px solid var(--color-gold);
	border-radius: 1.5em;*/
	display: inline-flex;
	font-size: .8125rem;
	gap: .333em;
	padding: .333em .666em;

	align-items: center;
  gap: 1rem;

	.wine-score-point {
		align-items: center;
		aspect-ratio: 1;
		background: var(--button-background);
		background: var(--color-almost-white);
		border: 1px solid var(--color-gold);
		/*color: var(--button-color);*/
		border-radius: 50%;
		display: flex;
		/*font-weight: 700;*/
		font-weight: 500;
		padding: .25rem .5rem;
		text-align: center;
	}

	.wine-score-name {
		font-weight: 600;
	}
}

article.entry.type-wine.full {
	.wine-price {
		padding-block: 0;
	}
}

.wine-information {
	background: var(--color-almost-white);
	padding-block: 2.5rem;
	position: relative;

	&::before,
	&::after {
		background: inherit;
		bottom: 0;
		content: "";
		position: absolute;
		top: 0;
		width: 50dvw;
	}

	&::before {
		right: 100%;
	}

	&::after {
		left: 100%;
	}

	/*&>.container {
		display: grid;
		gap: 0 3%;
		grid-template-columns: 28% 69%;
		grid-template-rows: auto 1fr;
		max-width: 1050px;
	}*/

	.wine-stats {
		grid-row: span 2;
		list-style: none;
		margin: -1rem 0 0;
		padding: 0;

		li {
			background-position: 0 50%;
			background-repeat: no-repeat;
			background-size: 1.5rem auto;
			border-bottom: 1px solid var(--color-gray);
			padding: 1rem 0 1rem 2.25rem;
		}

		.wine-origin {
			background-image: url('../img/icons.svg#origin');
		}

		.wine-vintage {
			background-image: url('../img/icons.svg#vintage');
		}

		.wine-alcohol-content {
			background-image: url('../img/icons.svg#alcohol-content');
		}

		.wine-varietal {
			background-image: url('../img/icons.svg#varietal');
		}

		.wine-production {
			background-image: url('../img/icons.svg#production');
		}

		.wine-ph {
			background-image: url('../img/icons.svg#ph');
		}

		.wine-ta {
			background-image: url('../img/icons.svg#ta');
		}

		.wine-composition {
			background-image: url('../img/icons.svg#composition');
			background-position-y: 0;
		}

	}
}

.wine-past-vintages {
	/*margin-inline: auto;
	max-width: 850px;*/

	accordion-tabs + & {
		margin-top: 7rem;
	}

	.eyebrow {
		text-align: center;
	}

	h2 {
		font-weight: 500;
		padding: 1rem .5rem;
		text-align: center;
	}

	ul {
		background: var(--color-white, #fff);
		border-radius: .5rem;
		display: flex;
		flex-direction: column;
		gap: 3rem;
		list-style: none;
		margin: 0;
		padding: 3rem 4.375rem;

		@media(width > 900px) {
			gap: 0;
		}
	}

	li {

		&:not(:last-child) {
			border-bottom: 1px solid var(--color-gray);
			padding-bottom: 1rem;
			margin-bottom: 1rem;
		}

		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			align-items: center;
			gap: 2rem;

			@media(width <=900px) {
				gap: 1.25rem;
				grid-template-columns: auto;
				padding-top: 1rem;
			}

			@media(width > 900px) {
				.item {

					&:has(.wine-fact-sheet) {
						grid-column: 2;
						text-align: center;
					}

					&:has(.tasting-notes) {
						grid-column: 3;
						text-align: right;
					}
				}
			}
		}

		.wrapper {
			padding: 1rem;
		}

		h4 {
			font-size: 1.5625rem;
			margin-bottom: .5em;
			/*text-align: center;*/
		}
	}
}

#related-wines {
	padding-block: 5rem;

	h2 {
		text-align: center;
	}

	.related-wines-list {
		display: grid;
		gap: 2rem;
		padding-top: 3rem;

		@media(width> 1000px) {
			grid-template-columns: repeat(4, 1fr);
		}

		@media(600px < width <= 1000px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

.wp-block-ffws-brands-wine-listing[data-featured]:has(> .item:nth-child(-n+4):last-child) {
	display: grid;
	gap: 4rem 2rem;
	grid-template-columns: repeat(1, 1fr);

	@media(width > 1000px) {
		grid-template-columns: repeat(4, 1fr);
	}

	@media(600px < width <=1000px) {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wp-block-ffws-brands-wine-listing .item {
	margin-inline: auto;
	max-width: 455px;

	@media(width > 900px) {
		&:not(:hover) {
			.action-buttons {
				opacity: 0;
			}
		}
	}
}

.wp-block-ffws-brands-wine-listing,
.event-listing,
.recipe-listing {

	.grid {
		display: grid;
		gap: 4rem 1.5rem;
		grid-template-columns: repeat(1, 1fr);
		list-style: none;
		margin: 0;
		padding: 0;

		@media(600px < width <=1200px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.media img {
		max-width: 100%;
	}
}

.wp-block-ffws-brands-wine-listing {
	&[data-featured] .grid:not(:has(>.item:nth-child(4))) {
		display: flex;

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

	.grid {
		margin-inline: auto;

		@media(width > 1200px) {
			grid-template-columns: repeat(var(--wines-listing-max-columns), 1fr);
		}

		&:not(:has(.item:nth-child(4))) {
			display: flex;
		}
	}

	&[data-featured] {
		.grid {
			@media(width > 1200px) {
				grid-template-columns: repeat(var(--wines-listing-featured-max-columns), 1fr);
			}
		}
	}

	&:not([data-featured]) {
		.grid {
			max-width: var(--wines-listing-max-width);
		}
	}
}

article.type-wine.wine-lineup {
	text-align: center;

	.media {
		height: 320px;
		position: relative;
		transition: all .3s;

		img {
			object-fit: contain;
			height: 100%;
			width: 100%;
		}

		&:hover {
			opacity: .8;
		}

		.wine-score {
			position: absolute;
    	right: 0;
    	top: 0;
		}
	}

	.details {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		gap: .5rem;
		margin: 0;
		padding-top: 1.5rem;

		h3 {
			padding-bottom: .125rem;
		}

		.wine-score {
			align-self: start;
		}

		.vintage {
			font-size: .875rem;
			/*font-weight: 600;*/
		}

		.title,
		.wp-block-kadence-advancedheading {
			font-size: 1.5625rem;
			margin: 0;
		}

		.title {
      font-size: 1.25rem;
      margin-inline: auto;
			line-height: 1.1;
			max-width: 225px;
      text-wrap: balance;
		}

		.title a,
		a:has(.wp-block-kadence-advancedheading) {
			color: var(--color-site-text);
			position: relative;
			text-decoration: none;
			text-decoration-color: transparent;

			&:hover {
				text-decoration-color: currentColor;
			}
		}

		h3 {
			font-size: 1.25rem;
			font-weight: 400;
		}

		.action-buttons {
			align-items: center;
			display: flex;
			justify-content: center;
			gap: .375rem;
			/*padding-top: 1.5rem;*/
			padding-top: .5rem;
			transition: .3s;

			.button {
        font-size: .875rem;
				padding: .5rem 0.75rem;
				white-space: nowrap;
			}
		}
	}
}

:is(.wp-block-ffws-brands-wine-listing, .event-listing, .recipe-listing) .item.hidden {
	display: none;
}

.listing-filters {
	align-items: center;
	display: flex;
	gap: 1rem .5rem;
	padding-bottom: 5rem;

	@media(width > 600px) {
		gap: 1.75rem;
	}

	.form-item {
		align-items: center;
		display: flex;

		@media(width > 900px) {
			width: 25%;

			&:has(select[name="varietal"]) {
				width: 30%;
			}

			&:has(select[name="sort"]) {
				margin-inline: auto 0;

			}
		}
	}

	@media(width <=900px) {
		display: grid;
		grid-template-columns: min-content auto;

		.form-item {
			align-items: center;
			display: grid;
			grid-template-columns: subgrid;
			grid-column: span 2;
		}
	}

	label {
		font-family: var(--font-family-montserrat);
		margin-right: 1.5rem;
		text-align: right;

		@media(width > 600px) {
			font-weight: 600;
		}
	}

	select {
		appearance: none;
		/*background: #fff url('../img/icons.svg#down-arrow') calc(100% - 0.75rem) 50% / 0.75rem 0.75rem no-repeat;*/
		border-radius: .25rem;
		border: .125rem solid var(--color-gray);
		color: var(--color-site-text);
		flex-grow: 1;
		font-family: var(--font-family-montserrat);
		font-size: 1rem;
		font-weight: 500;
		padding: .6875rem 1.5rem;
		line-height: 1.2;
		text-align: center;

		&::picker-icon {
			line-height: 1.5;
		}
	}
}

/* Wine Videos */
#wine-videos {
	padding-block: 5rem;

	h2 {
		font-weight: 500;
		padding: 1rem .5rem;
		text-align: center;
	}

	ul {
		list-style: none;
		margin: 0 auto;
		max-width: 900px;
		padding: 3.25rem 0 0;
	}

	video,
	iframe {
		display: block;
		width: 100%;
	}

	.zoetrope-button {
		filter: brightness(0.5);
	}

	.zoetrope-button-prev {
		left: 0;
		transform: translate(calc(-100% - 2rem), -50%);
	}

	.zoetrope-button-next {
		right: 0;
		transform: translate(calc(100% + 2rem), -50%);
	}

	.zoetrope-dots {
		bottom: -.75rem;
		transform: translate(-50%, 100%);

		button {
			border: 2px solid var(--color-gold) !important;
			height: .75rem !important;
			width: .75rem !important;

			&.active {
				background-color: var(--color-gold) !important;
				border: 2px solid var(--color-gold) !important;
			}
		}
	}
}

/* experiences */
@media(width > 767px) {
	.kb-query-grid-wrap .type-experience:nth-child(even) .kb-row-layout-wrap>.kt-row-column-wrap>.wp-block-kadence-column:first-of-type {
		order: 1;
	}
}

.experience-meta {
	color: var(--color-gray) !important;

	.kb-dynamic-html {
		&::before {
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			display: inline-block;
			height: 2rem;
			margin-right: 1rem;
			vertical-align: middle;
			width: 2rem;
		}

		&.duration:before {
			background-image: url('../img/icons.svg#clock');
		}

		&.price {
			display: flex;

			&::before {
				background-image: url('../img/icons.svg#bill');
			}
		}
	}
}

li.experience .kt-inside-inner-col .wp-block-spacer:last-of-type {
	display: none;
}

#experience-addons .kb-query-grid-wrap>.kb-query-item:only-child {
	align-items: center;
	column-gap: inherit;
	display: inherit;
	grid-column: span 2;
	grid-template-columns: inherit;
	row-gap: inherit;

	.kb-query-item-flip-back {
		display: none;
	}
}

/* Membership page */
.table-wrapper {
	overflow: auto;
	max-width: 100%;
}

#membership-benefits-table {
	background: var(--color-white, #fff);
	border: 1px solid var(--color-gray);
	border-spacing: 0;
	border-width: 0 1px 1px;
	border-collapse: separate;
	margin-inline: auto;
	max-width: 100%;
	min-width: calc(160px + (90px * (var(--columns, 3) - 1)));
	width: 100%;

	thead {
		background: var(--color-site-text);
		/*var(--color-option-1);*/
		color: var(--color-white, #fff);
		font-family: var(--font-family-headings);
		font-size: 1rem;

		th {
			font-size: 1.125rem;
			font-weight: 600;
			letter-spacing: -0.03375rem;
			line-height: 1.2;
			text-align: center;
			padding: .75rem .5rem;

			&:first-child {
				font-size: 1.5rem;
    		letter-spacing: -0.045rem;
			}

			@media(width <=1000px) {
				font-size: .75rem;
			}

			&:not(:first-child) {
				border-left: 1px dashed var(--color-gray);
			}

			span {
				display: block;
				font-family: var(--font-family-body);
				/*font-family: Montserrat, sans-serif;*/
				font-size: 0.6875rem;
				font-weight: 600;
				letter-spacing: 0.03438rem;
				line-height: 1.1;
				padding-bottom: .25rem;
				text-transform: uppercase;
			}
		}
	}

	tbody {
		font-size: .875rem;

		tr {
			&:nth-child(even) {
				background: var(--color-almost-white);
			}
		}

		td {
			border-bottom: 1px solid var(--color-gray);
			padding: .5rem 2rem;

			&:not(:first-child) {
				border-left: 1px solid var(--color-gray);
				text-align: center;
			}
		}
	}

	tfoot {
		td {
			font-size: 1.25rem;
			font-weight: 600;
      letter-spacing: -0.0125rem;
			padding: .5rem 2rem;

			&:not(:first-child) {
				border-left: 1px solid var(--color-gray);
				text-align: right;
			}
		}
	}

	.heading {
		h4 {
			font-size: 1.125rem;
			line-height: 1;
			margin: 0;
			padding-block: .375rem .125rem;
		}
	}

	.included,
	.excluded {
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
		display: block;
		margin-inline: auto;
		min-height: 1rem;
	}

	.excluded,
	.included:empty {
		font-size: 0;
	}

	.included:empty {
		background-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#checkmark');
		width: .875rem;
	}

	.excluded {
		background-image: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#x');
		width: .75rem;
	}
}

/* Events pages */
.event-listing,
.recipe-listing {
	.grid {
		grid-template-columns: 1fr;
	}

	.item > .entry {
    align-items: center;
		display: grid;
    gap: 2rem;

		@media(width > 900px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.media {
		img {
			aspect-ratio: 1.27;
			object-fit: cover;
		}
	}

	.details {
		padding: .75rem 0;

		@media(width > 900px) {
			padding-right: var(--container-gutter);
		}
	}

	.title {
		font-family: var(--font-family-headings);
		font-size: 25px;
		padding-bottom: .5rem;

		a {
			color: inherit;
			text-decoration: none;
		}
	}

	.excerpt {
		padding-bottom: 1rem;
	}
}

.type-event.full {
	.media {
		align-items: center;
		background-color: lightgray;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		justify-content: center;
		margin-left: var(--full-width-margin);
		min-height: calc(50dvh - var(--topbar-height));
		padding: 1rem var(--container-gutter);
		position: relative;
		width: 100dvw;

		&::before {
			background-color: var(--color-backgrounds-backdrops, var(--color-page-link));
			/*var(--color-option-3);*/
			content: "";
			inset: 0 0 0 0;
			opacity: .3;
			position: absolute;
		}

		@media (width > 1081px) {
			min-height: 480px;
		}

		h1 {
			color: var(--color-white, #fff);
			font-size: clamp(1.875rem, 5dvw, 3.0625rem);
			margin-bottom: 1.25rem;
			position: relative;
			text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.45);
		}
	}

	.details {
		display: grid;
		gap: 2rem;
		padding-block: 3rem;

		@media(width > 900px) {
			grid-template-columns: repeat(2, 1fr);
			padding-block: 5rem;
		}

		.title {
			padding-top: .25rem;
		}

		.wp-block-separator {
			margin-inline: 0;
		}

		.buttons {
			padding-block: 1.75rem;
		}

		.event-meta {
			padding-top: 1.25rem;

			h3 {
				margin-bottom: 0.25rem;
			}
		}

		.event-cost .cost-wrapper {
			align-items: center;
			display: flex;
			gap: 0.5rem;

			&>div:first-child::after {
				content: "|";
				padding-left: 0.5rem;
			}
		}

		.gallery {
			width: 520px;

			@media(width <=900px) {
				margin: auto;
			}

			img {
				aspect-ratio: 1.42;
				display: block;
				max-width: 100%;
				object-fit: cover;
			}

			.zoetrope-button {
				filter: invert(1);
				transition: .3s;
			}

			&:hover {
				.zoetrope-button-prev {
					transform: translate(calc(-1rem - 100%), -50%);
				}

				.zoetrope-button-next {
					transform: translate(calc(1rem + 100%), -50%);
				}
			}
		}

		.calendar-links {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			gap: 1.5rem;
			justify-content: center;
			padding-top: 1.5rem;

			@media(width > 900px) {
				padding-inline: 1.5rem;
			}

			a {
				align-items: center;
				display: inline-flex;
				font-size: .875rem;
				font-weight: 700;
				gap: .125rem;
				text-decoration: none;

				&::before {
					-webkit-mask-size: contain;
					mask-size: contain;
					background: currentColor;
					content: "";
					display: block;
					height: 1.5rem;
					width: 1.5rem;
				}
			}

			a[href*="google"]::before {
				-webkit-mask-image: url('../img/icons.svg#google-cal');
				mask-image: url('../img/icons.svg#google-cal');
			}

			a[href*="outlook"]::before {
				-webkit-mask-image: url('../img/icons.svg#outlook-cal');
				mask-image: url('../img/icons.svg#outlook-cal');
				width: 2.5rem;
			}
		}
	}
}

.type-event.full,
.type-recipe.full {
	.social-share {
		display: flex;
		gap: 1rem;
		padding-top: .5rem;

		a {
			align-items: center;
			background: var(--color-page-link);
			border-radius: 50%;
			display: flex;
			flex-grow: 0;
			flex-shrink: 0;
			height: 2rem;
			justify-content: center;
			transition: all .3s;
			width: 2rem;

			&:hover {
				background: var(--color-page-link-hover);
			}
		}

		svg {
			filter: invert(1);
			height: 55%;
			width: 55%;
		}
	}
}

body.single-event .event-listing {
	background: rgba(247, 246, 245, 0.50);
	padding-block: 5rem;
	position: relative;

	&::before,
	&::after {
		background: inherit;
		bottom: 0;
		content: "";
		position: absolute;
		top: 0;
		width: 50dvw;
	}

	&::before {
		right: 100%;
	}

	&::after {
		left: 100%;
	}

	h1 {
		text-align: center;
	}

	.grid {
		padding-top: 3rem;
	}
}

/* POPUP */
dialog.popup {
	--speed: .6s;
	--padding-block: 2.5rem;
	--padding-inline: 2.5rem;

	container: size;
	border: 1px solid var(--color-black);
	box-shadow: 0 0 0px 1px var(--color-white, #fff);
	opacity: 0;
	overflow: hidden;
	padding: var(--padding-block) var(--padding-inline);
	transform: translateY(100%);
	transition: all var(--speed) ease-out, display 0s calc(var(--speed) + var(--slide-in-speed)), overlay 0s calc(var(--speed) + var(--slide-in-speed));

	@media(width > 1200px) {
		width: 700px;
	}

	@media(width <=1200px) {
		max-width: 700px;
		min-width: 400px;
		width: 96dvw;
	}

	&[open] {
		display: flex;
	}

	&::backdrop {
		backdrop-filter: blur(0);
		background-color: rgb(0 0 0 / 0%);
		transition: all var(--slide-in-speed) var(--speed);
	}

	&,
	&::backdrop {
		transition-behavior: allow-discrete !important;
	}

	&[open] {
		opacity: 1;
		transform: translateY(0);
		transition: all var(--speed) var(--slide-in-speed) ease-out;

		html:has(&) {
			overflow: hidden;
		}

		@starting-style {
			opacity: 0;
			transform: translateY(100%);
		}

		&::backdrop {
			backdrop-filter: blur(3px);
			background-color: color(from var(--color-backgrounds-backdrops, var(--color-page-link)) srgb r g b / .7);
			/*color(from var(--color-option-3) srgb r g b / .8);*/
			transition: all var(--slide-in-speed);

			@starting-style {
				backdrop-filter: blur(0);
				background-color: rgb(0 0 0 / 0%);
			}
		}
	}

	form[method="dialog"] {
		button {
			background: transparent url('../img/icons.svg#close') 50% 50% / .875rem auto no-repeat;
			border: 1px solid var(--color-gray);
			border-radius: 50%;
			cursor: pointer;
			font-size: 0;
			height: 2rem;
			outline: none;
			position: absolute;
			right: 0.5rem;
			top: .5rem;
			width: 2rem;
		}
	}

	&>img:first-child {
		inset: 0 auto 0 0;
		object-fit: var(--image-style, cover);
		object-position: 50% 50%;
		position: absolute;

		@media(width > 700px) {
			height: 100%;
			width: 50%;
		}

		@media(width <=700px) {
			height: 50%;
			width: 100%;
		}
	}

	.wrapper {

		img+& {
			align-items: center;
			display: flex;

			@media(width > 700px) {
				padding-left: calc(50% + var(--padding-inline));
			}

			@media(width <=700px) {
				padding-top: calc(50cqh - var(--padding-block));
			}
		}

		.content {
			overflow-x: hidden;
			overflow-y: scroll;
		}

		.gform_validation_errors {
			display: none;
		}
	}
}

/* BLOCKS */
/* HERO */
.hero {
	--heading-color: var(--color-white, #fff);
	--h1-font-size: clamp(2.5rem, 4.25dvw, 3.75rem);
	--h1-color: var(--color-primary-nav-links);
	margin-left: var(--full-width-margin);
	position: relative;
	width: 100dvw;

	.wp-block-cover {
		align-items: flex-end;
		color: var(--color-white, #fff);
		display: flex;
		font-size: 1rem;
		justify-content: center;
    padding: var(--header-height, 3rem) var(--container-gutter) 3rem;
		text-align: center;
		width: 100%;

		body:not(.home) & {
			min-height: calc(var(--hero-height) - var(--topbar-height, 0px));
		
			/*@media(width <=1080px) { max-height: 50dvh; }*/

			.wp-block-cover__inner-container {
				padding-bottom: 0;
			}
		}

		.wp-block-cover__image-background {
			height: 100%;
			inset: 0;
			margin: 0;
			max-height: none;
			max-width: none;
			object-fit: cover;
			outline: none;
			padding: 0;
			position: absolute;
			width: 100%;
		}

		&:has(video, img) .wp-block-cover__background {
			/*background: linear-gradient(180deg, var(--color-gold) 0%, rgba(135, 113, 90, 0.00) 40.39%) !important;*/
			/*background: linear-gradient(180deg, rgb(from var(--color-black) / 0.50) 0%, rgb(from var(--color-black) / 0.50) 50%, rgb(from var(--color-black) / 0) 100%);*/
			background: var(--hero-overlay);
			mix-blend-mode: var(--hero-overlay-blend-mode); 
			opacity: 1 !important;
		}

		.wp-block-cover__inner-container {
			color: var(--color-white, #fff);
			font-size: 1.75rem;
			max-width: calc(800px + (var(--container-gutter) * 2));
			padding: 2rem 0 1.5rem;
			text-shadow: var(--hero-text-shadow);

			h1 {
				&::after {
					background: currentColor;
					content:"";
					display: block;
					height: 2px;
					margin: 1.25rem auto;
					max-width: 160px;
				}
			}
		}

		body.home & {
			min-height: calc(var(--hero-height-home) - var(--topbar-height, 0px));
		}
		
		h1 {
			/*font-size: clamp(1.5rem, 3dvw, 2.5rem);*/
			margin-bottom: 1.25rem;
			text-wrap: balance;

			&:only-child {
				margin-bottom: 0;
			}
		}
	}

	.wp-block-cover:has(video) .wp-block-cover__background {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(0deg, var(--overlay-gold-20, rgba(131, 106, 73, 0.20)) 0%, var(--overlay-gold-20, rgba(131, 106, 73, 0.20)) 100%) !important;
	}

	.zoetrope-track {
		min-width: 100%;

		&>.wp-block-kadence-column {
			--height-multiple: .85;
			min-height: unset;
			aspect-ratio: 2.666;
			max-height: calc((100dvh - var(--header-height)) * var(--height-multiple));
			width: 100%;

			&>.kt-inside-inner-col {
				height: 100%;
			}
		}
	}
}

/* END HERO */

/* DIPTYCH & PANEL */
/*:is(.panel, .diptych, .triptych)>.kt-inside-inner-col {*/
.panel >.kt-inside-inner-col {
	:is(.kt-has-2-columns, .kt-has-3-columns) .wp-block-kadence-column {
		display: flex;

		&>.kt-inside-inner-col {
			display: flex;
			flex-grow: 1;

			&>.wp-block-group {
				flex-grow: 1;
			}
		}
	}
}

.kt-inside-inner-col:has(> .wp-block-image) {
	overflow: hidden;

	figure {
		margin: 0;
	}
}

.panel {
	.wp-block-cover {
		min-height: unset;
	}

	&.dark {
		background-color: color(from var(--color-backgrounds-backdrops, var(--color-page-link)) srgb calc(r - 0.21875) calc(g - .21875) calc(b - 0.21875));
		/*color(from var(--color-option-3) srgb calc(r - 0.21875) calc(g - .21875) calc(b - 0.21875));*/
		color: var(--color-white, #fff);

		a {
			color: var(--color-white, #fff);
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			color: inherit;
		}
	}
}

#experiences,
.text-and-image-block {
	&.full-bleed .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col:has(>*:not(figure,style)) {
		margin-inline: auto;
		max-width: 600px;
		padding-inline: var(--container-gutter);
	}
}

.text-and-image-block {
	.wp-block-image,
	.wp-block-kadence-image {
		img {
			width: 100%;
		}
	}

	figure {
		margin-bottom: 0;
	}
}

@media(width<768px) {
	.text-and-image-block>.kt-inside-inner-col>.kb-row-layout-wrap>.kt-row-column-wrap>.wp-block-kadence-column:has(.wp-block-image) {
		order: -1;
	}
}

@media(width > 767px) {
	.alternate>.kt-inside-inner-col> :is(.kb-row-layout-wrap, .wp-block-kadence-column):nth-child(even) .kt-row-column-wrap>.wp-block-kadence-column:first-child {
		order: 1;
	}
}

.press-testimonial {
	& > .kt-inside-inner-col {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		align-items: center;

		& > p {
			margin-bottom: 0;

			&:not(:last-child) {
				font-size: 2.25rem;
				font-style: italic;
				line-height: 1.25;
				letter-spacing: -0.0225rem;
			}

			&:last-child {
				font-size: 1.625rem;
				line-height: .86538;
			}
		}

		& > figure img {
			margin-inline: auto;
		}
	}	
}

.testimonials-carousel .kb-query-grid-wrap {
	.kt-inside-inner-col> :first-child {
		font-family: var(--font-family-headings);
		font-size: 1rem;
		position: relative;

		@media(width > 900px) {
			font-size: 1.125rem;
		}

		&::before {
			background: transparent url('../img/icons.svg#quote') 50% 50% / contain no-repeat;
			content: "";
			height: 33px;
			margin-right: 1.25rem;
			position: absolute;
			right: 100%;
			top: 0;
			width: 26px;

			@media(width > 1024px) {
				margin-right: 2.75rem;
			}
		}
	}

	.kt-inside-inner-col> :last-child {
		font-family: var(--font-family-body);
		color: var(--color-warm-gray);
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.7px;
		text-transform: uppercase;
	}

	.wp-block-group {
		gap: .75rem;
		margin-top: 1rem;

		.wp-block-kadence-image:not(:last-child) {
			margin-bottom: 0;
		}

		&> :last-child::before {
			content: "-";
			margin-right: .5rem;
		}
	}

	.zoetrope-button-prev {
		left: unset;
		right: 95%;

		@media(width > 600px) {
			right: 100%;
		}
	}

	.zoetrope-button-next {
		left: 95%;
		right: unset;

		@media(width > 600px) {
			left: 100%;
		}
	}
}

/* search results page */
form[data-sf-form-id] {
	&>ul {
		align-items: center;
		display: flex;
		gap: 1rem;
		padding: 0;

		li {
			padding: 0;
		}
	}

	.sf-field-post_type {
		display: none;
	}
}

.search-filter-results {
	.grid__posts {
		/*display: grid;*/
		display: block;
		gap: 2rem;
		padding-block: 2rem;

		.grid__col:not(:last-child) {
			border-bottom: 1px solid var(--color-gray);
			/*padding-bottom: 1.5rem;*/
		}

		.grid__col :is(.c-card__img, .c-card--wine__img) img {
			width: 100%;
		}

		.grid__col > .c-card {
			padding-block: 1.5rem;
		}

		article.grid__card:has(>a),
		.c-card:has(> .c-card--wine__img) {
			display: grid;
			gap: 1.5rem;
			grid-template-columns: 140px 1fr;
		}

		article.grid__card,
		.c-card>.c-card--wine__img {
			&>a {
				word-wrap: unset;

				img {
					aspect-ratio: 1.27;
					contain-intrinsic-size: unset;
					height: auto;
					max-width: 100%;
					object-fit: cover;
				}
			}
		}

		.c-card__heading {
			font-size: 1.5rem;
			margin-top: 0;

			a {
				text-decoration: none;
			}
		}

		.c-card__content {
			padding-top: 0;
		}

		.c-card--wine {
			.c-card--content {
				align-items: flex-start;
			}
		}

		.c-card--wine__img {
			margin-bottom: 0;

			img {
				object-fit: contain !important;
			}
		}
	}

	.sf-navigation.bottom {
		padding-top: 2rem;

		.wp-pagenavi {
			align-items: center;
			display: flex;
			gap: .5rem;
			margin-block: 0;
		}
	}
}

.carousel-gallery {
	width: 100%;

	.kt-blocks-carousel {
		overflow: unset;

		.splide__track {
			overflow: hidden;
		}

		.splide__arrow {
			height: 3rem;
			width: 2rem;
		}

		.splide__arrow--prev {
			background: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#chevron-left') 50% 50% / contain no-repeat;
			transform: translate(calc(-100% - 2rem), -50%);

			@media(width <=1024px) {
				background-color: rgba(0, 0, 0, 0.8);
				transform: translate(0, -50%);
			}
		}

		.splide__arrow--next {
			background: url('/wp-content/themes/ffws-brands-v2/dist/img/icons.svg#chevron-right') 50% 50% / contain no-repeat;
			transform: translate(calc(100% + 2rem), -50%);

			@media(width <=1024px) {
				background-color: rgba(0, 0, 0, 0.8);
				transform: translate(0, -50%);
			}
		}

		svg {
			display: none;
		}
	}

	.kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure .kb-gallery-image-contain {
		height: auto !important;
		padding: 0 !important;

		img {
			aspect-ratio: 1.777;
			height: auto;
			position: static !important;
		}
	}
}

/* winemaking process video carousel */
.video-card-wrapper .wp-block-group,
.wp-block-ffws-brands-zoetrope.video-card-wrapper {
	--width: calc(50dvw - 50%);
	container-type: inline-size;
	gap: 0;
	overflow: hidden;

	@media(width > 1300px) {
		padding-right: calc((100dvw - 100%) / 2);
		width: calc(1200px + var(--width));
	}

	@media(767px < width <=1024px) {
		width: calc(100% + 1rem);
	}

	.zoetrope-track-wrapper {
		/*margin-left: -0.5rem;*/
		overflow: visible;
		width: 100%;
	}

	.video-card {
		aspect-ratio: 0.83;
		border-radius: 1rem;
		container-type: size;
		min-width: 375px;
		min-width: 100%;
		overflow: hidden;
		position: relative;
		transition: transform .3s;
		width: 375px;
		width: 100%;

		&>.kt-inside-inner-col::before {
			background: linear-gradient(transparent 0%, rgba(0, 0, 0, .3) 15%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, .8) 75%, var(--color-black)) 0 0 / auto 150%;
			content: "";
			height: 100%;
			left: 0;
			opacity: .8;
			position: absolute;
			top: 0;
			transition: background-position .3s cubic-bezier(.38, .41, .27, 1);
			width: 100%;
		}

		&:hover {
			transform: scale(1.0125);

			&>.kt-inside-inner-col::before {
				background-position: 0 100%;
			}
		}

		.card-image {
			aspect-ratio: .83;
			position: relative;
			z-index: -1;

			img {
				height: 100%;
				left: 0;
				object-fit: cover;
				position: absolute;
				top: 0;
				width: 100%;
			}
		}

		.card-text {
			position: absolute;
			top: 25cqh;
			transition: all .3s cubic-bezier(.38, .41, .27, 1);

			p {
				opacity: 0;
				transition: all .3s;
			}

			.video-card:hover & {
				top: 0;

				p {
					opacity: 1;
				}
			}
		}

		.card-meta {
			bottom: 0;
			position: absolute;
			width: 100%;

			.wp-block-button__link,
			button:not([popovertargetaction="hide"]) {
				border: 2px solid var(--color-white, #fff);
				color: var(--color-white, #fff);
				padding: 14px 24px 14px 24px;
				transform: translate(100%, -100%);

				&:hover {
					background: var(--color-white, #fff);
					color: var(--color-black);
				}
			}
		}

		.wp-block-kadence-modal {
			text-align: left !important;

			.kt-blocks-modal-link {
				text-transform: uppercase;
			}
		}
	}

	.wp-block-video {
		margin: 0;
	}

	video {
		aspect-ratio: 1.777;
		width: 100%;
	}
}

.video-card-wrapper .wp-block-group .wp-block-kadence-column:has(>.kt-inside-inner-col > .video-card),
.wp-block-ffws-brands-zoetrope.video-card-wrapper .wp-block-kadence-column:has(>.kt-inside-inner-col > .video-card) {
	width: 100cqw;

	@media(width > 1300px) {
		width: calc(100cqw / 3);
		flex-shrink: 0;
	}

	@media(1024px < width <=1300px) {
		width: calc((100cqw / 3) + 0.375rem);
	}

	@media(767px < width <=1024px) {
		width: calc((100cqw / 2) + 0.5rem);
	}
}

/* store locator */
#grappos-store-locator {
	width: 100%;

	iframe {
		border: none;
		height: clamp(300px, 80dvh, 700px);
		overflow: hidden;
		width: 100%;
	}
}

/* recipes */
.type-recipe.full {
	padding-bottom: 3rem;

	@media(width > 900px) {
		grid-template-columns: repeat(2, 1fr);
		padding-bottom: 5rem;
	}

	.entry-content {
    max-width: var(--container-width) !important;
  }

  .content-wrap {
    margin-left: auto;
    margin-right: auto; 
    max-width: var(--grid-width-narrow);
		padding-top: 3rem;
  }

	header {
		/*display: grid;*/
		gap: 2rem;
		padding-bottom: 5rem;

		@media(width > 900px) {
			grid-template-columns: repeat(2, 1fr);
		}

		.title {
			padding-top: .25rem;
		}

		.wp-block-separator {
			margin-inline: 0;
		}

		.image {
			display: none;
		}

		.info {
			max-width: 480px;
		}

		.meta {
			display: flex;
			gap: 2rem 1rem;
			justify-content: space-between;
			padding-top: 1.25rem;

			@media(width <=600px) {
				flex-wrap: wrap;

				&>div {
					flex-basis: calc(50% - .5rem);
				}
			}

			h4 {
				margin-bottom: 0.25rem;
			}
		}
	}

	.wine-pairing {
		padding-bottom: 3.5rem;

		&:has(.wine-pairing-description) {
			align-items: start;
			display: grid;
			gap: 3rem;

			@media(width > 600px) {
				grid-template-columns: auto 1fr;
			}
		}

		.wine {
			align-items: center;
			display: grid;
			gap: 2rem;
			grid-template-columns: 65px 1fr;
		}

		.wine-pairing-shop-link {
			padding-top: 1rem;
		}
	}

	.details {
		.c-recipe-content__heading+ul {
			background-color: var(--color-almost-white);
			border-top: 5px solid var(--color-gray);
			column-count: 2;
			column-gap: var(--spacing-l);
			list-style: none;
			margin: 0 0 24px 0;
			padding: 24px 32px;

			li {
				margin-bottom: .5rem;
				padding-left: 1.75rem;

				&::before {
					background: url('/wp-content/themes/foley/dist/css/images/icon-tick.ed85e6f4.png') no-repeat 50% / contain;
					content: "";
					display: inline-block;
					height: 20px;
					margin-left: -1.75rem;
					margin-right: .5rem;
					vertical-align: text-top;
					width: 1.25rem;
				}
			}
		}
	}

	footer {

		display: flex;
		gap: 2rem;

		padding-top: 3rem;

		@media(width > 600px) {
			align-items: center;
			justify-content: space-between;
		}

		@media(width <=600px) {
			flex-direction: column;
		}
	}

}

/* page navigation */
.wp-block-ffws-brands-page-navigation {
	ul {
		align-items: center;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		list-style: none;
		margin: 0;
		padding: 0;

		li {

			&:first-child {
				a {
					&::before {
						content: "<";
					}
				}
			}

			&:last-child {
				a {
					&::after {
						content: ">";
					}
				}
			}

			a {
				align-items: center;
				display: flex;
				gap: .5rem;
				text-decoration: none;
			}
		}
	}
}

/* accordion-tabs */
accordion-tabs {
	container-type: inline-size;
	display: block;
	width: 100%;

	@media(width<=600px) {
		background: #fff;
		padding: 1rem;
	}
	
	& > :not(.label-wrap, .accordion-wrap) {
		display: none;
	}
	
	.label-wrap {
    align-items: stretch;
    display: flex;
		gap: .25rem;
		
		button {
			background: #f9f9f9;
			border: unset;
			border-radius: .25rem .25rem 0 0;
			cursor: pointer;
			flex-grow: 1;
			font-size: .875rem;
			font-weight: 600;
			max-width: 250px;
			padding: .5rem 1.5rem;
			text-transform: uppercase;
			transition: background .3s;
			
			&.active, &:hover {
				background: #fff;
			}
		}
	}
	
	.accordion-wrap {
		@media(width > 600px) {
			background: #fff;
			border-radius: 0 0 .5rem .5rem;
			padding: 3rem 4.375rem;
		}

		@media(width<=600px) {
			border: 1px solid #000;
		}
	}

	details {
		border-bottom: 1px;
		
		&::details-content {
			block-size: 0;
			overflow: hidden;
			transition: block-size 0.5s ease, content-visibility 0.5s ease allow-discrete;
		}
		
		&[open]::details-content {
		  block-size: auto;
		}
		
		summary {
			align-items: center;
			cursor: pointer;
			display: flex;
			width: fit-content;
			
			&::marker {
				content: none;
			}

			&::before {
				content: "+";
				font-size: 1.25em;
				line-height: 1.6rem;
				margin-right: 0.25rem;
				min-width: .75rem;
				translate: 0 -10%;
			}

			@media(width<=600px) {
				border-top: 1px solid;
				justify-content: space-between;
				padding: .5rem 1rem;
				width: 100%;

				&::before {
					order: 1;
				}
			}
		}

		& > :not(summary) {
			margin-block: 1rem 0;
			padding-inline: 1rem;

			&:last-child {
				padding-bottom: 1rem;
			}
		}

		@media(width<=600px) {
			&:first-child {
				summary {
					border-top: 0;
				}
			}
		}
		
		&[open] {
			summary {
				&::before {
					content:"-";
					font-size: 1.5em;
				}
			}
		}
	}
	
	@container (width <= 600px) {
		.label-wrap {
			display: none;
		}
	}
	
	@container (width > 600px) {
		details {
			
			&::details-content {
				opacity: 0;
				transition: content-visibility 0.2s .2s, opacity .2s;
			}

			&[open]::details-content {
				opacity: 1;
				transition: block-size 0.2s, content-visibility 0.2s, opacity .75s .2s ease;
			}
			
			summary {
				display: none;
			}
		}		
	}
}

#club-price-popover {
	--move: 0 2rem
	inset: auto;
  margin: 0;

  width: max-content;
  max-width: min(400px, 70dvw);
	left: unset;
	justify-content: center;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.75rem;
	margin-right: 10px;
	text-align: center;
	border: 1px solid #999;
	outline: 1px solid #ccc;
  outline-offset: -5px;
	scale: .925;
	translate: var(--move);

	@media(width > 900px) {
		--move: 2rem 0;
		gap: 2rem;
		padding: 2rem;
	}

  position-anchor: --club-price-label;
  position-area: left;
  align-self: anchor-center; 

  position-try-fallbacks: --above, --below;

	&:popover-open {
		display: flex;
		scale: 1;
		translate: 0 0;

		@starting-style {
			scale: .925;
			translate: var(--move);
		}
	}

	button[popovertargetaction="hide"] {
		@media(width > 900px) {
			right: .25rem;
    	top: .25rem;
		}
	}

	.small {
		font-size: .8em;
	}
}

@position-try --above {
  position-area: top;
  justify-self: anchor-center;
  align-self: end;
	margin-bottom: 1rem;
	margin-right: 0;
}

@position-try --below {
  position-area: bottom;
  justify-self: anchor-center;
  align-self: start;
	margin-right: 0;
	margin-top: 1rem;
}