/* ----------------------------------------------------------------
	Canvas: Wine demo

	Scoped stylesheet for the Wine demo (vineyard tasting estate).
	Loaded only while the demo is active: see inc/demos.php.
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #561e1e; /* #242e35 */
	--cnvs-themecolor-rgb: 86, 30, 30;

	--cnvs-themecolor-2: #EBDAC5;
	--cnvs-themecolor-2-rgb: 235, 218, 197;

	--cnvs-primary-font: "moret-variable",serif;
	--cnvs-body-font: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
	--cnvs-secondary-font: var(--cnvs-primary-font);

	--cnvs-body-bg: #e2d9d0;

    --cnvs-slider-arrows-bg-color: transparent;
    --cnvs-slider-arrows-bg-hover-color: transparent;
}

body {
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dark {
	--cnvs-heading-color: var(--cnvs-themecolor-2);
}

.color-2,
.h-color-2:hover {
	color: var(--cnvs-themecolor-2) !important;
}

.bg-color-2,
.h-bg-color-2:hover {
	background-color: var(--cnvs-themecolor-2) !important;
}

#header {
	--cnvs-primary-menu-font-size: 1.125rem;
	--cnvs-primary-menu-tt: uppercase;
	--cnvs-primary-menu-ls: 1px;
	--cnvs-primary-menu-color: var(--cnvs-themecolor);
	--cnvs-primary-menu-submenu-hover-bg: var(--cnvs-themecolor);
	--cnvs-primary-menu-hover-color: var(--cnvs-themecolor-2);
}

.is-expanded-menu .style-3 .menu-container > .menu-item > .menu-link {
	background-color: #CBBAA7;
}

body:not(.is-expanded-menu) #header {
	--cnvs-primary-menu-color: var(--cnvs-themecolor-2);
}

.style-3 .menu-container > .menu-item.current > .menu-link {
	--cnvs-primary-menu-active-color: var(--cnvs-themecolor-2);
}

.is-expanded-menu .menu-container > .menu-item:not(:first-child) {
    margin-left: 5px;
}

#logo > a {
	background-color: var(--cnvs-themecolor-2);
	padding-inline: 10px;
	border-radius: 0 0 6px 6px;
}

.button-3d-border::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid var(--cnvs-themecolor);
	z-index: 0;
	transform: translate(7px, 7px);
	transition: .2s ease;
}

.button-3d-border.bg-color-2::after {
	border-color: var(--cnvs-themecolor-2);
}

.button-3d-border:hover::after {
	transform: translate(0px, 0px);
}

.button-3d-border span {
	position: relative;
	z-index: 1;
}

body.is-expanded-menu .button-header {
	border-color: var(--cnvs-themecolor);
	color: var(--cnvs-themecolor);
}

body:not(.is-expanded-menu) .button-header {
	border-color: var(--cnvs-themecolor-2);
	color: var(--cnvs-themecolor-2);
}

body:not(.is-expanded-menu) .button.button-border:not(.button-fill).button-header:hover {
	background-color: var(--cnvs-themecolor-2);
	color: var(--cnvs-themecolor);
}

.hero-wine-img,
.hero-bg {
	position: relative;
	z-index: 1;
	height: 100%;
}

.negative-text-margin {
	mix-blend-mode: difference;
}

@media (min-width: 991px) {
	.hero-wine-img {
		max-width: 60%;
		position: absolute;
		top: 0;
		right:0;
		z-index: auto;
	}

	.hero-bg {
		max-width: 47%;
		z-index: 1;
		height: 90%;
	}

	.negative-text-margin {
		margin-left: -120px;
	}

	.section-negative {
		margin-top: -60px;
	}
}

.swiper-slide {
	width: 33.3333%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-right: 1px solid rgba(var(--cnvs-contrast-rgb), .1);
	border-left: 0;
	padding: 40px;
}

.swiper-slide:not(.d-none):hover {
	background-color: rgba(var(--cnvs-themecolor-rgb), .07);
}

.swiper_wrapper {
	border-top: 1px solid rgba(var(--cnvs-contrast-rgb), .1);
	border-bottom: 1px solid rgba(var(--cnvs-contrast-rgb), .1);
}

.slider-arrow-left,
.slider-arrow-right {
	--cnvs-slider-arrows-size: 50px;
	--cnvs-slider-arrows-offset: 30px;
    left: var(--cnvs-slider-arrows-offset);
    transform: translateY(-50%);
	border: 2px solid var(--cnvs-themecolor);
	border-radius: 50%;
	line-height: 42px;
	text-align: center;
}

.slider-arrow-left img,
.slider-arrow-right img {
	width: 24px;
	height: 24px;
	text-align: center;
}

.slider-arrow-left:hover,
.slider-arrow-right:hover {
	--cnvs-slider-arrows-bg-hover-color: #FFF;
}

.slider-arrow-right {
	left: auto;
	right: var(--cnvs-slider-arrows-offset);
}

.swiper-button-disabled {
	display: none;
}

/* ----------------------------------------------------------------
	ADDITIVE — not part of the 1:1 design stylesheet above.

	Rules for the WordPress surfaces the flat design has no page for:
	the catalogue, the cart and checkout, the journal and the tasting
	records. Design tokens only.
-----------------------------------------------------------------*/

/* The catalogue pins every card picture to one shape (Theme Options → Shop →
   Catalogue) so a row of cards lines up. The design's own bottle carousel is
   the exception: each bottle is a cut-out silhouette drawn at its own
   proportions, so the shape is released inside it. */
.product .swiper_wrapper .product-image img {
	aspect-ratio: revert-layer;
}

/* The journal grid and the tastings grid mix cut-out bottle stills with
   landscape photographs, so each card's picture is pinned to one shape and the
   cards in a row start at the same line. */
.wine-blog .post-grid .entry-image img,
.tasting-card-media img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.tasting-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tasting-card .button {
	margin-top: auto;
	align-self: flex-start;
}

/* A tasting's duration / group / price strip: a label column against a value,
   ruled like the design's own list rows. */
.tasting-attributes {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.tasting-attributes li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 0;
	border-bottom: 1px solid rgba(var(--cnvs-contrast-rgb), .1);
}

.tasting-attributes .attr-label {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .75rem;
	opacity: .6;
}

.tasting-attributes .attr-value {
	font-family: var(--cnvs-primary-font);
	font-size: 1.125rem;
	font-weight: 600;
}

.single-tasting-meta .tasting-style {
	display: inline-block;
	margin-bottom: 1rem;
	color: var(--cnvs-themecolor);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .8125rem;
	font-weight: 700;
}

.single-tasting-footer {
	border-top: 1px solid rgba(var(--cnvs-contrast-rgb), .1);
	padding-top: 3rem;
}

/* The journal single and the term archives are drawn by the global templates,
   whose panels are white cards. On this body colour they read as holes, so the
   demo lets the page colour through and rules them instead. */
.wine .entry,
.wine .si-share,
.wine .post-navigation,
.wine .card,
.wine .post-reading-bar {
	background-color: transparent;
	box-shadow: none;
}

.wine .si-share,
.wine .post-navigation,
.wine .card,
.wine .post-reading-bar {
	border: 1px solid rgba(var(--cnvs-contrast-rgb), .12);
}

.wine .sidebar .widget-title,
.wine .sidebar .widget h4 {
	font-family: var(--cnvs-primary-font);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* The catalogue, cart and checkout carry the design's own outlined button and
   its display face on the totals, so the store does not read as a bolt-on. */
.wine-shop .product-title h3 a:hover,
.wine-shop .product-price {
	color: var(--cnvs-themecolor);
}

.wine-cart .cart-product-price,
.wine-cart .cart-product-subtotal,
.wine-cart .order-total .amount,
.wine-checkout .order-total .amount {
	font-family: var(--cnvs-primary-font);
	font-weight: 700;
}

.wine-cart table.cart th,
.wine-checkout .canvas-checkout-order th {
	font-family: var(--cnvs-primary-font);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.wine-cart .button:not(.button-3d-border),
.wine-checkout .button:not(.button-3d-border),
.wine-cart #place_order,
.wine-checkout #place_order {
	background-color: var(--cnvs-themecolor);
	color: #FFF;
}

/* The header underlaps the dark title band WordPress draws over the store
   surfaces. The design pins the phone button to the estate colour, which was
   only ever asked to sit on the pale hero photograph; over the band's own
   picture it disappears, so there it follows the header's light scheme — the
   same pair the design already uses at mobile width. */
body.is-expanded-menu:has(.page-title-dark) .button-header {
	border-color: var(--cnvs-themecolor-2);
	color: var(--cnvs-themecolor-2);
}

body.is-expanded-menu:has(.page-title-dark) .button.button-border:not(.button-fill).button-header:hover {
	background-color: var(--cnvs-themecolor-2);
	color: var(--cnvs-themecolor);
}

/* The theme's muted text tone is scaled for a white page; on this warm body
   colour it reads as barely-there. The journal, the archives and the record
   views all draw their meta lines from it, so the demo restates the one token
   in its own palette rather than restating nine selectors. Set on the body
   scope, so the design's own ported `:root` is untouched. */
.wine {
	--cnvs-contrast-500: #625851;
}

/* WooCommerce's own catalogue views draw the sale flag in the framework green.
   The estate has one accent, and these views carry the demo body class, so the
   flag follows it there too. */
.wine .sale-flash.badge {
	background-color: var(--cnvs-themecolor) !important;
	border-radius: 0;
}