* {
	box-sizing: border-box;
}

@view-transition {
	navigation: auto;
}

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

:root {
	--double-gutter: calc(2 * var(--container-gutter));
	--container-width: calc( 1200px + var(--double-gutter) );
	--container-large-width: 90rem;
	--container-medium-width: 75rem;
	--container-small-width: 950px;
	--container-gutter: 1rem;
	
	--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-baskerville: "baskerville-urw", serif;
	--font-family-montserrat: Montserrat, serif;
	--font-family-playfair: "Playfair Display", serif;

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

	--font-weight-regular: 400;
	--font-weight-semi-bold: 600;
	--font-weight-bold: 700;
	--font-size-body-desktop: 16px;
	--font-size-body-mobile: 16px;
	--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(--font-size-h3-desktop);
	--line-height-large: 1.5;
	--font-size-extra-large: var(--font-size-h2-desktop);
	--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;
	--font-size-button: 18px;
	--line-height-button: 1.167;
	
	--gold: #b3a369;
	--icon-gold: #7f6d47;
	--dark-gold: #8a7442;
	--almost-white: #fafafa;
	--white: #fff;
	--black: #000;
	--light-gray: #f7f7f7;
	--mid-gray: #ededed;
	--mid-dark-gray: #d4d4d4;
	--semi-dark-gray: #6e6e6e;
	--tan: #efede8;
	--dark-red: #6f0813;
	--border-divider-default: #cacaca;
	
	--membership-icon-color: var(--color-eyebrow, var(--color-heading-text, #000));/*var(--color-option-4);*/
	--membership-icon-stroke-width: 1px;
	--membership-icon-stroke-width-thick: 1.5px;
	--membership-icon-background-color: color(from var(--color-backgrounds-backdrops, var(--color-page-link)) srgb r g b / .1);
	
	background-color: var(--color-site-background, #fff);
	font-size: var(--font-size-body-desktop);
	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: 400 1.125rem/var(--line-height-body-desktop) var(--font-family-body);
}

#page {
	overflow: hidden;
}

p {
	margin: 0 0 1rem;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	&.has-large-font-size {
		font-size: 2rem !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, h2, h3, h4, h5, h6 {
	color: var(--color-heading-text, var(--color-site-text, #000));
	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 {
	font-size: clamp(1.5rem, 4dvw, 2.1875rem);
}

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

h2 {
	font-size: clamp(1.4rem, 3.325dvw, 1.82rem);
	
	a:hover {
		text-decoration: underline;
	}
}

h3 {
	font-size: clamp(1.1875rem, 2.8dvw, 1.53rem);
}

h4 {
	font-size: clamp(1rem, 2.35dvw, 1.285rem);
}

h4.wp-block-heading {
	margin-bottom: .25em;
}

h5 {
	font-size: clamp(.85rem, 2dvw, 1.1rem);
}

h6 {
	font-size: clamp(.72rem, 1.666dvw, .925rem);
	
	em a {
		color: var(--color-page-link);
	}
}


.eyebrow > :is(h1, h2, h3, h4, h4, h6),
.eyebrow {
	color: var(--color-eyebrow, var(--color-heading-text, #000)) !important;
	font-family: var(--font-family-button);
	font-size: .875rem;
	font-weight: 400;
	letter-spacing: 0.7px;
	text-transform: uppercase;	
}

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;
	}
}

input:is([type="text"], [type="email"], [type="number"]) {
	background-color: #fff;
	border: 1px solid #3a3a3a;
	border-radius: 0;
	color: #222;
	font-family: Open Sans, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	outline: none;
	padding: .6875rem .5rem;
	text-decoration: none;
	text-overflow: ellipsis;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
	
	&:focus {
		border-color: #780f0f;
	}
}

.gform_heading .gform_required_legend {
	display: none;
}

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

/* BUTTON */

.button, 
input[type="submit"],
.wp-element-button,
.wp-block-button.is-style-outline > .wp-element-button {
	background-color: var(--color-page-link);
	border: none;
	border-radius: 48px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-family-button);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .05em;
	padding: .875rem 1.5rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: all .3s;

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

	&.disabled {
		opacity: .4;
    pointer-events: none;
	}
}

.ghost {
	&.button,
	& > .wp-element-button {
		background: transparent;
		color: #32373c;
		font-weight: 600;
		
		&:hover {
			background: #eee;
		}
	}
}

.wp-block-button.is-style-outline > .wp-element-button,
.button.outline {
	background: #fff;
	border: 1px solid var(--color-site-text);
	color: var(--color-site-text);
	
	&:hover {
		background-color: var(--color-page-link);
		color: #fff;
	}
}

.wp-block-kadence-advancedbtn .kt-button {
	background-color: var(--color-page-link) !important;
	border: none !important;
	border-radius: 48px !important;
	color: #fff !important;
	cursor: pointer !important;
	display: inline-block !important;
	font-family: var(--font-family-button) !important;
	font-size: .8125rem !important;
	font-weight: 600 !important;
	letter-spacing: .05em !important;
	padding: .875rem 1.5rem !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	transition: all .3s !important;
	
	&:hover {
		background-color: var(--color-page-link-hover) !important;
	}
	
	&.kb-btn-global-outline {
		background: #fff !important;
		border: 1px solid var(--color-page-link) !important;
		color: var(--color-page-link) !important;
		
		&:hover {
			border: 1px solid var(--color-page-link-hover) !important;
			color: var(--color-page-link-hover) !important;
		}
	}
	
	&.kb-btn-global-inherit {
		background: transparent !important;
		color: #32373c !important;
		font-weight: 600 !important;
			
		&:hover {
			background: #eee !important;
		}
	}
}

.icon-search {
	background: url('/wp-content/themes/ffws-brands/dist/img/icons.svg#search') 50% 50% / contain no-repeat;
	border: none;
	cursor: pointer;
	display: block;
	font-size: 0;
	height: 1.675rem;
	padding: 0;
	position: relative;
	margin-inline: 0;
	transition: all .3s;
	width: 1.5rem;
}

/* 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,#000))) !important;
	}
	
	.aos-animate & {
		animation: .3s 1s both draw-separator-line;
	}
	
	.panel.dark & {
		border-color: currentColor;
	}
}

@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 {
	margin-left: calc( -1 * var(--container-gutter) ) !important;
	width: 100dvw;
	
	@media (width > 1280px) {
		margin-left: calc(( -1 * var(--container-gutter)) - (( 100dvw - var(--container-width)) / 2 )) !important;	
	}
	
	.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;
	}
}

#main {
	padding-top: var(--header-height);
}


.zoetrope {

	& .zoetrope-dots {
		align-items: center;
		
		button {
			background: transparent !important;
			border: 1px solid #000;
			font-size: 0;
			height: .5rem !important;
			padding: 0;
			width: .5rem !important;
			
			&.active {
				background: #000 !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;
	}
	
	.zoetrope-button-next {
		background: transparent url('../img/icons.svg#arrow-right') 50% 50% / contain no-repeat;
	}
}

[popover] {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--mid-dark-gray);
	max-width: 94dvw;
	opacity: 0;
	overflow: visible;
	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;
	}
	
	[popovertargetaction="hide"] {
		background: #fff url('../img/icons.svg#close') 50% 50% / .875rem auto no-repeat;
		border: 1px solid #cacaca;
		border-radius: 50%;
		content:"";
		cursor: pointer;
		font-size: 0;
		height: 2rem;
		outline: none;
		position: absolute;
		right: 0;
		top: 0;
		transform: translate(100%, -100%);
		width: 2rem;
	}
}

[popover]:popover-open {
	opacity: 1;
	
	&::backdrop {
		background: color(from var(--color-backgrounds-backdrops, var(--color-page-link)) srgb r g b / .8);/*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 { 
	background: #fff;
	border-bottom: 1px solid #dbdbdb;
	font-family: var(--font-family-body-store);
	padding-block: .5rem;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	transition: all .3s;
	z-index: 3;
	
	@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;
		}
	}
	
	& > .container {
		align-items: center;
		display: grid;
		grid-template-columns: auto auto;	
		position: relative;
		gap: 2.5rem 2rem;
		
		@media(width > 1200px) {
			grid-template-columns: auto 1fr auto auto;
		}
		
		@media (width > 1200px) {
			max-width: unset;
		}
		
		@media(width <= 1200px) {
			gap-inline: 1rem;
			grid-template-columns: 80px auto 80px;
		}
		
		/*@media(width < 768px) {
			display: block;
		}*/
	}
		
	.site-branding {
		align-items: center;
		display: flex;
		grid-column: 1;
		
		@media(width <= 1200px) {
			grid-column: 2;
			justify-content: center;
		}

		.site-logo > a {
			display: block;
			height: 100px;
			transition: all .3s;
			width: 100px;

			@media(width <= 1200px) {
				margin-inline: auto;
				max-width: 160px;
				width: 100%;
			}

			html.scrolled & {
				height: 60px;
			}

			img {
				display: block;
				height: 100%;
				margin: auto;
				object-fit: contain;
				width: 100%;
			}
		}
	}
	
	.links, .icons {
		display: flex;
		gap: 0 2rem;
		
		/*&:empty { display: none; }*/
		
		@media(width < 1360px) {
			justify-content: end;
		}
	}
	
	.links {
		margin-inline: auto 0;
		
		@media(width <= 1200px) {
			display: none;
		}
		
		a {
			border-bottom: 1px solid var(--color-page-link);
			color: var(--color-page-link);
			display: inline-block;
			font-family: var(--font-family-montserrat);
			font-size: .8125rem;
			font-weight: 600;
			line-height: 1;
			margin-inline: 2px;
			padding-block: 1px;
			text-transform: uppercase;
			letter-spacing: .05em;
			text-decoration: none;
			
			&:hover {
				border-color: transparent;
			}
		}
	}
	
	.icons {
		align-items: center;
		
		@media(width < 1360px) {
			gap: 1.5rem;
		}
		
		@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 {
		align-items: center;
		display: flex;
		gap: 1rem 2.5rem;
		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: #fff;	
		}
	}
	
	.primary-menu-container {
		
		@media(width > 1360px) {
			padding-left: 1.5rem;
		}
		
		& > .menu-wrapper {
	
			& > li { 
				position: relative;
				
				& > a {
					color: var(--color-primary-nav-links);
					display: block;
					font-family: var(--font-family-montserrat);
					font-size: .875rem;
					font-weight: 600;
					letter-spacing: .05em;
					line-height: 1;
					position: relative;
					text-decoration: none;
					text-transform: uppercase;
					z-index: 2;
					
					&::after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						height: 2px;
						background-color: #958666;
						transform: translateY(.8125rem);
						opacity: 0;
						transition: .3s;
						width: 0;
					}
					
					&:hover::after {
						color: var(--color-primary-nav-hover);
						opacity: 1;
						width: 100%;
					}
				}
				
				.sub-menu-wrap {
					--width: calc(100% + 3rem);
					left: 50%;
					min-width: max(var(--width), 200px);
					opacity: 0;
					pointer-events: none;
					position: absolute;
					text-align: center;
					top: 50%;
					transform: translateX(-50%);
					transition: all .3s;
					
					&:before {
						content:"";
						display:block;
						height: calc(var(--header-height)* .5);
					}
				}
				
				&:hover { 
					color: var(--color-site-text);
					
					&::after {
						opacity: 1;
						width: 100%;
					}
					
					.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: 1rem;
						}
					}
				}
			}	
				
				
				
				
			.sub-menu {
				align-items: start;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				padding: 0;
				
				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 {
	--backdrop-speed: .3s;
	--speed: .3s;
	
	background: linear-gradient(180deg, #efede8 66px, #fff 66px);
	border: 0;
	height: 100dvh;
	left: 0;
	margin: 0;
	max-height: unset;
	max-width: unset;
	opacity: 0;
	padding: 66px 1.5rem 2rem;
	position: fixed;
	top: 0;
	transform: translateX(-100%);
	transition: all var(--speed) ease-out, display 0s var(--speed);
	width: calc( 100dvw - var(--container-gutter) );
	z-index: 15;
	
	/*@media(width > 1200px) {
		display: none;
	}*/

	&, &::backdrop { transition-behavior: allow-discrete !important; }
	
	&[open] {
		opacity: 1;
		transform: translateX(0);
		transition: all var(--speed) ease-out;
		
		@starting-style {
			opacity: 0;
			transform: translateX(-100%);
		}
	}
	
	&::backdrop {
		background: color(from var(--color-backgrounds-backdrops, var(--color-page-link)) srgb r g b / .8);/*color(from var(--color-option-3) srgb r g b / .8);*/
		backdrop-filter: blur(3px);
	}
}

dialog.slide-in {
	hamburger-button, form[method="dialog"] button {
		background: transparent url('../img/icons.svg#close') 50% 50% / contain no-repeat;
		border: none;
		cursor: pointer;
		font-size: 0;
		height: 22px;
		left: unset;
		outline: none;
		padding: 0;
		position: absolute;
		right: calc(var(--container-gutter) + .75rem);
		top: 33px;
		transform: translateY(-50%);
		width: 22px;
	}
}

#mobile-menu {
	background: #fff;
	font-family: var(--font-family-montserrat);
	padding-bottom: 1rem;
	padding-inline: 0;
	
	.wrapper {
		height: 100%;
		overflow: scroll;
		padding-inline: 1.5rem;
	}
	
	form[method="dialog"] {
		align-items: center;
		background: #efede8;
		display: flex;
		justify-content: flex-end;
		left: 0;
		height: 66px;
		position: absolute;
		transform: translateY(-100%);
		width: 100%;
	}

	.primary-menu-container {
		padding-top: 1.75rem;
	}
	
	.primary-menu-container > ul {
		display: flex;
		flex-direction: column;
		gap: 1.625rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}
		
	.primary-menu-container, 
	.links{
		a {
			color: #121212;
			font-size: .875rem;
			font-weight: 600;
			letter-spacing: .04375rem;
			text-decoration: none;
			text-transform: uppercase;
		}
	}
	
	.links:empty,
	.icons:empty,
	.contact-info:empty {
		display: none;
	}
	
	.links {
		display: flex;
		flex-direction: column;
		gap: 1.625rem;
		padding-block: 2rem 1.75rem;
	}
	
	.icons {
		align-items: center;
		border-top: 1px solid #cacaca;
		display: flex;
		gap: .5rem;
		justify-content: space-between;
		margin-inline: -1.5rem;
		padding: 2rem 1.5rem;

		&:has(>.item:only-child) {
			justify-content: start;
		}

		.item { 
			flex: auto;

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


		.icon-search { 
    	margin: 0 auto 1rem;
			position: relative;

			&::after {
				content: "Search";
				display: block;
				font-size: .625rem;
				font-weight: 600;
        left: 50%;
				padding-top: calc(1.675rem + .25rem);
				position: absolute;
				text-align: center;
				text-decoration: underline;
				text-transform: uppercase;
        top: 0;
        transform: translateX(-50%);
			}
		}

		.item:only-child .icon-search {
			margin-inline: .5rem;
		}
	}	
	
	.contact-info {
		border-top: 1px solid #cacaca;
		color: #555;
		font-size: .916rem;
		padding-top: 1.25rem;
		
		h4 {
			color: var(--dark-red);
			font-family: var(--font-family-body-store);
			font-size: .875rem;
			font-weight: 600;
			margin: 0;
			padding-block: .875rem 1.25rem;
			text-transform: uppercase;
		}
		
		a {
			color: #555;
			text-decoration: none;
		}
		
		.phone-email h4 {
			padding-top: 0;
		}
	}
	
	sf-account-container,
	.search-form-wrapper,
	sf-cart {
		&::after {
			display: block;
			font-size: .625rem;
			font-weight: 600;
			text-transform: uppercase;
			text-decoration: underline;
			padding-top: .25rem;
		}
	}
	
	sf-account-container::after {
		content: "Account";
	}
	
	.search-form-wrapper::after {
		content: "Search";
	}
	
	sf-cart::after {
		content: "Bag";
	}
}

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

.hamburger { 	
	background: none;
	border: none;
	cursor: pointer;
	position: absolute;
	left: var(--container-gutter);
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	z-index: 10;
	
	@media(width > 1200px) {
		display: none;
	}
	
	span, 
	&::before,
	&::after {
		background-color: #092d3f;
		border-radius: .125rem;
		content: '';
		display: block;
		height: .125rem;
		margin: 0.5rem 0;
		transition: all .2s ease-in-out;
	}

	html.menu-open & {		
		span { 
			transform: scale(0);
		}
		
		&::before {
			transform: translateY(.625rem) rotate(135deg);
		}
		
		&::after {
			transform: translateY(-.625rem) rotate(-135deg);
		}	
	}
}

hamburger-button {
	--color: var(--color-site-text);/*#262626;*/
	--height: 18;
	--width: 22;
}

#masthead hamburger-button {
	left: 1.25rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	
	@media(width > 1200px) {
		display: none;
	}
}




/* TopBar */
body {
	transition: padding .3s;
}
body:has(#topbar:not(.inactive)) {
	padding-top: var(--topbar-height, 0);
}

#topbar {
	background: var(--color-top-bar-bg);
	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: 0;*/
		right: var(--container-gutter);
		top: 50%;
		width: 1.25rem;
		transform: translate(0px, -50%);
		display: none;
		
		/*@media(width >= 768px) {
			right: var(--container-gutter);
		}*/
	}
}

#topbar-banners {
	margin-inline: auto;
	/*max-width: 1280px;*/
	padding-inline: 0;

	@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;
		/*left: 0;*/
		transform: translate(-100%, -50%);

		@media(width >= 1360px) {
			left: -2rem;
		}
		
		@media(1080px <= width < 1360px) {
			left: -1rem;
		}
	}
	
	.zoetrope-button-next {
		right: 1rem;
		/*right: 0;*/
		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 {
	display: inline-block;
	vertical-align: middle;
}

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

sf-account-container {
	position: relative;
	
	#masthead & {
		@media(max-width:1079px) {
			left: 100%;
			margin-left: 3rem;
			position: absolute;
			top: 50%;
			transform: translate(calc(var(--container-gutter) - 100dvw), -50%);
		}
		
		@media(max-width:767px) {
			margin-left: 4rem;	
		}
	}

	ul {
		background-color: #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);/*var(--color-option-1);*/
			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;
		display: flex;
		font-size: 0;
		justify-content: center;
		
		&::before {
			background: url('/wp-content/themes/ffws-brands/dist/img/icons.svg#user') 50% 50% / contain no-repeat;
			content:"";
			display: block;
			height: 1.5rem;
			transition: all .3s;
			width: 1.5rem;
		}
		
		&:not(:hover)::before {
			filter: grayscale(1);
		}
		
		span {
			display: none;
		}
	}
}

:is(.icons, #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: #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/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;
			}
		}
	}
}

:is(#mobile-search,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/dist/img/icons.svg#search') 0% 50% / 1.5rem auto no-repeat;
			border-bottom: 1px solid #cacaca;
			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%;
		}
		
		button[type="submit"] {
			background-color: var(--color-page-link);
			border: none;
			border-radius: 48px;
			color: #fff;
			cursor: pointer;
			display: inline-block;
			font-family: var(--font-family-button);
			font-size: .8125rem;
			font-weight: 600;
			line-height: 1;
			letter-spacing: .05em;
			padding: .875rem 1.5rem;
			text-align: center;
			text-transform: uppercase;
			transition: all .3s;
			
			&:hover {
				background-color: var(--color-page-link-hover);
				color: #fff;
			}
		}
	}
}

aside#site-search {
  background: hsl(from var(--color-backgrounds-backdrops, var(--color-page-link)) h s calc(l + 30));
	opacity: 0;
  padding: 3rem;
  position: fixed;
  top: calc(var(--topbar-height, 0px) + var(--header-height));
	transform: translateY(-100%);
	transition: all .3s;
  width: 100%;
	z-index: 2;

	@media(width < 1080px) {
		--speed: .3s;
		background: linear-gradient(180deg, #efede8 66px, #fff 66px);
		border: 0;
		height: 100dvh;
		left: 0;
		margin: 0;
		/*max-height: unset;
		max-width: unset;*/
		padding: 66px 1.5rem 2rem;
		position: fixed;
		top: 0;
		transform: translateX(-100%);
		transition: all var(--speed) ease-out, display 0s var(--speed);
		width: calc(100dvw - var(--container-gutter));
		z-index: 21;
	}

	&.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[type="submit"] {
    background-color: var(--color-page-link);
    border: none;
    border-radius: 48px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-family-button);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .05em;
    padding: .875rem 1.5rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s;
  }

  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 { 
	padding: 0rem 0.6875rem;
	position: relative;
	
	#masthead & {
		width: 22px;
		
		&:not([basket-total="0"]) { 
			transform: translate(0px, -3px);
			
			& > a {
				color: #fff;
				
				&::before {
					background-color: #000;	
					clip-path: url('/wp-content/themes/ffws-brands/dist/img/icons.svg#clip-bag');
					transform: translateY(-1px) scale(1.2);
					z-index: -1;
				}
				
				&:hover {
					&::before {
						background-color: var(--icon-gold);
					}
				}
			}
		}
		
		&[basket-total="0"] { 
			transform: translate(0px, 0px);
			
			& > a {
				transform: translate(-4px, -4px);
			}
		}
	}
	
	& > a {
		align-items: center;
		color: inherit;
		display: inline-flex;
		font-size: .625rem;
		font-weight: 600;
		justify-content: center;
		line-height: 1;
		text-decoration: none;
		
		#masthead & {
			transform: translate(-7px, 2px);
		}
		
		&::before {
			background: url('/wp-content/themes/ffws-brands/dist/img/icons.svg#bag') 50% 50% / contain no-repeat;
			content: "";
			display: block;
			height: 1.625rem;
			position: absolute;
			transform: translateY(-3px);
			transition: all .3s;
			width: 1.625rem;
		}
		
		&:not(:hover)::before {
			filter: grayscale(1);
		}
	}
	
	&[basket-total="0"] > a {
		color: transparent;
	}
	
	.minicart {
		background-color: color-mix(in srgb, var(--color-backgrounds-backdrops, var(--color-page-link)) 30%, #fff 100%);/*color-mix(in srgb, var(--color-option-3) 30%, #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: #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 {
	border-top: 1px solid #cacaca;
	color: var(--color-footer-main-text);
	font-family: var(--font-family-body-store);
	
	ul.menu {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	a:not(.button) {
		color: var(--color-footer-main-links);
	}
	
	.button, input[type=submit], .wp-element-button {
		background-color: var(--color-footer-main-links);
		color: #fff;
		padding: 1.25rem 2.625rem;	
	}
}

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

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

	@media(width < 1080px) {
		grid-template-columns: 1fr;
	}

	h3 {
		color: var(--color-newsletter-text, #fff);
		font-size: 1.5rem;
		font-weight: 600;
		margin: 0 0 .5rem;
	}
	
	.button {
		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, #fff);
		font-size: 1rem;
		
		&:hover {
			background-color: var(--color-page-link-hover);
		}
	}
}

#menu-social {

	& > ul {
		flex-direction: row;
		gap: .5rem;
	}
	
	li {
		border: 1px solid #dbdbdb;
		border-radius: 50%;
		padding: .4375rem;
	}
	
	a {
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
		font-size: 0;
		height: 1.5rem;
		width: 1.5rem;
		
		svg {
			height: 100%;
			width: 100%;
			
			use {
				fill: var(--color-site-text);
				transition: all .3s;
			}
		}
		
		&:hover {
			use {
				fill: var(--dark-red);
			}
		}
	}
}

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


#footer-section-menu {
	border-top: 1px solid #cacaca;
	font-size: 1rem;
	padding-block: 2.5rem 1.5rem;
	
	@media(width >= 1080px) {
		padding-block: 2.5rem;
	}
	
	& > .container {
		display: grid;
		gap: 2rem;		
		grid-template-columns: repeat(3, 1fr);
		
		@media(width <= 768px) {
			grid-template-columns: 1fr;
		}
	}
	
	ul.menu {
		flex-direction: column;
		gap: .5rem;
		
		a {
			font-size: 1rem;
			text-decoration: none;
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
	
	#menu-social ul {
		flex-direction: row;
	}
	
	h4 {
		color:var(--dark-red);
		font-family: var(--font-family-body-store);
		font-size: .875rem;
		font-weight: 600;
		margin: 0;
		padding: 0 0 0.625rem;
		text-transform: uppercase;
	}
	
	.business-hours {
		padding-top: 1.125rem;
	}

	:is(.phone, .email) {
		padding-block: .25rem .75rem;
		 
		a { 
			align-items: center;
			display: flex;
			gap: .5rem;

			&::before {
				background-color: #efede8;
				background-position: 50% 50%;
				background-size: 1rem auto;
				background-repeat: no-repeat;
				border-radius: 50%;
				content:"";
				display: block;
				height: 1.5rem;
				width: 1.5rem;
			}
		}
	}

	.phone a::before {
		background-image: url('../img/icons.svg#phone');
	}
	
	.email a::before {
		background-image: url('../img/icons.svg#email');
	}
}

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



#footer-section-bottom {
	border-top: 1px solid #cacaca;
	font-size: .875rem;
	padding-block: 2.5rem;
	text-align: center;
	
	@media(width <= 1080px) {
		padding-block: 2.5rem;
	}
	
	& > .container {
		align-items: center;
		display: grid;
		gap: 1.125rem 1.5rem;
		grid-template-areas: "menu logo" "text logo";
		grid-template-columns: 1fr auto;
		
		@media(width <= 780px) {
			grid-template-areas: "logo" "text" "menu";
			grid-template-columns: 1fr;
		}
	}
	
	.menus {
		align-self: end;
		display: flex;
		gap: .5rem 2.5rem;
		grid-area: menu;
		justify-content: center;

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

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

			@media(width <= 600px) {
				flex-direction: column;
			}
		}
	}
	
	.footer-text {
		align-self: start;
		grid-area: text;
	}
	
	.logo {
		display: none;
		grid-area: logo;
		
		img {
			height: 100px;
			object-fit: contain;
			width: 100px;
		}
	}
}



/* accordion */

.wp-block-accordion {
	font-size: .875rem;
	
	.wp-block-accordion__item {
		border-bottom: 1px solid #d9dbe9;	
		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%;
			
			.wp-block-accordion__icon-closed {
				display: none;
			}
			
		}
		
		.wp-block-accordion__content {
			height: 0;
			overflow: hidden;
		}
		
		&.active {
			.wp-block-accordion__toggle {
				.wp-block-accordion__icon-closed {
					display: block;
				}
				
				.wp-block-accordion__icon-open {
					display: none;
				}
			}
		}
	}
}


/* 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: #cacaca !important;
	}
	
	.entry-content > .wp-block-kadence-column:has(&) {
		position: relative;
	}
}






/* wine pdp */

article.entry.type-wine,
.kb-query-item.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: 3rem;
			
			@media(width > 900px) {
				grid-template-columns: 3fr 2fr;
			}
		}
		
		.media {
			position: relative;
			text-align: center;
			
			.bottle-shot {
				filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .25));
				max-width: 275px;
			}

			.acclaim-image {
				left: calc(50% - (263px / 2));
				max-width: 130px;
				position: absolute;
				transform: translateX(-50%);
			}
		}
		
		.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: 2.4375rem;
			margin: 0;
			padding-bottom: 0.75rem;
		}
		
		h3 {
			font-size: 1.25rem;
			font-weight: 400;
			margin: 0;
			padding-bottom: 0.5rem;
		}
		
		.kb-dynamic-html h3 {
			padding-top: .25rem;
		}
		
		.wine-price {
			color: var(--color-eyebrow, var(--color-heading-text, #000));/*var(--color-option-4);*/
			font-size: 1.125rem;
			font-weight: 600;
			
			&.kb-dynamic-html {
				padding-top: .5rem;
				
				&::before {
					content:"$";
				}
			}
		}
		
		.wine-price-label {
			display: block;
			font-size: 11px;
			font-weight: 700;
		}
	}
	
	.description {
		font-size: 1.125rem;
		padding-bottom: 2rem;
	}
	
	.tasting-notes {
		font-size: 1.125rem;
		
		h5 {
			padding-bottom: 0.5rem;
		}
	}
	
	.vintages-jump-link {
		padding-top: 2rem;
		
		a {
			font-size: 1rem;
			text-decoration: none;
		}
	}
	
	.entry-content .wine-fact-sheet { 
		padding-top: 1.5rem;
	}
	
	.wine-score {
		background: #f6f5f2;
		border: 1px solid #958666;
		border-radius: 1.5em;
		
		display: inline-flex;
		font-size: .8125rem;
		gap: .333em;
		padding: .333em .666em;
    
		
		.wine-score-point {
			font-weight: 700;
		}
	}

	.acclaim-notes {
		font-size: 1rem;

		.wine-score {
			margin-right: .5rem;
		}

		a.wine-score {
			color: var(--color-site-text);
			text-decoration: none;
		}
	}
	
	.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: 2.5rem;
			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;
		}
	}
}


article.type-wine.full {
	
	.entry-content .wrapper {
		position: relative;
		z-index: 1;
	}
	
	.action-buttons {
		display: flex;
		gap: .75rem;
	}
}

.fade-left { 
	opacity: 0;
	transform: translate3d(100px,0,0);

	
	&.animate {
		animation: .8s cubic-bezier(0,0,.58,1) .3s 1 normal both fade-left;
	}
}

@keyframes fade-left {
	from {
		opacity: 0;
		transform: translate3d(100px,0,0);
	}
	
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.fade-right {
	opacity: 0;
	transform: translate3d(-100px,0,0);
	
	&.animate {
		animation: .8s cubic-bezier(0,0,.58,1) .3s 1 normal both fade-right;
	}
}

@keyframes fade-right {
	from {
		opacity: 0;
		transform: translate3d(-100px,0,0);
	}
	
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.fade-up { 
	opacity: 0;
	transform: translate3d(0,100px,0);
	
	&.animate {
		animation: .8s cubic-bezier(0,0,.58,1) .3s 1 normal both fade-up;
	}
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translate3d(0,100px,0);
	}
	
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.fade-down { 	
	opacity: 0;
	transform: translate3d(0,-100px,0);
	
	&.animate {
		animation: .8s cubic-bezier(0,0,.58,1) .3s 1 normal both fade-down;
	}
}

@keyframes fade-down {
	from {
		opacity: 0;
		transform: translate3d(0,-100px,0);
	}
	
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}



.wine-information {
	background: #fdfdfd;
	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 #dbdbdb;
			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;
	
	.eyebrow {
		text-align: center;
	}
	
	h2 {
		font-weight: 500;
		padding: 1rem .5rem;
		text-align: center;
	}
	
	ul {
		background: #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 #d9dbe9;
			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: .25em;
		}
	}
}




#related-wines { 
	padding-block: 5rem;
	
	h1 {
		text-align: center;
	}
}



.wp-block-ffws-brands-wine-listing[data-featured] {
	padding: 3.25rem 0 0;
}
	
.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);
	}
}

:is(.wp-block-ffws-brands-wine-listing, .kb-query-grid-wrap:has(.kb-query-item.wine)) :is(.item, .kb-query-item.wine) {
	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(width > 1200px) {
			grid-template-columns: repeat(4, 1fr);	
		}
		
		@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%;
	}
}
	


article.type-wine.wine-lineup,
.kb-query-item.wine {
	text-align: center;
	
	.media {
		height: 16.875rem;
		transition: all .3s;
		
		img {
			object-fit: contain;
			height: 100%;
			width: 100%;
		}
		
		&:hover {
			opacity: .8;
		}
	}
	
	.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 {
			color: var(--dark-red);
			font-size: .875rem;
			font-weight: 600;
		}
		
		.title,
		.wp-block-kadence-advancedheading {
			font-size: 1.5625rem;
			margin: 0;
		}
		
		.title a,
		a:has(.wp-block-kadence-advancedheading) {
			color: var(--color-site-text);
			position: relative;
			text-decoration: underline;
			text-decoration-color: transparent;

			&:hover {
				text-decoration-color: currentColor;
			}
		}
		
		h3 {
			font-size: 1.25rem;
			font-weight: 400;
		}
		
		.wine-price {
			font-size: .875rem;
		}
		
		.action-buttons {
			align-items: center;
			display: flex;
			justify-content: center;
			gap: .375rem;
			padding-top: 1.5rem;
			transition: .3s;
			
			.button {
				padding-inline: 1.125rem;
			}
		}
	}
}

: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;	
	}
	
	
	@media(width > 900px) {
		.form-item {
			&: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 #dbdbdb;
		color: var(--color-site-text);
		font-family: var(--font-family-montserrat);
		font-size: 1rem;
		font-weight: 500;
		padding: .6875rem 2rem .6875rem 1.5rem;
		line-height: 1.2;
		text-align: center;
	}
}

/* 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 #686868 !important;
			height: .75rem !important;
			width: .75rem !important;
			
			&.active {
				background-color: #686868 !important;
				border: 2px solid #686868 !important;
			}
		}
	}
}


/* experiences */
#experiences .wp-block-kadence-query-card {
	margin-inline: auto;
	max-width: var(--container-large-width);
	padding-inline: var(--container-gutter);
}

@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: #cacaca !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::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 {
	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: #fff;
	border: 1px solid #e5e5e4;
	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: #fff;
		font-family: var(--font-family-headings);
		font-size: 1rem;
		
		
		th {
			font-weight: 500;
			line-height: 1;
			text-align: center;
			padding: .75rem .5rem;
			
			@media(width <= 1000px) {
				font-size: .75rem;
			}
			
			&:not(:first-child) {
				border-left: 1px dashed #dad8cf;
			}

			span {
				display: block;
				font-family: var(--font-family-body);
				font-size: .75rem;
				font-weight: 600;
				padding-bottom: .25rem;
				text-transform: uppercase;
			}
		}
	}
	
	tbody {
		font-size: .875rem;

		tr {
			&:nth-child(even) {
				background: #f7f6f5;
			}
		}
		
		td {
			border-bottom: 1px solid #e5e5e4;
			padding: .5rem 2rem;
			
			&:not(:first-child) {
				border-left: 1px solid #e5e5e4;
				text-align: center;
			}
		}
	}
	
	tfoot {
		td {
			font-size: .875rem;			
			font-weight: 600;
			padding: .5rem 2rem;
			
			&:not(:first-child) {
				border-left: 1px solid #dad8cf;
				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/dist/img/icons.svg#checkmark');
		width: .875rem;
	}
	
	.excluded {
		background-image: url('/wp-content/themes/ffws-brands/dist/img/icons.svg#x');		
		width: .75rem;
	}
}


/* Events pages */
.event-listing,
.recipe-listing {
	.grid {
		@media (width > 1200px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	
	.media {
		img {
			aspect-ratio: 1.65;
			object-fit: cover;
		}
	}
	
	.details {
		padding: .75rem 1rem 0;
	}
	
	.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: calc( -1 * var(--container-gutter));
		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 > 1280px) {
			margin-left: calc( ( -1 * var(--container-gutter) ) - ( ( 100dvw - var(--container-width) ) / 2 ) );
		}
		
		@media (width > 1081px) {
			min-height: 480px;
		}
		
		h1 {
			color: #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;
			}
		}	
		
		.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;
				color: var(--icon-gold);
				display: inline-flex;
				font-size: .875rem;
				font-weight: 700;
				gap: .125rem;
				text-decoration: none;
				
				&::before {
					background-position: 50% 50%;
					background-repeat: no-repeat;
					background-size: contain;
					content: "";
					display: block;
					height: 1.5rem;
					width: 1.5rem;
				}
			}
			
			a[href*="google"]::before {
				background-image: url('../img/icons.svg#google-cal');
			}
			
			a[href*="outlook"]::before {
				background-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 {
	--backdrop-speed: .3s;
	--speed: .6s;
	--padding-block: 2.5rem;
	--padding-inline: 2.5rem;
	
	container: size;
	border: 1px solid #000;
	box-shadow: 0 0 0px 1px rgb(255, 255, 255);
	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(--backdrop-speed)), overlay 0s calc(var(--speed) + var(--backdrop-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(--backdrop-speed) var(--speed);		
	}
	
	&, &::backdrop { transition-behavior: allow-discrete !important; }
	
	&[open] {
		opacity: 1;
		transform: translateY(0);
		transition: all var(--speed) var(--backdrop-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 / .8);/*color(from var(--color-option-3) srgb r g b / .8);*/
			transition: all var(--backdrop-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 #cacaca;
			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 {
	margin-left: calc((100dvw - 100%) / -2);
	width: 100dvw;

	.wp-block-cover {
		color: var(--white, #fff);
		font-size: 1rem;
		padding: 3rem 0;
		text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.45);
		
		body:not(.home) & {
			--height-multiple: .85;
			min-height: unset;
			aspect-ratio: 2.666;
			max-height: calc((100dvh - var(--header-height)) * var(--height-multiple));
			width: 100%;
			
			@media(width <= 1080px) {
				--height-multiple: .75;
				max-height: 50dvh;
			}
		}

		body.home & {
			@media(width > 1024px) {
				min-height: calc(100dvh - var(--header-height));
			}
			
			@media(max-width:1024px) {
				aspect-ratio: 2.666;
				max-height: 50dvh;
				max-width: 100dvw;
				min-height: 280px;
				padding-inline: 1.5rem;
			}
		}
		
		@media(width > 1024px) {
			body.home:has(#topbar) & {
				min-height: calc(100dvh - var(--topbar-height) - var(--header-height));
			}
		}
	
		h1 {
			font-size: clamp(1.5rem, 3dvw, 2rem);
			margin-bottom: 1.25rem;
			text-wrap: balance;
			
			&:only-child {
				margin-bottom: 0;
			}
		}
	}
	
	@media(width > 1080px) {
		.wp-block-cover__inner-container:has(.wp-block-kadence-column) {
			text-align: right;
		}
	}
	
	.wp-block-cover__inner-container > .wp-block-kadence-column:has(.kt-inside-inner-col:not(:empty)) {
		background: rgba(239, 237, 232, 0.90);
		color: var(--color-site-text);
		display: inline-block;
		font-size: clamp(.875rem, 1.325dvw, 1rem);
		padding: 2rem 1.5rem;
		text-align: center;
		text-shadow: none;
		max-width: 75%;
		
		@media(width > 1080px) {
			margin-inline: auto -1rem !important;
			min-width: 400px;
			padding: 2.5rem 3rem;
		}
		
		@media(width > 1200px) {
			width: 35%;
		}	
			
		@media (768px < width <= 1200px) {
			width: 50%;
		}		
	
		.wp-block-post-title {
			font-size: clamp(1.5rem, 3.325dvw, 2.4375rem);
			padding-top: .75rem;
		}
		
		.wp-block-buttons {
			gap: .5rem 1.5rem;
			padding-top: .5rem;
			
			.wp-element-button {
				min-width: clamp(8rem, 11.75dvw, 12.5rem);
			}
		}
	}
	
	body.home & .wp-block-cover__inner-container > .wp-block-kadence-column:has(.kt-inside-inner-col:not(:empty)) {
		max-width: 500px;
		
		h1 {
			font-size: 1.125rem;
			
			@media(width>1024px) {
				font-size: 2.5rem;	
			}
		}
		
		.wp-block-buttons .wp-element-button {
			min-width: clamp(8rem, 10dvw, 12.5rem);
		}
	}
	
	.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;
	}
	
	.wp-block-button.is-style-outline > .wp-element-button,
	.button.outline {
		background: #fff;
		border: 1px solid var(--border-divider-default);	
		
		&:hover {
			background: var(--color-page-link);
			color: #fff;
		}
	}
	
	.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 ) > .kt-inside-inner-col {
	.kt-has-2-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: #fff;
		
		a {
			color: #fff;
		}
		
		h1, h2, h3, h4, h5, h6 {
			color: inherit;
		}
	}
}

.entry-content > .diptych, .entry-content > .text-and-image-block {

	& > .kt-inside-inner-col { 
		margin-left: calc( -1 * var(--container-gutter) );
		padding-inline: var(--container-gutter) !important;
		width: 100dvw;
	
		@media (width > 1280px) {
			margin-left: calc((-1 * var(--container-gutter)) - (50dvw - (50% + var(--container-gutter))));	
		}
		
		& > .kb-row-layout-wrap {
			margin-inline: auto;
			max-width: calc(90rem - (2 * var(--container-gutter)));
		}
	}
}

.diptych {
		
	.kb-section-has-overlay:hover > .kt-inside-inner-col::before {
		opacity: .9;
	}
	
	.wp-block-buttons {
		left: 0;
		margin-top: 1rem;
		position: absolute;
		right: 0;
		transition: .3s;
		z-index: 1;
	}
	
	.wp-block-kadence-column {
		overflow: hidden;
		
		@media(width > 1024px) {
			&:not(:hover) .wp-block-buttons {
				opacity: 0;
				pointer-events: none;
			}
		}
	}


	.kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-group {
  	margin-inline: auto;
  	max-width: 512px;
	}
	
	.wp-block-kadence-column {
		.wp-block-group {
			font-size: .875rem;
			position: relative;
			
			& > * {
				transition: .3s;
			}
			
			h2 {	
				font-size: 1.6875rem;
				padding-bottom: .75rem
			}
		
			&::before, &::after {
				content:"";
				background: inherit;
				height: 8px;
				left:0;
				position: absolute;
				transition: .3s;
				width: 100%;
				z-index: 0;
			}
		
			&:before {
				bottom: 100%;
			}
		
			&:after {
				top: 100%;
			}
		}
		
		@media(width > 1024px) {
			&:hover {
				.wp-block-group {
					& > * {
						transform: translateY(calc(-.5 * var(--button-height)));
					}
					
					&::before, &::after {
						height: calc( .5rem + (var(--button-height, 40px) / 2) );
					}
				}
			}
		}
		
		@media(width <= 1024px) {
			.wp-block-group {
				& > * {
					transform: translateY(calc(-.5 * var(--button-height)));
				}
				
				&::before, &::after {
					height: calc( .5rem + (var(--button-height, 40px) / 2) );
				}
			}
		}
	}
}

.text-and-image-block {
	
	.entry-content > & {
		width: 100dvw;
	
		@media (width > 1280px) {
			margin-left: calc(( -1 * var(--container-gutter)) - (( 100dvw - var(--container-width)) / 2 ));	
		}
	}
	
	.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;
	}
}





.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(--warm-gray, #7F7F7F);
		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;
		gap: 2rem;
		padding-block: 2rem;	
		
		.grid__col:not(:last-child) {
			border-bottom: 1px solid #cacaca;
			padding-bottom: 1.5rem;
		}

		.grid__col :is(.c-card__img,.c-card--wine__img) img {
			width: 100%;
		}
		
		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;
			padding-top: .5rem;
			
			a {
				text-decoration: none;
			}
		}
	}
	
	.sf-navigation.bottom {
		padding-block: 2rem;
		
		.wp-pagenavi {
			display: flex;
			gap: .5rem;
		}
	}
}




.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/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/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%,#000) 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"]){
				background: transparent;
				border: 2px solid #fff;
				color: #fff;
				padding: 14px 24px 14px 24px;

				&:hover {
					background: #fff;
					color: #000;
				}
			}
		}

		.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);
	}
}

/*#modal-group-wrapper [popover]:popover-open {	
	& > .kt-inside-inner-column {
		padding: 1rem;
	}
	
	.wp-block-video {
		margin: 0;
	}
	
	video {
		aspect-ratio: 1.777;
		width: 100%;
	}
}*/





/* store locator */

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

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





/* recipes */
.type-recipe.full {
	padding-block: 3rem;
	
	@media(width > 900px) {
		grid-template-columns: repeat(2, 1fr);
		padding-block: 5rem;
	}
	
	
	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;
		}
		
		.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: #f7f7f6;
			border-top: 5px solid #e5e5e4;
			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;
			}
		}
	}
}