/* =====================================================
   EMOTIVE SITE ENHANCEMENTS
===================================================== */

:root {
	--emotive-dark: #1C2420;
	--emotive-light: #F3F1EA;
	--emotive-green: #607563;
	--emotive-coral: #C95E3D;
	--emotive-teal: #236B6B;
	--emotive-gold: #C69B4A;

	--emotive-text-dark: #1B1C19;
	--emotive-text-light: #F7F5EF;

	--emotive-radius: 12px;
	--emotive-shadow:
		0 8px 24px rgba(28,36,32,.10);
}


/* =====================================================
   ACCESSIBILITY
===================================================== */

.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;

	transform: translateY(-160%);

	padding: 12px 18px;

	background: var(--emotive-dark);
	color: var(--emotive-text-light);

	border-radius: 8px;
}

.skip-link:focus {
	transform: translateY(0);
}


:where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[tabindex]
):focus-visible {
	outline: 3px solid var(--emotive-teal) !important;
	outline-offset: 3px !important;
}


/* =====================================================
   INTERACTION
===================================================== */

button,
.wp-element-button,
.wp-block-button__link {
	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		box-shadow .2s ease,
		transform .2s ease;
}


.emotive-bundle-card,
.woocommerce ul.products li.product,
.wc-block-grid__product {
	border-radius: var(--emotive-radius);

	transition:
		transform .2s ease,
		box-shadow .2s ease;
}


.emotive-bundle-card:hover,
.emotive-bundle-card:focus-visible,
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within,
.wc-block-grid__product:hover,
.wc-block-grid__product:focus-within {
	transform: translateY(-4px);

	box-shadow: var(--emotive-shadow);
}


/* =====================================================
   HEADER / ICONS
===================================================== */

.emotive-header-icons a,
.emotive-mobile-menu-toggle,
.emotive-mobile-menu-close {
	transition:
		color .2s ease,
		background-color .2s ease;
}


.emotive-header-icons a:hover,
.emotive-header-icons a:focus-visible {
	color: var(--emotive-teal) !important;
}


/* =====================================================
   SHOP / PRODUCT ARCHIVE
===================================================== */

body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag {
	background: var(--emotive-light);
	color: var(--emotive-text-dark);
}


.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--emotive-light);

	overflow: hidden;
}


.woocommerce ul.products li.product .star-rating,
.wc-block-grid__product-rating {
	color: var(--emotive-gold);
}


/* =====================================================
   CART
===================================================== */

body.woocommerce-cart
.wc-block-cart__submit-button,

body.woocommerce-cart
.checkout-button,

body.woocommerce-cart
.wc-proceed-to-checkout a {
	background: var(--emotive-coral) !important;
	color: #fff !important;

	border-radius: 999px !important;
}


body.woocommerce-cart
.wc-block-cart__submit-button:hover,

body.woocommerce-cart
.checkout-button:hover {
	background: var(--emotive-teal) !important;
}


/* =====================================================
   CHECKOUT
===================================================== */

body.woocommerce-checkout
input:focus,

body.woocommerce-checkout
select:focus,

body.woocommerce-checkout
textarea:focus {
	border-color: var(--emotive-teal) !important;

	box-shadow:
		0 0 0 2px rgba(35,107,107,.18) !important;
}


body.woocommerce-checkout
#place_order,

body.woocommerce-checkout
.wc-block-components-checkout-place-order-button {
	background: var(--emotive-coral) !important;
	color: #fff !important;

	border-radius: 999px !important;
}


body.woocommerce-checkout
.woocommerce-error,

body.woocommerce-checkout
.wc-block-components-notice-banner.is-error {
	border-color: var(--emotive-coral) !important;
}


/* =====================================================
   JOURNAL / CONTENT
===================================================== */

body.single-post blockquote,
body.blog blockquote {
	border-left:
		4px solid var(--emotive-gold);

	padding-left: 24px;
}


/* =====================================================
   FOOTER
===================================================== */

.emotive-site-footer,
.emotive-footer,
footer.wp-block-template-part {
	background: var(--emotive-dark);
	color: var(--emotive-text-light);
}


.emotive-site-footer a:hover,
.emotive-site-footer a:focus-visible,
.emotive-footer a:hover,
.emotive-footer a:focus-visible {
	color: var(--emotive-gold) !important;
}


/* =====================================================
   IMAGES / CLS
===================================================== */

img[loading="lazy"] {
	display: block;
}


/* =====================================================
   BACK TO TOP
===================================================== */

.emotive-back-to-top {
	position: fixed;

	right: 22px;
	bottom: 22px;

	z-index: 999;

	width: 48px;
	height: 48px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: var(--emotive-teal);
	color: #fff;

	box-shadow:
		0 8px 24px rgba(0,0,0,.15);

	opacity: 0;
	visibility: hidden;

	transform: translateY(10px);

	transition:
		opacity .2s ease,
		transform .2s ease,
		visibility .2s ease;

	cursor: pointer;
}


.emotive-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;

	transform: translateY(0);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

	.emotive-mobile-menu-toggle,
	.emotive-mobile-menu-close,
	.emotive-header-icons a,
	.emotive-hero-button,
	.emotive-bundle-arrow,
	.emotive-back-to-top {
		min-width: 44px;
		min-height: 44px;
	}


	.emotive-home,
	.emotive-shop-way,
	.emotive-horizontal-story,
	.emotive-alacarte {
		max-width: 100%;

		overflow-x: clip;
	}


	.emotive-back-to-top {
		right: 14px;
		bottom: 14px;
	}


	/* Don't use hover lifting on touch screens */

	.emotive-bundle-card:hover,
	.woocommerce ul.products li.product:hover {
		transform: none;
	}

}


@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;

		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;

		transition-duration: .01ms !important;
	}

}