/* Echo Perfume — WooCommerce overrides */

/* ---------- Shop: best-of-each-category row + AI card (top of the default, unfiltered view) ---------- */
.shop-bestsellers-quad { margin-bottom: var(--space-2xl); }
.shop-bestsellers-quad__item { display: flex; flex-direction: column; gap: 0.6em; }
.shop-bestsellers-quad__tag {
	align-self: flex-start;
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-gold);
	border: 1px solid var(--color-gold);
	border-radius: var(--radius-pill);
	padding: 0.3em 0.9em;
}
.shop-bestsellers-quad__ai {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	text-align: center;
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, var(--color-gold-light), var(--color-gold));
	color: var(--color-black);
	transition: transform var(--dur-fast) var(--ease-fluid);
}
.shop-bestsellers-quad__ai:hover { transform: translateY(-4px); }
.shop-bestsellers-quad__ai-icon { font-size: 2.5rem; }
.shop-bestsellers-quad__ai-label { font-size: var(--fs-body); line-height: 1.5; }

/* ---------- Shop layout ---------- */
.shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 960px) { .shop-layout { grid-template-columns: 1fr; } }

/* Standalone, always-visible search — deliberately not inside the
   collapsible .filters sidebar, so finding a product by name never requires
   opening/engaging with category, brand, mood, etc. filters at all. */
.shop-search-bar { display: flex; gap: 0.6em; margin-bottom: var(--space-md); }
.shop-search-bar input {
	flex: 1;
	background: var(--color-bg);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	padding: 0.9em 1.1em;
	color: var(--color-text);
	transition: border-color var(--dur-fast) var(--ease-fluid), box-shadow var(--dur-fast) var(--ease-fluid);
}
.shop-search-bar input:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px var(--color-gold-soft);
}
.shop-search-bar .icon-btn { flex-shrink: 0; border: 1px solid var(--color-border-strong); }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.shop-toolbar__count { color: var(--color-text-muted); font-size: var(--fs-small); }
.shop-toolbar__right { display: flex; align-items: center; gap: var(--space-sm); }
.shop-sort select { border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: 0.7em 2.2em 0.7em 1.2em; background: var(--color-bg); color: var(--color-text); appearance: none; }
.filter-toggle-mobile { display: none; }
@media (max-width: 960px) { .filter-toggle-mobile { display: inline-flex; } }

.filters { position: sticky; top: 120px; }
/* The "Filters" button toggles this via .is-open-mobile (see main.js) — on
   mobile it starts collapsed so visitors reach the products immediately
   instead of scrolling through every filter group first. */
@media (max-width: 960px) {
	.filters { display: none; position: static; }
	.filters.is-open-mobile { display: block; margin-bottom: var(--space-lg); }
}
.filters__group { border-bottom: 1px solid var(--color-border); padding-block: var(--space-md); }
.filters__group:first-child { padding-top: 0; }
.filters__title { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 1.05rem; cursor: pointer; user-select: none; }
.filters__title .chev { transition: transform var(--dur-fast) var(--ease-fluid); }
.filters__group.is-collapsed .filters__title .chev { transform: rotate(-90deg); }
.filters__group.is-collapsed .filters__body { display: none; }
.filters__body { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 0.6em; }
.filters__body.filters__body--pills { flex-direction: row; flex-wrap: wrap; gap: 0.5em; }
.filter-check { display: flex; align-items: center; gap: 0.6em; font-size: var(--fs-small); cursor: pointer; }
.filter-check input { accent-color: var(--color-gold); }
.filter-check .count { margin-left: auto; color: var(--color-text-muted); font-size: var(--fs-micro); }

.price-range { display: flex; flex-direction: column; gap: 0.6em; }
.price-range__inputs { display: flex; align-items: center; gap: 0.6em; }
.price-range__inputs input { width: 100%; }
.price-range input[type="range"] { accent-color: var(--color-gold); }

.active-filters { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: var(--space-md); }
.active-filters .pill { padding-right: 0.6em; display: inline-flex; align-items: center; gap: 0.4em; }

.pagination { display: flex; justify-content: center; gap: 0.5em; margin-top: var(--space-xl); }
.pagination a, .pagination span { width: 2.6em; height: 2.6em; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--color-border); font-size: var(--fs-small); }
.pagination .current { background: var(--color-black); color: var(--color-inverse-text); border-color: var(--color-black); }

/* ---------- Single product ---------- */
.product-single { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
@media (max-width: 960px) { .product-single { grid-template-columns: 1fr; gap: var(--space-lg); } }

.product-gallery__main { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); margin-bottom: var(--space-sm); }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 150ms var(--ease-fluid); }
.product-gallery__thumbs { display: flex; gap: 0.6em; }
.product-gallery__thumbs button { width: 76px; height: 92px; border-radius: var(--radius-md); overflow: hidden; padding: 0; border: 1px solid var(--color-border); cursor: pointer; background: none; }
.product-gallery__thumbs button.is-active { border-color: var(--color-gold); }
.product-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product-info__brand { color: var(--color-gold); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--fs-small); margin-bottom: 0.5em; }
.product-info__title { margin-bottom: 0.3em; }
.product-info__price { font-family: var(--font-display); font-size: 1.6rem; margin-block: var(--space-sm); }
.product-info__price del { color: var(--color-text-muted); font-size: 0.7em; margin-right: 0.5em; }
.product-info__tags { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: var(--space-md); }

.qty-cart-row { display: flex; gap: var(--space-sm); align-items: stretch; margin-block: var(--space-md); flex-wrap: wrap; }
.qty-cart-row form.cart { display: flex; gap: var(--space-sm); align-items: center; flex: 1; }

/* Wishlist heart toggle on the single product page — sits beside Add to Cart.
   .qty-cart-row already wraps on narrow screens; once the form and this
   button stack, a lone pill button reads as an afterthought, so it goes
   full-width to match the row above it instead. */
.product-info__wishlist { display: flex; align-items: center; flex: 1 1 auto; }
.wishlist-toggle--single {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	width: auto; height: 100%; min-height: 52px;
	padding: 0 1.2em;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-fluid), color var(--dur-fast) var(--ease-fluid);
}
.wishlist-toggle--single:hover { border-color: var(--color-gold); color: var(--color-gold); transform: none; }
.wishlist-toggle--single.is-active { border-color: var(--color-gold); }
@media (max-width: 560px) {
	.product-info__wishlist { flex-basis: 100%; }
	.wishlist-toggle--single { width: 100%; }
}
.wishlist-toggle--single .wishlist-toggle__icon { width: 18px; height: 18px; flex-shrink: 0; }
.wishlist-toggle--single .wishlist-toggle__label { font-size: var(--fs-small); }
.quantity input { width: 70px; height: 100%; text-align: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding-block: 0.9em; background: var(--color-bg); color: var(--color-text); }
.single_add_to_cart_button {
	display: inline-flex; align-items: center; gap: 0.75em;
	font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide);
	background: var(--color-black); color: var(--color-inverse-text);
	border: 1px solid var(--color-black); border-radius: var(--radius-pill);
	padding: 0.95em 2em; cursor: pointer; flex: 1;
	transition: transform var(--dur-fast) var(--ease-fluid), background-color var(--dur-fast) var(--ease-fluid), color var(--dur-fast) var(--ease-fluid);
}
.single_add_to_cart_button:hover { transform: translateY(-2px); }
.single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }
/* Dark mode: swap to the gold accent instead of black-on-black-ish, same
   treatment already used for the active pill/chat bubble elsewhere. */
:root[data-theme="dark"] .single_add_to_cart_button {
	background: var(--color-gold);
	color: var(--color-black);
	border-color: var(--color-gold);
}
.ask-ai-cta {
	display: flex; align-items: center; gap: var(--space-sm);
	border: 1px dashed var(--color-gold);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	margin-block: var(--space-md);
	background: var(--color-gold-soft);
}
.ask-ai-cta__icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-black); color: var(--color-gold-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* WooCommerce's own tab markup + JS (wc-single-product.js), restyled to match. */
.woocommerce-tabs { margin-top: var(--space-2xl); }
.woocommerce-tabs ul.tabs { display: flex; gap: var(--space-lg); border-bottom: 1px solid var(--color-border); margin: 0 0 var(--space-lg); padding: 0; list-style: none; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding-bottom: 0.8em; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); border-bottom: 2px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { color: var(--color-text); border-color: var(--color-gold); }
.woocommerce-tabs .woocommerce-Tabs-panel { max-width: 720px; }

.review { display: flex; gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-border); }
.review__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-gold-soft); color: var(--color-gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); flex-shrink: 0; }
.review__author { font-weight: 500; }
.review__date { font-size: var(--fs-micro); color: var(--color-text-muted); }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-xl); align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-line { display: grid; grid-template-columns: 90px 1fr auto auto; gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-bottom: 1px solid var(--color-border); }
.cart-line img { border-radius: var(--radius-md); aspect-ratio: 4/5; object-fit: cover; }
.cart-summary { position: sticky; top: 120px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.summary-row { display: flex; justify-content: space-between; padding-block: 0.5em; }
.summary-row.total { border-top: 1px solid var(--color-border); margin-top: 0.5em; padding-top: 1em; font-family: var(--font-display); font-size: 1.2rem; }
.wc-proceed-to-checkout { margin-top: var(--space-lg); }

/* AI nudge below "Proceed to Checkout" — icon sits on its own line above
   the text (a full pill shape squeezed 2 lines of text against a
   same-line icon, which read as cramped/awkward) and a soft pulsing ring
   keeps it from blending into the surrounding buttons. */
.cart-ai-nudge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	width: 100%;
	margin-top: var(--space-md);
	padding: 1.1em 1.4em;
	border-radius: var(--radius-lg);
	background: var(--color-gold);
	color: var(--color-black);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	animation: cartAiPulse 2.4s ease-in-out infinite;
}
.cart-ai-nudge:hover { animation-play-state: paused; transform: translateY(-2px); }
.cart-ai-nudge__icon { font-size: 1.4rem; }
@keyframes cartAiPulse {
	0%, 100% { box-shadow: 0 0 0 0 var(--color-gold-soft); }
	50% { box-shadow: 0 0 0 12px var(--color-gold-soft); }
}
/* On mobile the copy under "Proceed to Checkout" starts hidden — the
   floating top copy (below) is the one visible while scrolling. Once the
   visitor scrolls far enough that the floating copy reaches the "Update
   Cart" button, assets/js/cart-ai-nudge.js swaps them: the floating one
   disappears and this one pops into view, so only one is ever on screen. */
@media (max-width: 900px) {
	.cart-summary .cart-ai-nudge { display: none; }
	.cart-summary .cart-ai-nudge.cart-ai-nudge--popped {
		display: flex;
		animation: cartAiPopIn 500ms var(--ease-fluid) both, cartAiPulse 2.4s ease-in-out 500ms infinite;
	}
}

/* Mobile-only nudge, positioned between the Cart heading and the item list
   (it's the first child of .cart-items, so that's exactly where it sits).
   `sticky` means it drops in, then as the visitor scrolls it visibly rides
   along pinned near the top of the viewport while they scroll through the
   item list. Right as it reaches the "Update Cart" button,
   assets/js/cart-ai-nudge.js fades this one out and pops the copy under
   "Proceed to Checkout" (above) into view instead. */
.cart-ai-nudge--top { display: none; }
@media (max-width: 900px) {
	.cart-ai-nudge--top {
		display: flex;
		position: sticky;
		top: 96px;
		z-index: 10;
		margin-top: 0;
		margin-bottom: var(--space-lg);
		animation: cartAiDropIn 650ms var(--ease-fluid) both;
		transition: opacity 200ms var(--ease-fluid), transform 200ms var(--ease-fluid);
	}
	.cart-ai-nudge--top.cart-ai-nudge--gone {
		opacity: 0;
		transform: scale(0.85);
		pointer-events: none;
	}
}
@keyframes cartAiDropIn {
	from { transform: translateY(-40px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes cartAiPopIn {
	0% { transform: scale(0.4); opacity: 0; }
	60% { transform: scale(1.08); opacity: 1; }
	80% { transform: scale(0.96); }
	100% { transform: scale(1); }
}

.gift-wrap-field {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}
.gift-wrap-field__checkbox {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--fs-small);
	cursor: pointer;
}
.gift-wrap-field__checkbox input { accent-color: var(--color-gold); width: 16px; height: 16px; }
.gift-wrap-field__message {
	display: block;
	width: 100%;
	margin-top: var(--space-sm);
	padding: 0.7em 0.9em;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	resize: vertical;
	min-height: 60px;
}
.gift-wrap-field__hint { margin-top: 0.4em; font-size: var(--fs-micro); color: var(--color-text-muted); }

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-2xl); align-items: start; }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-section { margin-bottom: var(--space-xl); }
.checkout-section h3 { margin-bottom: var(--space-md); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 560px) { .form-row-2 { grid-template-columns: 1fr; } }
.payment-methods { display: flex; flex-direction: column; gap: 0.6em; }
.payment-method { border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.checkout-sidebar { position: sticky; top: 120px; }

/* WooCommerce's native checkout field markup (form_field()) */
.form-row { margin-bottom: var(--space-md); }
.form-row label { display: block; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); margin-bottom: 0.5em; }
.form-row .required { color: var(--color-gold); text-decoration: none; }
.form-row input.input-text, .form-row select, .form-row textarea {
	width: 100%; background: var(--color-bg); border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md); padding: 0.85em 1em; color: var(--color-text);
}
.form-row input.input-text:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px var(--color-gold-soft); }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); }
.woocommerce-billing-fields__field-wrapper .form-row-wide, .woocommerce-shipping-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; } }

table.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); }
table.woocommerce-checkout-review-order-table th, table.woocommerce-checkout-review-order-table td { padding: 0.6em 0; border-bottom: 1px solid var(--color-border); text-align: left; }
table.woocommerce-checkout-review-order-table tfoot tr:last-child td, table.woocommerce-checkout-review-order-table tfoot tr:last-child th { font-family: var(--font-display); font-size: 1.15rem; border-bottom: none; }

ul.payment_methods { list-style: none; margin: 0 0 var(--space-md); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
ul.payment_methods li { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); }
ul.payment_methods li:last-child { border-bottom: none; }
.payment_box { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-sm); margin-top: 0.6em; font-size: var(--fs-small); }

#place_order, .place-order .button, .checkout-button {
	display: block;
	width: 100%;
	border-radius: var(--radius-pill);
	padding: 1em 1.5em; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide);
	text-align: center; text-decoration: none;
	cursor: pointer; transition: transform var(--dur-fast) var(--ease-fluid), background-color var(--dur-fast) var(--ease-fluid), color var(--dur-fast) var(--ease-fluid), border-color var(--dur-fast) var(--ease-fluid);
}
#place_order:hover, .checkout-button:hover { transform: translateY(-2px); }

/* Final "Place Order" on the checkout page — the actual purchase action, kept solid/prominent. */
#place_order, .place-order .button {
	background: var(--color-black); color: var(--color-inverse-text); border: 1px solid var(--color-black);
}
:root[data-theme="dark"] #place_order,
:root[data-theme="dark"] .place-order .button {
	background: var(--color-gold);
	color: var(--color-black);
	border-color: var(--color-gold);
}

/* "Proceed to Checkout" on the cart page — an intermediate step, so it's
   outlined rather than solid, leaving the final Place Order button as the
   only fully-filled button in the whole purchase flow. */
.checkout-button {
	background: transparent; color: var(--color-text); border: 1px solid var(--color-border-strong);
}
.checkout-button:hover { border-color: var(--color-gold); color: var(--color-gold); }

.woocommerce-coupon-form { display: flex; gap: 0.6em; margin-bottom: var(--space-md); }
.woocommerce-coupon-form .button { border-radius: var(--radius-pill); padding: 0.7em 1.4em; border: 1px solid var(--color-border-strong); background: transparent; cursor: pointer; }

/* ---------- Account ---------- */
.account-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-xl); }
@media (max-width: 900px) { .account-layout { grid-template-columns: 1fr; } }
.account-nav { display: flex; flex-direction: column; gap: 0.3em; }
.account-nav a { padding: 0.8em 1em; border-radius: var(--radius-md); }
.account-nav a.is-active, .account-nav .woocommerce-MyAccount-navigation-link--dashboard.is-active a { background: var(--color-gold-soft); color: var(--color-gold); }
.woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 0.3em; }
.woocommerce-MyAccount-navigation a { display: block; padding: 0.8em 1em; border-radius: var(--radius-md); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--color-gold-soft); color: var(--color-gold); }

/* ---------- WC notices / misc ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style: none;
	border: 1px solid var(--color-gold);
	background: var(--color-gold-soft);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
}
.star-rating { color: var(--color-gold); }
.woocommerce-Price-amount { font-family: var(--font-display); }
table.shop_table { width: 100%; border-collapse: collapse; }
table.shop_table th, table.shop_table td { padding: var(--space-sm); border-bottom: 1px solid var(--color-border); text-align: left; }

/*
 * WooCommerce Checkout block (Gutenberg) readability fixes only — layout is
 * left as WooCommerce's own default. Its inputs render on a fixed white
 * background regardless of site dark/light mode, so text colors here are
 * deliberately fixed (not theme-variable-driven) to stay readable in both.
 */
.wc-block-checkout__title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading {
	color: var(--color-text) !important;
}
.wc-block-components-checkout-step__description {
	color: var(--color-text-muted) !important;
}
.wc-block-components-text-input label,
.wc-block-components-text-input .wc-block-components-text-input__label,
.wc-block-checkout .wc-block-components-address-form__address_1 label {
	color: #4a4740 !important;
}
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"] {
	color: #131211 !important;
}
.wc-block-components-order-summary,
.wc-block-components-order-summary * ,
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--color-text) !important;
}
.wc-block-components-checkout-return-to-cart-button,
.wc-block-checkout__terms,
.wc-block-checkout__terms a {
	color: var(--color-text-muted) !important;
}
.wc-block-checkout__terms a,
.wc-block-components-checkout-step a {
	color: var(--color-gold) !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-radio-control-accordion-option {
	color: var(--color-text) !important;
}
.wc-block-checkout .components-checkbox-control__label {
	color: var(--color-text-muted) !important;
}