/* =========================================================
   Elysian — WooCommerce interaction styles.

   Covers the JS-driven UI from elysian-woo.js: loading states,
   spinners, live search suggestions, wishlist badge, product-filter
   veil, and cart-drawer polish. Pure additive layer on top of
   luxe.css — reuses its tokens (champagne / ink / warm bg) and never
   reintroduces default WooCommerce styling.
   ========================================================= */

:root {
	--ew-accent: var(--lux-accent, #a8845c);
	--ew-ink:    var(--lux-ink, #1a1a1a);
	--ew-bg:     var(--lux-bg, #fafaf7);
	--ew-line:   rgba(26, 26, 26, .08);
	--ew-shadow: 0 18px 40px rgba(26, 26, 26, .14);
	--ew-radius: 6px;
}

/* ---------------------------------------------------------
   1. Loading states
   --------------------------------------------------------- */
.elysian-loading {
	position: relative;
	opacity: .55;
	pointer-events: none;
	transition: opacity .2s ease;
}
.elysian-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, .6);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ew-spin .6s linear infinite;
}

/* Standalone spinner (search dropdown, wishlist render). */
.elysian-spinner {
	display: inline-block;
	width: 22px;
	height: 22px;
	border: 2px solid var(--ew-line);
	border-top-color: var(--ew-accent);
	border-radius: 50%;
	animation: ew-spin .6s linear infinite;
}

@keyframes ew-spin {
	to { transform: rotate(360deg); }
}

/* Add-to-cart flash ("Added ✓") — keep the existing button look,
   just nudge the accent so the state change reads without a reflow. */
.add-to-cart.is-added {
	background-color: var(--ew-accent);
	border-color: var(--ew-accent);
	color: #fff;
}

/* ---------------------------------------------------------
   2. Live search suggestions
   --------------------------------------------------------- */
.search-overlay-form,
.products-search-form {
	position: relative;
}

.elysian-search-suggestions {
	position: absolute;
	z-index: 1060;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	max-height: 60vh;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--ew-line);
	border-radius: var(--ew-radius);
	box-shadow: var(--ew-shadow);
	text-align: left;
}

/* In the dark search overlay, keep the panel light for contrast. */
.search-overlay .elysian-search-suggestions {
	top: calc(100% + 12px);
}

.elysian-suggest-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--ew-line);
	transition: background-color .15s ease;
}
.elysian-suggest-item:last-child { border-bottom: 0; }
.elysian-suggest-item:hover,
.elysian-suggest-item.is-active {
	background-color: var(--ew-bg);
}

.elysian-suggest-thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--ew-bg);
}
.elysian-suggest-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elysian-suggest-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.elysian-suggest-title {
	font-family: var(--lux-sans, inherit);
	font-size: .92rem;
	font-weight: 500;
	color: var(--ew-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.elysian-suggest-price {
	font-size: .85rem;
	color: var(--ew-accent);
	font-weight: 600;
}
.elysian-suggest-price del {
	color: #9a9a96;
	font-weight: 400;
	margin-right: 6px;
}

.elysian-suggest-loading,
.elysian-suggest-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
	color: #6e6e6e;
	font-size: .9rem;
}

.elysian-suggest-all {
	display: block;
	padding: 12px 14px;
	text-align: center;
	font-weight: 600;
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ew-accent);
	border-top: 1px solid var(--ew-line);
}
.elysian-suggest-all:hover { background: var(--ew-bg); }

/* ---------------------------------------------------------
   3. Wishlist badge + heart active state
   --------------------------------------------------------- */
.elysian-wishlist-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--ew-accent);
	border-radius: 999px;
	transform: scale(0);
	transition: transform .2s ease;
}
.elysian-wishlist-count.has-items { transform: scale(1); }

.cart-btn a span.cart-count.elysian-bump {
	animation: ew-cart-bump 0.45s ease;
}
@keyframes ew-cart-bump {
	0%, 100% { transform: scale(1); }
	40% { transform: scale(1.35); }
}

.elysian-compare-toggle.is-active i,
.compare-btn.is-active .elysian-compare-toggle i {
	color: var(--ew-accent);
}

.elysian-wishlist-toggle.is-active i,
.wishlist-btn .elysian-wishlist-toggle.is-active i {
	color: var(--ew-accent);
	font-weight: 700;
}
.elysian-wishlist-toggle.is-active i::before {
	content: "\ec8c"; /* boxicons solid heart */
}

/* ---------------------------------------------------------
   3b. Wishlist drawer — list layout (#shoppingWishlistModal)
   --------------------------------------------------------- */
#shoppingWishlistModal .elysian-wishlist-list {
	margin: 0;
}

#shoppingWishlistModal .elysian-wishlist-item.products-cart {
	padding-left: 72px;
	padding-right: 0;
	padding-top: 0;
	margin-bottom: 18px;
}

#shoppingWishlistModal .elysian-wishlist-item .products-image {
	width: 58px;
}

#shoppingWishlistModal .elysian-wishlist-item .products-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
}

#shoppingWishlistModal .elysian-wishlist-item .products-content {
	padding-right: 28px;
}

#shoppingWishlistModal .elysian-wishlist-item .products-content .remove-btn {
	top: 0;
	right: 0;
	transform: none;
	opacity: 1;
	visibility: visible;
	border: 0;
	background: transparent;
	padding: 0;
	line-height: 1;
	font-size: 20px;
	cursor: pointer;
}

#shoppingWishlistModal .elysian-wishlist-item .products-content .remove-btn:hover {
	color: #c0392b;
}

#shoppingWishlistModal .elysian-wishlist-meta {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #888;
	line-height: 1.4;
}

#shoppingWishlistModal .elysian-wishlist-item .products-content h3 {
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.35;
}

#shoppingWishlistModal .elysian-wishlist-item .products-price {
	margin-bottom: 10px;
}

#shoppingWishlistModal .elysian-wishlist-item .products-price .price {
	font-size: 14px;
	font-weight: 600;
	color: #111;
}

#shoppingWishlistModal .elysian-wishlist-add-item,
#shoppingWishlistModal .elysian-wishlist-view-product {
	display: block;
	width: 100%;
	margin-top: 0;
	padding: 10px 12px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

#shoppingWishlistModal .elysian-wishlist-add-all.disabled,
#shoppingWishlistModal .elysian-wishlist-add-all:disabled {
	opacity: 0.45;
	pointer-events: none;
}

#shoppingWishlistModal .elysian-wishlist-empty i {
	display: block;
	font-size: 42px;
	color: #ccc;
	margin-bottom: 12px;
}

#shoppingWishlistModal .elysian-wishlist-empty p {
	margin: 0;
	color: #777;
	font-size: 14px;
}

@media only screen and (max-width: 767px) {
	#shoppingWishlistModal .elysian-wishlist-item.products-cart {
		padding-left: 68px;
	}
}

/* ---------------------------------------------------------
   4. Product-filter veil (sort / price → grid refresh)
   --------------------------------------------------------- */
.elysian-products-row {
	position: relative;
	transition: opacity .25s ease;
}
.elysian-products-row.is-loading {
	opacity: .4;
	pointer-events: none;
}
.elysian-products-veil {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 80px;
	z-index: 5;
}

/* ---------------------------------------------------------
   5. Cart drawer — layout owned by luxe.css Phase 116/121
   --------------------------------------------------------- */
.shoppingCartModal .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 1px;
	flex: 1 1 auto;
}

/* ---------------------------------------------------------
   5b. Cart page — match static cart.html
   --------------------------------------------------------- */
/* Static cart has no coupon field; coupons live on checkout. */
body.elysian-cart .woocommerce-cart-form .coupon {
	display: none !important;
}

/* Undo woocommerce-reset input-text skin inside qty counter. */
body.elysian-cart .cart-table .input-counter input.qty {
	width: 100%;
	border: none;
	padding: 0;
	box-shadow: none;
	background-color: #f8f8f8;
	text-align: center;
}

/* Submit button must match .default-btn anchor styling. */
body.elysian-cart .cart-buttons button.default-btn {
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	line-height: inherit;
}

body.elysian-cart .cart-table table tbody tr td.product-subtotal .remove {
	float: right;
	display: block;
	font-size: 18px;
	line-height: 1;
}

/* Checkout visuals live in assets/css/checkout.css (loaded on is_checkout() only). */

/* ---------------------------------------------------------
   5d. Account pages — login/signup static + themed dashboard
   --------------------------------------------------------- */
body.elysian-account .login-content,
body.elysian-account .new-customer-content,
body.elysian-account .signup-content,
body.elysian-account .elysian-auth-panel {
	background: #fff;
	border: 1px solid var(--lux-line, #e8e4df);
}

body.elysian-account .elysian-auth-panel {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

body.elysian-account .elysian-auth-intro {
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--lux-muted, #777);
}

body.elysian-account .my-account-layout .account-nav {
	background: var(--lux-bg-soft, #fafaf7);
	border: 1px solid var(--lux-line, #e8e4df);
	padding: 24px 20px;
	margin-bottom: 30px;
}

body.elysian-account .my-account-layout .account-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.elysian-account .my-account-layout .account-nav-list li {
	margin: 0;
	border-bottom: 1px solid var(--lux-line, #e8e4df);
}

body.elysian-account .my-account-layout .account-nav-list li:last-child {
	border-bottom: none;
}

body.elysian-account .my-account-layout .account-nav-list li a {
	display: block;
	padding: 12px 0;
	font-family: var(--lux-sans, inherit);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--lux-ink, #1a1a1a);
	text-decoration: none;
	transition: color .2s ease;
}

body.elysian-account .my-account-layout .account-nav-list li.is-active a,
body.elysian-account .my-account-layout .account-nav-list li a:hover {
	color: var(--lux-accent-deep, #8b7355);
}

body.elysian-account .woocommerce-MyAccount-content .account-panel {
	background: #fff;
	border: 1px solid var(--lux-line, #e8e4df);
	padding: 36px;
}

body.elysian-account .woocommerce-MyAccount-content .account-panel-title,
body.elysian-account .woocommerce-MyAccount-content .account-panel .title {
	font-family: var(--lux-serif, inherit);
	font-size: 26px;
	font-weight: 500;
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lux-line, #e8e4df);
}

body.elysian-account .woocommerce-MyAccount-content .account-panel p,
body.elysian-account .woocommerce-MyAccount-content .account-panel address {
	font-family: var(--lux-sans, inherit);
	font-size: 14px;
	line-height: 1.7;
	color: var(--lux-muted, #666);
}

body.elysian-account .woocommerce-MyAccount-content .account-panel a {
	color: var(--lux-accent-deep, #8b7355);
	font-weight: 500;
}

body.elysian-account .woocommerce-MyAccount-content .order-table table {
	margin-bottom: 0;
}

body.elysian-account .woocommerce-MyAccount-content .order-table table thead th {
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 500;
}

body.elysian-account .woocommerce-MyAccount-content .woocommerce-Address.address-card,
body.elysian-account .woocommerce-MyAccount-content .woocommerce-Address.col-1 {
	background: var(--lux-bg-soft, #fafaf7);
	border: 1px solid var(--lux-line, #e8e4df);
	padding: 24px;
	margin-bottom: 20px;
}

body.elysian-account .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

body.elysian-account .woocommerce-MyAccount-content .woocommerce-Address-title .title {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 20px;
}

body.elysian-account .woocommerce-MyAccount-content .account-edit-account .form-group label,
body.elysian-account .woocommerce-MyAccount-content .account-edit-address .form-group label,
body.elysian-account .woocommerce-MyAccount-content .account-edit-address .form-row label {
	display: block;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}

body.elysian-account .woocommerce-MyAccount-content .account-edit-account .form-control,
body.elysian-account .woocommerce-MyAccount-content .account-edit-address .form-control,
body.elysian-account .woocommerce-MyAccount-content .account-edit-address .input-text {
	height: 50px;
}

body.elysian-account .woocommerce-MyAccount-content .account-password-fieldset {
	border: 1px solid var(--lux-line, #e8e4df);
	padding: 24px;
	margin: 24px 0;
}

body.elysian-account .woocommerce-MyAccount-content .account-password-fieldset legend {
	font-family: var(--lux-serif, inherit);
	font-size: 18px;
	font-weight: 500;
	padding: 0 8px;
}

body.elysian-account .woocommerce-MyAccount-content .elysian-field-hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--lux-muted, #777);
}

body.elysian-account .woocommerce-MyAccount-content .woocommerce-pagination {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
}

body.elysian-account .woocommerce-MyAccount-content button.default-btn,
body.elysian-account .login-content button.default-btn,
body.elysian-account .signup-content button.default-btn {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

body.elysian-account .woocommerce-MyAccount-content .woocommerce-message,
body.elysian-account .woocommerce-MyAccount-content .woocommerce-info,
body.elysian-account .woocommerce-MyAccount-content .woocommerce-error {
	border-radius: 0;
	margin-bottom: 20px;
}

body.elysian-account .woocommerce-address-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem));
	margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem));
}

body.elysian-account .woocommerce-address-fields__field-wrapper > [class*="col-"] {
	padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
	padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

@media (min-width: 992px) {
	body.elysian-account .my-account-layout .account-nav {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------
   6. Shop sidebar visibility (category / shop archive)
   --------------------------------------------------------- */
@media (min-width: 992px) {
	.products-area .shop-sidebar-column .shop-sidebar-filters {
		display: block !important;
	}
}

@media (max-width: 991px) {
	.products-area .shop-sidebar-column {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.products-filter-options .sub-title a[data-bs-target="#productsFilterModal"] {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-weight: 600;
	}
}

.products-area .price-list-widget .collection-filter-by-price {
	min-height: 40px;
}

/* ---------------------------------------------------------
   7. Functional shop filter lists
   --------------------------------------------------------- */
.woocommerce-widget-area .material-list-widget .filter-list-row,
.woocommerce-widget-area .availability-list-widget .filter-list-row,
.woocommerce-widget-area .filter-list-widget .filter-list-row {
	margin-top: 0;
}
.woocommerce-widget-area .filter-list-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-widget-area .filter-list-row li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid var(--ew-line);
	border-radius: 4px;
	color: var(--ew-ink);
	font-size: .9rem;
	line-height: 1.35;
	transition: all .2s ease;
}
.woocommerce-widget-area .filter-list-row li.active a,
.woocommerce-widget-area .filter-list-row li a:hover {
	border-color: var(--ew-accent);
	background: var(--ew-accent);
	color: #fff;
}
.woocommerce-widget-area .filter-list-row li a span {
	font-size: .78rem;
	opacity: .72;
}
.coupon-area .coupon-form-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.coupon-area .coupon-form-row input {
	flex: 1;
	min-width: 200px;
}
.single-products-details-image > a {
	display: block;
}
.single-products-details-image > a img {
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------
   7. Variable Product Polish
   --------------------------------------------------------- */
.products-color-switch ul,
.products-material-wrapper ul,
.products-size-wrapper ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.products-material-wrapper ul li a,
.products-size-wrapper ul li a {
	display: block;
	padding: 6px 15px;
	border: 1px solid var(--ew-line);
	border-radius: 4px;
	font-size: .85rem;
	color: var(--ew-ink);
	transition: all .2s ease;
}
.products-material-wrapper ul li.active a,
.products-material-wrapper ul li a:hover,
.products-size-wrapper ul li.active a,
.products-size-wrapper ul li a:hover {
	border-color: var(--ew-accent);
	background: var(--ew-accent);
	color: #fff;
}
.products-material-wrapper ul li.disabled a,
.products-size-wrapper ul li.disabled a {
	opacity: .45;
	pointer-events: none;
}

/* ---------------------------------------------------------
   8. Reduced-motion guard
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.elysian-loading::after,
	.elysian-spinner { animation-duration: 1.4s; }
	.products-cart { animation: none; }
}