@import url('./reset.css');

@font-face {
    font-family: 'chronicle_text';
    src: url('../fonts/chronicle-text-g2-roman-webfont.woff2') format('woff2'),
         url('../fonts/chronicle-text-g2-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'chronicle_display';
    src: url('../fonts/chronicledisp-roman-webfont.woff2') format('woff2'),
         url('../fonts/chronicledisp-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham';
    src: url('../fonts/gothampro-medium-webfont.woff2') format('woff2'),
         url('../fonts/gothampro-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
	box-sizing: border-box;
}

@view-transition {
	navigation: auto;
	types: slide, forwards, backwards;
}

::view-transition-group(root) {
	animation-duration: 0.5s;
}

:root {
	--container-width: 1440px;
	--container-gutter: 1.5rem;
	
	@media(1080px <= width) {
		--container-gutter: 3rem;	
	}
	
	--font-family-chronicle-text: "chronicle_text", serif;
	--font-family-chronicle-display: "chronicle_display", serif;
	--font-family-gotham: "gotham", sans-serif;
	--font-family-montserrat: Montserrat, serif;
	--font-family-playfair: "Playfair Display", serif;

	--font-family-headings: var(--font-family-chronicle-display);
	--font-family-body: var(--font-family-chronicle-text);
	--font-family-button: var(--font-family-gotham);

	--line-height-body-desktop: 1.5;
	
	--merus-gold: #b1953a;
	--merus-granite: #98968b;
	--merus-aztec-gold: #cda349;
	--merus-taupe: #c0bab0;
	--almost-white: #d7d7d7;
	--white: #fff;

	--color-site-text: var(--almost-white);
	
	
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
	
	:where(.is-layout-constrained) > * {
		margin-block: unset;
	}
}

body {
	background: var(--color-site-background);
	color: var(--color-site-text, var(--almost-white));
	font: 325 1rem/var(--line-height-body-desktop) var(--font-family-body);
}

p {
	margin: 0 0 1rem;
	
	&:last-child {
		margin-bottom: 0;
	}
}

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

ol {
	li {
		padding-left: 0.25rem;

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

.eyebrow {
	color: var(--color-eyebrow, var(--merus-gold));
	font-family: var(--font-family-gotham);
	font-size: .875rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .25em;
	padding-bottom: .375rem;
	text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-heading-text, var(--color-white));
	font-family: var(--font-family-headings);
	font-weight: 325;
	line-height: 1;
	margin: 0 0 .5em;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	a {
		color: inherit;
		text-decoration: inherit;
	}
}

h1 {
	font-size: clamp(1.75rem, 2.78dvw, 2.5rem);
	margin-bottom: .325em;
	text-wrap: balance;
}

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);
	
	em a {
		color: var(--color-page-link);
	}
}

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

a {
	color: var(--color-page-link);
	cursor: pointer;
	text-decoration: none;
	transition: all .3s;
	word-wrap: break-word;

	&:not(.arrow-right, .arrow-left):not([href^="tel:"]) {
		color: var(--merus-aztec-gold);
	}

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

	&: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 {
		color: var(--merus-taupe);
		font-family: var(--font-family-body);
		font-size: 1.125rem;		
		text-decoration: none;

		&:hover {
			color: var(--merus-taupe);
			text-decoration: underline;
		}
	}

	&:is(.arrow-right, .arrow-left) {
		align-items: center;
		color: var(--merus-granite);
		display: inline-flex;
		font-family: var(--font-family-body);
		font-size: 1.125rem;
		font-weight: 325;
		gap: .75rem;
		line-height: 1.2;
		transition: all .3s;

		&:hover {
			color: var(--merus-taupe);
			gap: 1.25rem;
			text-decoration: none;
		}
	}

	&.arrow-right{ 
		&::after {
			background: url('../img/icons.svg#arrow-right') 50% 50% / contain no-repeat;
			content:"";
			height: 1.5rem;
			width: 1.3125rem;
			transition: all .3s;
		}

		&:hover::after {
			filter: hue-rotate(6deg) saturate(110%) brightness(180%);
    }	
	}

	&.arrow-left { 
		&::before {
			background: url('../img/icons.svg#arrow-right') 50% 50% / contain no-repeat;
			content:"";
			height: 1.5rem;
			transform: rotate(180deg);
			transition: all .3s;
			width: 1.3125rem;
		}

		&:hover::before {
			filter: hue-rotate(6deg) saturate(110%) brightness(180%);
    }	
	}
}

main .entry-content {
	padding: 4rem 0 2rem;

	@media(width > 767px) {
		padding-inline: min(9rem, 9.5dvw);
	}

	@media(width <= 767px) {
		body.single-wine & {
			padding-inline: 2.5rem;
		}

		body.acquire-page & {
			padding-right: 2.5rem;
		}
	}
}

.entry-content,
.kt-blocks-accordion-title {
	text-shadow: -1px 1px 0px rgba(0,0,0,1);
	
	@media (max-width: 1400px) {
		text-shadow: -1px 1px 1px rgba(0,0,0,.9);
	}
	@media (max-width: 1200px) {
		text-shadow: -1px 1px 1px rgba(0,0,0,.8);
	}
	@media (max-width: 1100px) {
		text-shadow: -1px 1px 1px rgba(0,0,0,.7);
	}

	@media (max-width: 992px) {
		text-shadow: -1px 1px 1px rgba(0,0,0,.6);
	}
	@media (max-width: 768px) {
		text-shadow: -1px 1px 1px rgba(0,0,0,.5);
	}
	@media (max-width: 576px) {
		text-shadow: -1px 1px 1px rgba(0,0,0,.4);
	}
}

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

.content-row >.kt-row-column-wrap {
	/*column-gap: min(15rem, 16dvw);*/
	gap: 1rem;

	& > .wp-block-kadence-column:nth-child(even) {
		@media(width > 1024px) {
			padding-left: clamp(2rem, 7.5dvw, 7.718753rem);
		}

		@media(767px < width <= 1024px) {
			padding-left: 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;
	}
}

/*
.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;
	}
}*/

#page {
	display: grid;
	grid-template-areas: "header" "main" "footer";
	grid-template-rows: auto 1fr auto;
	min-height: 100dvh;
	overflow: hidden;
	position: relative;

	& > .page-background,
	& > .page-background-overlay {
		/*filter: grayscale(1) brightness(0.3);*/
		height: 100%;
		left: 0;
		object-fit: cover;
		position: absolute;
		top: 0;
		transition: all .3s;
		width: 100%;
	}

	& > .page-background {
		z-index: -2;

		body.page-id-4086 & {
			height: auto !important;
		}
	}		

	& > .page-background-overlay {
		--bg-opacity: .2;
		background: rgba(0, 0, 0, var(--bg-opacity));
		pointer-events: none;
		transition: background 0.3s ease;
		z-index: -1;

		@media (width <= 1400px) {
			--bg-opacity:  .4;
		}

		@media (width <= 1200px) {
			--bg-opacity: .5;
		}

		@media (width <= 1100px) {
			--bg-opacity: .6;
		}

		@media (width <= 992px) {
			--bg-opacity: .7;
		}

		@media (width <= 768px) {
			/*--bg-opacity: .8;*/
			--bg-opacity: .75;
		}

		/*@media (width <= 576px) {
			--bg-opacity: .9;
		}*/
	}
}


/* header */
#masthead { 
	grid-area: header;
	padding-top: 3rem;
	position: relative;
	transition: background .3s;

	.container {
		max-width: unset;
	}
}

.site-branding {
	.site-logo {
		display: inline-block;
		transition: all .1s;

		a:has(img, svg) {
			display: block;
		}

		img, svg {
			height: auto;
			max-height: 140px;
			max-width: 30dvw;
			width: 100%;
		}

		svg {				
			.logo-m, 
			.logo-m-fill, 
			.shadow {
				fill: #b1953a;
			 }
				
			.grapevines {
				stroke-dasharray: 15550.197265625;
				stroke-dashoffset: 12000;
				fill: #a2224c;
				stroke: #a2224c;
				stroke-width: 1px;
				transition: stroke-dashoffset .5s .2s ease-in, fill .5s .7s;
					
				@starting-style {
					fill: transparent;
					stroke-dashoffset: 15550.197265625;
				}
			}
				
			.wordmark {
				.top {
					fill: #fff;
					opacity: 1;
					transition: opacity .6s;
					
					@starting-style {
						opacity: 0;
					}
				}
						
				.shadow {
					opacity: 1;
					transform: none;
					transition: transform .6s .6s, opacity .6s;
							
					@starting-style {
						opacity: 0;
						transform: translate(-0.9%, -0.9%);
					}
				}
			}
		}

		&.static {
			.grapevines {
				fill: #a2224c;
				stroke-dashoffset: 12000;
				transition: none;
			}

			.wordmark {
				.top {
					opacity: 1;
					transition: none;
				}

				.shadow {
					opacity: 1;
					transform: none;
					transition: none;
				}
			}
		}
	}
}



/* Footer */

#colophon {
	background-image: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
	color: #5f5f5f;
	font-family: var(--font-family-gotham);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	grid-area: footer;
	padding-block: 1.75rem;
	transition: background .3s;

	@media(width > 767px) {
		padding-top: 1rem;
	}

	.container {
		display: flex;
    row-gap: 1rem;
		max-width: unset;

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

	a {
		color: #5f5f5f;
		text-decoration: none;
	}

	.copyright {
		color: #979b97;
		padding-right: 1rem;
	}
	
	nav {
		.menu {
			display: flex;
			gap: 1rem;
			padding: 0;

			li {
				&::before {
					color: var(--merus-granite);
					content:"|";
					display: inline-block;
					transform: translateX(-.5rem);
				}

				@media(width <= 767px) {
					&:first-child::before {
						content:none;
					}
				}
			}
		}
	}
}

#main {
	grid-area: main;

	body.home & {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}


/* PAGES */

body.home {
	#hero {
		font-family: "Times New Roman";
		font-size: clamp(1.125rem, 3dvw, 1.375rem);
		font-weight: 400;
		line-height: 1.3;
		
		.wp-block-heading {
			font-family: Georgia, serif;
			font-size: 2.72727em;
			font-weight: 400;
			line-height: 1.2;
			margin-bottom: .25rem;
			
			span {
				font-family: var(--font-family-gotham);
				line-height: 1.2;
				font-size: .366666em;
			}
		}
		
		ol {
			list-style: auto;
			margin-left: .375rem;
			
			li {
				padding-left: 0;
				
				&::marker {
					font-size: inherit;
				}
			}
		}
	}

	#main {
		display: flex;
  	flex-direction: column;
  	justify-content: center;
	}
}



/* store locator */

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

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


.menu-wrapper {
	.contextual-conent {
		display: none;
	}
}





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


#mobile-menu {
	background: rgba(0, 0, 0, 0.81);
	background-blend-mode: darken;
	backdrop-filter: blur(8px);
	border: none;
  display: grid;  
	font-family: var(--font-family-montserrat);
	grid-template-rows: auto 1fr auto;
	/*height: calc(100dvh - var(--header-height) - var(--footer-height));*/
	/*height: calc(100dvh - var(--header-height));*/
	height: 100dvh;
	
	left: 0;
	margin: 0;
	max-width: 100dvw;
	opacity: 0;
	outline: none;
	padding-inline: var(--container-gutter);
	padding: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	/*top: var(--header-height);*/
	top: 0;
	transition: all .3s ease-out allow-discrete;
	width: 100%;
	z-index: 10;

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

	.container {
		max-width: unset;
		padding-top: 3rem;
		position: relative;
		width: 100%;
	}
	
	.wrapper {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		height: 100%;
		justify-content: center;
		margin-inline: auto;
		max-width: 800px;
		outline: none;
		overflow: visible;
		padding-bottom: 21dvh;
		padding-inline: 1.5rem;
	}
	
	form[method="dialog"] {
		align-items: center;
		background: url('/wp-content/uploads/2025/05/logo.webp') 0 50% / 180px auto no-repeat;
		display: flex;
		justify-content: flex-end;
		left: 0;
		height: var(--header-height);
		margin: -.125rem var(--container-gutter) 0;
		position: absolute;
		top: 0;
		width: calc(100% - (2 * var(--container-gutter)));	

		button {
			margin-inline: auto 0;
			width: 100px;
			cursor: pointer;
		}
	}

	.primary-menu-container {
    display: flex;
		flex-grow: 1;
		padding-top: 1.75rem;
		text-align: center;

		& > ul {
			display: flex;
			flex-direction: column;
			/*gap: 1.625rem;*/
			gap: .5rem;
			justify-content: space-between;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		li {
			position: relative;
	
			&::before {
				aspect-ratio: 1.3116315434;
				background: url('/merus/wp-content/themes/merus/dist/img/icons.svg#grapevines') 50% 50% / contain no-repeat;
				bottom: 0;
				content: "";
				height: 250%;
				left: 50%;
				opacity: 0;
				pointer-events: none;
				position: absolute;
				top: -75%;
				transform: translateX(-50%);
				transition: opacity .3s;
				z-index: -1;
			}
		
			&:has(a:hover)::before {
				opacity: .5;
			}
		}
	}
		
	.primary-menu-container, 
	.links{
		a {
			color: var(--color-white);
			display: inline-block;
			font-family: var(--font-family-headings);
			font-size: 2rem;
			font-weight: 325;
			letter-spacing: .05em;
			line-height: 1;
			text-decoration: none;
			text-transform: uppercase;
		}
	}
	
	.menu-social-links-container {
		ul {
			display: flex;
			gap: 1rem;
			margin: 0;
			padding: 0;
		}
		
		a {
			filter: invert(1) contrast(0.3) opacity(0.75);
		}

		svg {
			height: 1.5rem;
			width: 1.5rem;
		}
	}

	#mobile-menu-bottom {
		align-items: center;
		bottom: 0;
		color: #5f5f5f;
		display: flex;
		font-family: var(--font-family-gotham);
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		justify-content: flex-start;
		left: 0;
		line-height: 1.3;
		letter-spacing: .05em;
		max-width: unset;
		padding-block: 1.75rem;
		position: absolute;
		right: 0;
		row-gap: 1rem;
		text-transform: uppercase;
		width: 100%;

		@media(width > 767px) {
			padding-top: 1rem;
		}

		@media(width <= 767px) {
			flex-direction: column;
		}
		
		.footer-links-menu-container > ul {
			display: flex;
			gap: 1rem;    
			padding: 0 0 0 1rem;

			li::before {
				content: "|";
        display: inline-block;
        transform: translateX(-.5rem);

				@media(width <= 767px) {
					&:first-child::before {
						content:none;
					}
				}
			}
		}

		a {
			color: #5f5f5f;
      text-decoration: none;
		}
	}
}

#mobile-menu::backdrop {
	backdrop-filter: blur(0px);
}

@starting-style {
	#mobile-menu::backdrop {
		backdrop-filter: blur(0px);
	}
}

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

hamburger-button {
	--color: #fff;
	--height: 20;
	--height: 14;
	--height: 18;
	--height: 20;
	--spacing: 1.25rem;
	--spacing: .75rem;
	--width: 20;
	--width: 22;
	--width: 25;
	--scale: 1.4;
	--scale: 1;
	--label-order: -1;
	--label-size: 16px;

	cursor: pointer;
	font-family: var(--font-family-body);
	position: absolute;
	right: var(--container-gutter);
	text-transform: uppercase;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}




/* social menu */
.menu-social-menu-container > ul {
	align-items: center;
	display: flex;
	gap: 3rem;
	padding: 0;
	
	a {
		display: block;
		font-size: 0;
		height: 1.5rem;
		text-decoration: none;
		width: 1.5rem;
		
		&[href*="facebook"] {
			background: url('/wp-content/themes/merus/dist/img/icons.svg#facebook') 50% 50% / contain no-repeat;
		}
		
		&[href*="instagram"] {
			background: url('/wp-content/themes/merus/dist/img/icons.svg#instagram') 50% 50% / contain no-repeat;
		}
		
		&[href*="twitter"], &[href*="x.com"] {
			background: url('/wp-content/themes/merus/dist/img/icons.svg#twitter-x-alt') 50% 50% / contain no-repeat;
		}
	}
}






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




/* accordions */

.wp-block-kadence-accordion {
	
	.kt-accordion-inner-wrap {
		& > .wp-block-kadence-pane {
			position: relative;
			
			&::after {
				background: var(--merus-granite);
				content:"";
				height: 1px;
				left: 0;
				opacity: .5;
				position: absolute;
				right: 0;
				transform: translateY(4px);
			}
		}
	}
	
	.kt-blocks-accordion-header,
	.kt-accordion-panel-inner {
		font-family: var(--font-family-body);
	}
		
	.kt-blocks-accordion-header {
		cursor: pointer;
	}
		
	.kt-blocks-accordion-icon-trigger { 
		&:before,
		&::after {
			background: var(--merus-granite);
			height: 2px !important;
			width: 14px !important;
		}
	}
}





/* wine page (PDP) */

article.type-wine {

	.kt-row-column-wrap {
		display: grid;

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

	.grid {
		display: grid;
		gap: 1rem .5625rem;
    grid-template-columns: auto 1fr;
    line-height: 1.3;
		
		.item {
	    grid-template-columns: subgrid;
  	  display: grid;
    	grid-column: span 2;

			span:first-child {
				text-align: right;
			}
		}
	}

	.bottle-shot {
		/*height: 80dvh;*/
		margin-inline: auto;
		max-width: 23dvw;
		transform: translateY(-12dvw);
		
		img {

			@media(width > 767px) {
				position: absolute;
			}
			/*height: 100%;*/
			/*width: auto;*/
		}
	}

  .links {
    display: flex;
    justify-content: space-between;
		padding-top: 2rem;
  
    a {
      align-items: center;
			color: var(--merus-granite);
      cursor: pointer;
      display: inline-flex;
      font-family: var(--font-family-body);
      font-size: 1.125rem;
      font-weight: 325;
      gap: .75rem;
      line-height: 1.2;

			&:hover {
				color: rgb(from var(--merus-taupe) r g b / .8);
			}

			&:not(.active):not(#acquire-link, #action-link) {
				display: none;	
			}			
    }
  }
}


article.type-wine,
section.varietal > .varietal-vintage {
	.scorecard {
		align-items: flex-start;
		display: flex;
		gap: 1rem;
		padding-top: 2rem;
		text-shadow: none !important;

		.score-points {
			border-radius: 4px;
			border: 1px solid #4d4d4d;
			color: #7d7d7d;
			text-align: center;
			font-family: var(--font-family-gotham);
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: 150%;
			text-transform: uppercase;
			padding: 0px 11px 11px;

			.score-points-number {
				font-family: var(--font-family-body);
				font-size: 54px;
				font-style: normal;
				font-weight: 325;
				line-height: 100%;
				background: radial-gradient( circle at center, #e3e3e3,#7d7d7d 90%);
				/*background: linear-gradient(30deg, #7d7d7d 31.15%, rgba(227, 227, 227, 0.80) 85.98%);*/
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.score-text-sup {
			font-family: var(--font-family-body);
			font-size: 27px;
			font-style: normal;
			font-weight: 325;
			line-height: 1.25;
			/*text-transform: uppercase;*/
			background: radial-gradient( circle at center, #e3e3e3,#7d7d7d 90%);
			/*background: linear-gradient(273deg, #7d7d7d 51.27%, #e3e3e3 100%);*/
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.score-text-sub {
			color: #7d7d7d;
			font-family: var(--font-family-body);
			font-size: 16px;
			font-style: normal;
			font-weight: 325;
			line-height: 150%;
		}
	}
}

section.varietal {

	& + section.varietal {
		padding-top: 5rem;
	}
	h2 {
		font-size: 1.25rem;
	}

	.varietal-vintage {
		display: grid;
		gap: 0 3rem;
		grid-template-columns: repeat(2, 1fr);
		padding-top: 2rem;

		&:first-of-type {
			padding-top: 1rem;
		}

		h3 {
			color: var(--almost-white);
			font-size: .75rem;
			font-weight: 400;
			grid-column: span 2;
			line-height: 1.5;
			text-transform: uppercase;
		}

		.scorecard {
			padding-block: 1rem;

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

			.score-text-sup {
				font-size: 1.5rem;
				line-height: 1.25;
			}
		}

		.varietal-vintage-footer {
			grid-column: 1 / span 2;

			a {
				align-items: center;
				color: var(--merus-granite);
				display: inline-flex;
				font-family: var(--font-family-body);
				font-size: 1.125rem;
				font-weight: 325;
				gap: .75rem;
				line-height: 1.2;
				text-decoration: none;

				&::after {
					background: url('../img/icons.svg#arrow-right') 50% 50% / contain no-repeat;
					content: "";
					height: 1.5rem;
					width: 1.3125rem;
					transition: all .3s;
				}

				&:hover {
					color: rgb(from var(--merus-taupe) r g b / .8);

					&::after {
						filter: hue-rotate(6deg) saturate(110%) brightness(180%);
					}
				}
			}
		}

		& + section.varietal-vintage {
			margin-top: 5rem;
		}
	}
}

.accolades[data-link] {
	cursor: pointer;
}


#main > .container:has(>.wine-navigation) {
	position: relative;
}

.wine-navigation {
	aspect-ratio: .6666666;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	font-size: 0;
	position: absolute;
	width: 1.5rem;

	@media(width > 767px) {
		top: 30dvh;
	}

	@media(width <= 767px) {
		bottom: 30dvh;
	}
		
	

	&.prev {
		background-image: url('../img/icons.svg#chevron-left');
		left: var(--container-gutter);

		@media(width > 1024px) {
			transform: translateX(-100%);
		}
	}

	&.next {
		background-image: url('../img/icons.svg#chevron-right');
		right: var(--container-gutter);

		@media(width > 1024px) {
			transform: translateX(100%);
		}
	}

	&:hover {
		filter: brightness(1.5);
	}
}

#wine-content {
	.tasting-notes-inner {
		display: flex;
		flex-direction: column;
		overflow-y: clip;
	}

	.scrolling-frame {
		height: 100%;
		padding-right: 1.25rem;
		position: relative;

		.scrolling-frame-inner {
			overflow: scroll;
			-ms-overflow-style: none;
   		scrollbar-width: none;
			height: calc(var(--height) - var(--offset));
		
			&::-webkit-scrollbar { 
				display: none;
			}
		}
	}

	.scrolling-frame-handle {
		--slider-track-bg: rgba(255,255,255,.2);
		--slider-track-height: 4px;
		--slider-border-radius: .25rem;
		--slider-thumb-bg: url('../img/icons.svg#scroll-handle') 50% 50% / contain no-repeat;
		--slider-thumb-height: 8px;
		--slider-thumb-width: 65px;
		
		-webkit-appearance: none;
		background: none;
		left: calc( 100% - calc( (var(--slider-thumb-height) - var(--slider-track-height)) / 2 ) );
		margin: 0;
		position: absolute;
    top: 0;
    transform: rotate(90deg);
    transform-origin: 0 0;
		width: calc(var(--height) - var(--offset));

		&:focus {
			outline: none;
		}

		&::-webkit-slider-runnable-track {
			border: none;
			background: var(--slider-track-bg);
			border-radius: var(--slider-border-radius);
			cursor: pointer;
			height: var(--slider-track-height);
			width: 100%;
		}
		
		&::-webkit-slider-thumb {
			background: var(--slider-thumb-bg);
			cursor: pointer;
			height: var(--slider-thumb-height);
			margin-top: calc( (var(--slider-thumb-height) - var(--slider-track-height)) / -2 );
			width: var(--slider-thumb-width);
			-webkit-appearance: none;
		}
		
		&:focus::-webkit-slider-runnable-track {
			background: var(--slider-track-bg);
		}
		
		&::-moz-range-track {
			animate: 0.2s;
			background: var(--slider-bg);
			border: none;
			border-radius: var(--slider-border-radius);
			cursor: pointer;
			height: var(--slider-track-height);
			width: 100%;
		}
		
		&::-moz-range-thumb {
			background: var(--slider-thumb-bg);
			border: none;
			cursor: pointer;
			height: var(--slider-thumb-height);
			width: var(--slider-thumb-width);
		}
		
		&::-ms-track {
			animate: 0.2s;
			background: transparent;
			border: none;
			color: transparent;
			cursor: pointer;
			height: var(--slider-track-height);
			width: 100%;
		}
		
		&::-ms-fill-lower {
			background: var(--slider-track-bg);
			border: none;
			border-radius: var(--slider-border-radius);
		}
		
		&::-ms-fill-upper {
			background: var(--slider-bg);
			border: none;
			border-radius: var(--slider-border-radius);
		}
		
		&::-ms-thumb {
			background: var(--slider-thumb-bg);
			border: none;
			cursor: pointer;
			height: var(--slider-thumb-height);
			width: var(--slider-thumb-width);
		}
		
		&:focus::-ms-fill-lower {
			background: var(--slider-track-bg);
		}
		
		&:focus::-ms-fill-upper {
			background: var(--slider-track-bg);
		}
	}
}









/* page transitions (acquire/wine pages) */
@keyframes move-out-backwards {
	from {
			opacity: 1;
			transform: translateX(0%);
	}

	to {
			opacity: 0;			
			transform: translateX(100%);
	}
}


@keyframes move-out-forwards {
	from {
			opacity: 1;
			transform: translateX(0%);
	}

	to {
			opacity: 0;			
			transform: translateX(-100%);
	}
}

@keyframes move-in-backwards {
	from {
			opacity: 0;			
			transform: translateX(-100%);
	}

	to {
			opacity: 1;			
			transform: translateX(0%);
	}
}

@keyframes move-in-forwards {
	from {
			opacity: 0;			
			transform: translateX(100%);
	}

	to {
			opacity: 1;			
			transform: translateX(0%);
	}
}

#wine-content {
	view-transition-name: wine-content;
}

html:active-view-transition-type(forwards) {
	&::view-transition-old(wine-content) {
		animation: 0.5s linear both move-out-forwards;
	}

	&::view-transition-new(wine-content) {
		animation: 0.5s linear both move-in-forwards;
	}
}

html:active-view-transition-type(backwards) {
	&::view-transition-old(wine-content) {
		animation: 0.5s linear both move-out-backwards;
	}

	&::view-transition-new(wine-content) {
		animation: 0.5s linear both move-in-backwards;
	}
}
/* page transitions (acquire/wine pages) */

/* mobile menu overrides */
#menu-footer-links .menu-item a { color: #979b97; }