/* ----------------------------------------------------------------
	XMAS (Christmas seasonal) demo: scoped styles.
	1:1 port of the demo source stylesheet (body byte-identical except
	the three snowfall url() refs, rewritten to the theme-shipped
	CSS-support files under xmas/images/snow/); this header replaces
	the source banner (purpose-only). Body font Roboto; theme colour
	#BD1B06. Loaded demo-scoped by inc/demos.php when the xmas demo
	is active, layered on the One Page engine stylesheet (see
	inc/demos/xmas.php).
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #BD1B06;
	--cnvs-themecolor-rgb: 189, 27, 6;

	--cnvs-body-font: 'Roboto', sans-serif;
	--cnvs-primary-font: var(--cnvs-body-font);
}

#header {
	--cnvs-primary-menu-submenu-font-size:	0.875rem;
	--cnvs-primary-menu-submenu-font-weight:	400;
	--cnvs-primary-menu-submenu-hover-font-weight: 500;
	--cnvs-primary-menu-submenu-tt:	none;
}

#header {
	--cnvs-sticky-header-height: 100px;
}

.xmas-countdown {
	margin-top: 7rem;
}

.xmas-countdown .countdown-section {
	font-size: 13px;
	letter-spacing: 1px;
	font-weight: 300;
	border: 0;
	color: rgba(255,255,255,0.8);
}

.xmas-countdown .countdown-amount {
	font-size: 50px;
	margin-bottom: 5px;
	letter-spacing: -2px;
	font-weight: 700;
	color: #FFF;
}


@media (min-width: 768px) {

	.vertical-middle-offset {
		position: relative;
		top: -100px;
	}

	.xmas-countdown .countdown-section { font-size: 18px; }

	.xmas-countdown .countdown-amount {
		font-size: 108px;
		letter-spacing: -4px;
	}

}


/* Add to Cart Button
-----------------------------------------------------------------*/

.button-addcart { background-color: #1A2F4C !important; }

.button-addcart:hover { background-color: #24426A !important; }


/* Payments Info
-----------------------------------------------------------------*/

.payment-cards {
	list-style: none;
	text-align: right;
	margin: 0;
}

.payment-cards li {
	display: inline-block;
	margin: 5px;
	margin-top: 0;
	width: 40px;
}


/* Footer
-----------------------------------------------------------------*/

#footer { background-color: #1A2F4C !important; }


/* Snowfall Effect
-----------------------------------------------------------------*/

.snowfall {
	background-image:	url('xmas/images/snow/s1.png'),
						url('xmas/images/snow/s2.png'),
						url('xmas/images/snow/s3.png');
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}

@keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-moz-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}

@-webkit-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-ms-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}


/* Responsive CSS
-----------------------------------------------------------------*/

@media (max-width: 991px) {
	#header.show-on-sticky #header-wrap {
		opacity: 1;
		pointer-events: auto;
	}

	.payments-info { text-align: center; }

	.payment-cards {
		margin-top: 40px;
		text-align: center;
	}
}


/* ================================================================
	XMAS demo: ADDITIVE (store surfaces) section.
	Everything above this banner is the 1:1 port of the source demo
	stylesheet. The rules below style the demo's OWN store pages:
	shop grid (.xmas-shop), cart (.xmas-cart), checkout
	(.xmas-checkout) and product singles (.xmas-single): surfaces
	the single-page source does not have, using only the demo's own
	vocabulary: the theme-colour token and the Add-to-Cart navy
	palette the source assigns to .button-addcart / #footer.
	================================================================ */

.xmas-shop .product-title h3 { font-weight: 500; }

.xmas-shop .sale-flash,
.xmas-single .sale-flash { background-color: var(--cnvs-themecolor) !important; }

.xmas-shop .product-price,
.xmas-shop .product-price ins { color: var(--cnvs-themecolor); }

.xmas-shop .bg-overlay .btn:hover,
.xmas-single .bg-overlay .btn:hover {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: #FFF;
}

.xmas-shop .product-image {
	border-radius: 4px;
	overflow: hidden;
}

/* Every product photo in this demo is square, so pin the card image box to
 * 1:1 via the shared product-card ratio property (woocommerce.css reads it
 * as aspect-ratio + object-fit:cover). Keeps shop-grid and related-carousel
 * cards the SAME height even when a lazy-loaded image's intrinsic size is
 * not yet known (loading=lazy + sizes=auto can otherwise let height:auto
 * resolve absurdly before load).
 *
 * `.xmas-shop` / `.xmas-single` cover the demo's own store PAGES;
 * `.xmas-archive.canvas-woocommerce` covers the store's CANONICAL surface (
 * `/shop/` and the product category/tag archives) which renders through the
 * site's global archive template and carries no wrapper class, so without it
 * the pin (and the lazy-image protection it buys) stops at the demo pages.
 * See "WHERE TO PIN IT" in woocommerce.css. */
.xmas-shop .product,
.xmas-archive.canvas-woocommerce .product,
.xmas-single .product {
	--cnvs-product-card-ratio: 1 / 1;
}

.xmas-cart .canvas-cart-totals .order-total .amount { color: var(--cnvs-themecolor); }

.xmas-cart a.button,
.xmas-cart button.button,
.xmas-checkout #place_order { background-color: #1A2F4C !important; }

.xmas-cart a.button:hover,
.xmas-cart button.button:hover,
.xmas-checkout #place_order:hover { background-color: #24426A !important; }

.xmas-cart .form-control:focus,
.xmas-checkout .form-control:focus { border-color: var(--cnvs-themecolor); }

.xmas-single .product-price,
.xmas-single p.price { color: var(--cnvs-themecolor); }