/**
 * Elush WC archive customizations (shop / product category / tag / search).
 * Scoped to `body.elush-archive` to avoid bleed into other pages.
 *
 * Sections:
 *   1. Tokens
 *   2. Header: breadcrumb + page title + description
 *   3. Results bar (count + sort)
 *   4. Left sidebar: category nav tree
 *   5. Product card
 *   6. Pagination
 *   7. Small screens
 */

/* 1. Tokens — colors mirrored from the design (slate/blue palette). */
body.elush-archive {
	--ea-text:       #0f172a;
	--ea-muted:      #6b7280;
	--ea-soft:       #9ca3af;
	--ea-line:       #e5e7eb;
	--ea-bg-soft:    #f3f4f6;
	--ea-accent:     #2563eb;
	--ea-accent-ink: #ffffff;
	--ea-danger:     #ef4444;
	--ea-warn:       #f59e0b;
	--ea-radius-card:16px;
	--ea-radius-pill:999px;
}

/* 2. Header (full-width, above sidebar/content row) -----------------------
   Force full width regardless of how the parent .ast-container lays out its
   children (floats / flex / grid) — Astra + Elementor can apply any of them
   on archive pages, and without this our header gets treated as a third
   column next to the sidebar and product grid. */
body.elush-archive .elush-archive-header,
body.elush-product .elush-archive-header {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	clear: both;
	float: none;
	flex: 1 0 100%;
	flex-basis: 100%;
	grid-column: 1 / -1;
	order: -1;
	margin: 0 0 28px;
	padding: 0;
}
/* If a parent has been set to display:flex (Elementor / Astra Pro do this on
   some archive layouts), we need it to wrap so our header sits on its own
   row above the sidebar + content row. No-op for non-flex parents. */
body.elush-archive .ast-container,
body.elush-archive .ast-container > .ast-row,
body.elush-archive #content > .ast-container,
body.elush-product .ast-container,
body.elush-product .ast-container > .ast-row,
body.elush-product #content > .ast-container {
	flex-wrap: wrap;
}

/* Hide duplicate breadcrumbs Astra/themes render inside the single-product
   summary — our breadcrumb above the row replaces them. */
body.elush-product .summary .woocommerce-breadcrumb,
body.elush-product #primary .woocommerce-breadcrumb,
body.elush-product .ast-woocommerce-container .woocommerce-breadcrumb,
body.elush-product .site-main > .woocommerce-breadcrumb {
	display: none !important;
}
.elush-archive-header .elush-breadcrumb,
.elush-archive-header .woocommerce-breadcrumb {
	font-size: 13px;
	color: var( --ea-muted );
	margin: 0 0 10px;
	letter-spacing: 0.01em;
}
.elush-archive-header .elush-breadcrumb a,
.elush-archive-header .woocommerce-breadcrumb a {
	color: var( --ea-muted );
	text-decoration: none;
}
.elush-archive-header .elush-breadcrumb a:hover,
.elush-archive-header .woocommerce-breadcrumb a:hover {
	color: var( --ea-text );
}
.elush-breadcrumb-sep {
	display: inline-block;
	margin: 0 2px;
	color: var( --ea-soft );
	font-size: 14px;
	line-height: 1;
	transform: translateY( -1px );
}
.elush-archive-title {
	font-size: 36px;
	font-weight: 800;
	color: var( --ea-text );
	margin: 0 0 8px;
	line-height: 1.15;
}
.elush-archive-desc {
	font-size: 15px;
	color: var( --ea-muted );
	max-width: 680px;
	margin: 0;
	line-height: 1.55;
}

/* Hide the duplicate breadcrumb / title / description that Astra+WC render
   inside the content column — we relocated them to the full-width header. */
body.elush-archive .site-main > .woocommerce-breadcrumb,
body.elush-archive .ast-woocommerce-container > .woocommerce-breadcrumb,
body.elush-archive #primary .woocommerce-breadcrumb,
body.elush-archive #primary .woocommerce-products-header,
body.elush-archive #primary .page-title:not(.elush-archive-title),
body.elush-archive #primary > header.woocommerce-products-header,
body.elush-archive #primary .term-description,
body.elush-archive #primary .taxonomy-description {
	display: none !important;
}

/* 3. Results bar ---------------------------------------------------------- */
body.elush-archive .woocommerce-result-count {
	color: var( --ea-muted );
	font-size: 14px;
	margin: 0 0 14px;
}
body.elush-archive .woocommerce-result-count::before {
	content: '';
}
body.elush-archive .woocommerce-ordering {
	margin: 0 0 14px;
}
body.elush-archive .woocommerce-ordering select {
	border: 1px solid var( --ea-line );
	border-radius: 8px;
	padding: 8px 30px 8px 12px;
	font-size: 14px;
	color: var( --ea-text );
	background: #fff;
	cursor: pointer;
}

/* 4. Left sidebar nav ----------------------------------------------------- */
.elush-cat-nav {
	margin: 0 0 28px;
	font-size: 14px;
	color: var( --ea-text, #0f172a );
}
.elush-cat-nav-head {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ea-soft, #9ca3af );
	margin: 0 0 12px;
}
.elush-cat-tree,
.elush-cat-children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.elush-cat-children {
	display: none;
	padding-left: 14px;
	border-left: 1px solid var( --ea-line, #e5e7eb );
	margin-left: 4px;
	margin-top: 4px;
}
.elush-cat-node.is-open > .elush-cat-children {
	display: block;
}
.elush-cat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 8px;
	margin-bottom: 2px;
}
.elush-cat-link {
	color: inherit;
	text-decoration: none;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.elush-cat-link:hover {
	color: var( --ea-accent, #2563eb );
}
.elush-cat-node.is-current > .elush-cat-row {
	background: #e0ecff;
	color: var( --ea-accent, #2563eb );
}
.elush-cat-node.is-current > .elush-cat-row .elush-cat-link {
	color: var( --ea-accent, #2563eb );
	font-weight: 600;
}
.elush-cat-toggle {
	border: 0;
	background: transparent;
	width: 18px;
	height: 18px;
	padding: 0;
	cursor: pointer;
	color: var( --ea-soft, #9ca3af );
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.elush-cat-toggle::before {
	content: '';
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( -45deg );
	transition: transform 0.15s ease;
}
.elush-cat-node.is-open > .elush-cat-row > .elush-cat-toggle::before {
	transform: rotate( 45deg );
}

/* 5. Product card --------------------------------------------------------- */
/* Unscoped so the cards render the same way on archives AND in the related-
   products / upsells / cross-sells lists on single-product pages. The grid
   layout still uses --ea-cols which is set per page (3 on archives, 3 in
   related-products by default). */
body.elush-archive ul.products,
body.elush-archive .products,
body.elush-product .related ul.products,
body.elush-product .related .products,
body.elush-product .upsells ul.products,
body.elush-product .upsells .products {
	--ea-text:       #0f172a;
	--ea-muted:      #6b7280;
	--ea-soft:       #9ca3af;
	--ea-line:       #e5e7eb;
	--ea-bg-soft:    #f3f4f6;
	--ea-accent:     #2563eb;
	--ea-accent-ink: #ffffff;
	--ea-danger:     #ef4444;
	--ea-warn:       #f59e0b;
	--ea-radius-card:16px;
	--ea-radius-pill:999px;
	display: grid;
	grid-template-columns: repeat( var( --ea-cols, 3 ), 1fr );
	gap: 22px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	clear: both;
}
body.elush-archive ul.products::before,
body.elush-archive ul.products::after,
body.elush-archive .products::before,
body.elush-archive .products::after,
body.elush-product .related ul.products::before,
body.elush-product .related ul.products::after,
body.elush-product .upsells ul.products::before,
body.elush-product .upsells ul.products::after {
	content: none;
}
li.product.elush-card,
body.elush-archive ul.products li.product,
body.elush-product .related ul.products li.product,
body.elush-product .upsells ul.products li.product {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
	background: #fff;
	border-radius: var( --ea-radius-card, 16px );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 );
}
.elush-card-thumb {
	position: relative;
	background: var( --ea-bg-soft );
	border-radius: var( --ea-radius-card ) var( --ea-radius-card ) 0 0;
	margin: 0;
	overflow: hidden;
}
.elush-card-thumb-link {
	display: block;
	aspect-ratio: 1 / 1;
}
.elush-card-thumb-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	mix-blend-mode: multiply;
}
.elush-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #fff;
	border-radius: var( --ea-radius-pill );
	z-index: 1;
}
.elush-card-badge.badge--sale { background: var( --ea-danger ); }
.elush-card-badge.badge--new  { background: var( --ea-warn ); }

.elush-card-body {
	padding: 16px 16px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.elush-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ea-muted );
	margin-bottom: 6px;
	min-height: 14px;
}
.elush-card-collection {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.elush-card-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var( --ea-text );
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	font-size: 12px;
}
.elush-card-rating-star {
	color: var( --ea-warn );
	font-size: 13px;
	line-height: 1;
}
.elush-card-title {
	font-size: 16px;
	font-weight: 700;
	color: var( --ea-text );
	margin: 0 0 6px;
	line-height: 1.3;
}
.elush-card-title a {
	color: inherit;
	text-decoration: none;
}
.elush-card-title a:hover { color: var( --ea-accent ); }
.elush-card-desc {
	font-size: 13px;
	color: var( --ea-muted );
	margin: 0 0 16px;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}
.elush-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}
.elush-card-price {
	font-size: 18px;
	font-weight: 800;
	color: var( --ea-text );
}
.elush-card-price ins {
	text-decoration: none;
	font-weight: 800;
	color: var( --ea-text );
}
.elush-card-price del {
	color: var( --ea-soft );
	font-weight: 500;
	font-size: 14px;
	margin-right: 6px;
}
.elush-card-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var( --ea-accent );
	color: var( --ea-accent-ink );
	flex: 0 0 auto;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}
.elush-card-cart:hover {
	background: #1d4ed8;
	color: #fff;
	transform: translateY( -1px );
}
/* WC default `.woocommerce-js ul.products li.product a img { width: 100% }`
   was stretching the 16x16 cart PNG to fill the 36x36 button. Override
   with matching specificity so it stays at its natural size and centers
   inside the blue square. Unscoped — applies on archives AND related
   products on the single product page. */
.elush-card-cart .elush-card-cart-icon,
.woocommerce-js ul.products li.product .elush-card-cart img.elush-card-cart-icon {
	width: auto;
	height: auto;
	max-width: 16px;
	max-height: 16px;
	margin: auto;
	display: block;
	object-fit: contain;
}

/* 6. Pagination ----------------------------------------------------------- */
body.elush-archive .woocommerce-pagination,
body.elush-archive nav.woocommerce-pagination {
	margin: 32px 0 8px;
	border: 0;
	text-align: center;
}
body.elush-archive .woocommerce-pagination ul.page-numbers,
body.elush-archive nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
}
body.elush-archive .woocommerce-pagination ul.page-numbers li,
body.elush-archive nav.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
	background: transparent;
}
body.elush-archive .woocommerce-pagination ul.page-numbers li .page-numbers,
body.elush-archive nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var( --ea-line );
	color: var( --ea-text );
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
}
body.elush-archive .woocommerce-pagination ul.page-numbers li .page-numbers.current,
body.elush-archive nav.woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background: var( --ea-accent );
	color: var( --ea-accent-ink );
	border-color: var( --ea-accent );
}
body.elush-archive .woocommerce-pagination ul.page-numbers li .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var( --ea-soft );
}
body.elush-archive .woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
	background: var( --ea-bg-soft );
}

/* 7. My Account navigation ----------------------------------------------- */
body.elush-account .woocommerce-MyAccount-navigation {
	width: 240px;
	float: left;
	margin-right: 32px;
}
body.elush-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
body.elush-account .woocommerce-MyAccount-navigation ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #f1f5f9;
}
body.elush-account .woocommerce-MyAccount-navigation ul li:first-child {
	border-top: 0;
}
body.elush-account .woocommerce-MyAccount-navigation ul li::before,
body.elush-account .woocommerce-MyAccount-navigation ul li::marker {
	content: none;
	display: none;
}
body.elush-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 14px 18px;
	color: #0f172a;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease;
}
body.elush-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: #f3f4f6;
	color: #2563eb;
}
body.elush-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.elush-account .woocommerce-MyAccount-navigation ul li.is-active a:hover {
	background: #e0ecff;
	color: #2563eb;
	font-weight: 700;
}
body.elush-account .woocommerce-MyAccount-content {
	overflow: hidden;
	padding: 0;
}
body.elush-account .woocommerce-MyAccount-content p {
	margin: 0 0 14px;
	color: #475569;
	line-height: 1.6;
}
body.elush-account .woocommerce-MyAccount-content a {
	color: #2563eb;
}
body.elush-account .woocommerce-MyAccount-content a:hover {
	color: #1d4ed8;
}
@media ( max-width: 720px ) {
	body.elush-account .woocommerce-MyAccount-navigation {
		float: none;
		width: 100%;
		margin: 0 0 24px;
	}
}

/* Login + Register card panels (shown when logged out). */
body.elush-account #customer_login {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
}
body.elush-account #customer_login::before,
body.elush-account #customer_login::after {
	content: none;
	display: none;
}
body.elush-account #customer_login > .u-column1,
body.elush-account #customer_login > .u-column2,
body.elush-account #customer_login > .col-1,
body.elush-account #customer_login > .col-2 {
	flex: 1 1 320px;
	width: auto;
	max-width: none;
	background: #fff;
	border-radius: 20px;
	border: 1px solid #e5e7eb;
	padding: 28px 32px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 );
	box-sizing: border-box;
}
body.elush-account #customer_login h2 {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 16px;
}
body.elush-account #customer_login form.woocommerce-form {
	margin: 0;
	border: 0;
	padding: 0;
}
body.elush-account #customer_login .woocommerce-form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	margin: 0 0 6px;
}
body.elush-account #customer_login .woocommerce-form-row input.input-text,
body.elush-account #customer_login input[type="text"],
body.elush-account #customer_login input[type="email"],
body.elush-account #customer_login input[type="password"] {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	background: #fff;
	color: #0f172a;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}
body.elush-account #customer_login input.input-text:focus,
body.elush-account #customer_login input[type="text"]:focus,
body.elush-account #customer_login input[type="email"]:focus,
body.elush-account #customer_login input[type="password"]:focus {
	outline: 0;
	border-color: #2563eb;
}
body.elush-account #customer_login .woocommerce-form-row {
	margin-bottom: 14px;
}
body.elush-account #customer_login button.woocommerce-button,
body.elush-account #customer_login button[type="submit"] {
	background: #2563eb;
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px 22px;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
body.elush-account #customer_login button.woocommerce-button:hover,
body.elush-account #customer_login button[type="submit"]:hover {
	background: #1d4ed8;
}
body.elush-account #customer_login .woocommerce-LostPassword {
	margin-top: 12px;
}
body.elush-account #customer_login .woocommerce-LostPassword a {
	color: #2563eb;
	text-decoration: none;
	font-size: 13px;
}
body.elush-account #customer_login .woocommerce-LostPassword a:hover {
	text-decoration: underline;
}
body.elush-account #customer_login .woocommerce-privacy-policy-text p {
	font-size: 12px;
	color: #64748b;
	margin: 12px 0 0;
}
body.elush-account #customer_login label.woocommerce-form__label-for-checkbox {
	font-size: 13px;
	color: #475569;
	font-weight: 500;
}

/* Lost-password form — same white panel as login + register. */
body.elush-account form.woocommerce-ResetPassword,
body.elush-account form.lost_reset_password {
	max-width: 480px;
	margin: 0;
	background: #fff;
	border-radius: 20px;
	border: 1px solid #e5e7eb;
	padding: 28px 32px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 );
	box-sizing: border-box;
}
body.elush-account form.woocommerce-ResetPassword > p,
body.elush-account form.lost_reset_password > p {
	margin: 0 0 14px;
}
body.elush-account form.woocommerce-ResetPassword > p:last-child,
body.elush-account form.lost_reset_password > p:last-child {
	margin: 10px 0 0;
}
body.elush-account form.woocommerce-ResetPassword label,
body.elush-account form.lost_reset_password label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	margin: 0 0 6px;
}
body.elush-account form.woocommerce-ResetPassword input.input-text,
body.elush-account form.lost_reset_password input.input-text,
body.elush-account form.woocommerce-ResetPassword input[type="text"],
body.elush-account form.woocommerce-ResetPassword input[type="email"],
body.elush-account form.woocommerce-ResetPassword input[type="password"],
body.elush-account form.lost_reset_password input[type="text"],
body.elush-account form.lost_reset_password input[type="email"],
body.elush-account form.lost_reset_password input[type="password"] {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	background: #fff;
	color: #0f172a;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}
body.elush-account form.woocommerce-ResetPassword input:focus,
body.elush-account form.lost_reset_password input:focus {
	outline: 0;
	border-color: #2563eb;
}
body.elush-account form.woocommerce-ResetPassword button.woocommerce-Button,
body.elush-account form.lost_reset_password button.woocommerce-Button,
body.elush-account form.woocommerce-ResetPassword button[type="submit"],
body.elush-account form.lost_reset_password button[type="submit"] {
	background: #2563eb;
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px 22px;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
body.elush-account form.woocommerce-ResetPassword button.woocommerce-Button:hover,
body.elush-account form.lost_reset_password button.woocommerce-Button:hover,
body.elush-account form.woocommerce-ResetPassword button[type="submit"]:hover,
body.elush-account form.lost_reset_password button[type="submit"]:hover {
	background: #1d4ed8;
}

/* 8. Single product page ------------------------------------------------- */
body.elush-product {
	--ea-text:        #0f172a;
	--ea-muted:       #64748b;
	--ea-line:        #e2e8f0;
	--ea-line-active: #2b6cee;
	--ea-accent:      #2563eb;
	--ea-danger:      #ef4444;
	--ea-radius-img:  12px;
}

/* Two-column layout: gallery (left) + summary (right), top-aligned. */
body.elush-product div.product,
body.elush-product .type-product {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
}

/* Big product image */
body.elush-product .woocommerce-product-gallery {
	float: none;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	margin: 0;
}
body.elush-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
body.elush-product .woocommerce-product-gallery .flex-viewport,
body.elush-product .woocommerce-product-gallery__wrapper {
	border-radius: var( --ea-radius-img );
	border: 1px solid var( --ea-line );
	overflow: hidden;
	background: #fff;
}
body.elush-product .woocommerce-product-gallery .woocommerce-product-gallery__image > a,
body.elush-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	border-radius: var( --ea-radius-img );
	display: block;
}

/* Gallery thumbnails — flex row with wrap; tight gap so 4 fit per row. */
body.elush-product .flex-control-thumbs,
body.elush-product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
body.elush-product .flex-control-thumbs li {
	width: 80px;
	margin: 0;
	list-style: none;
}
/* Override WC's default thumb gutter (was ~3% margin-right at this
   specificity); 6px lines up with the design's tighter row. */
body.elush-product.woocommerce-js div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
	margin-right: 6px;
}
body.elush-product .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --ea-radius-img );
	border: 1px solid var( --ea-line );
	cursor: pointer;
	opacity: 1;
	transition: border-color 0.15s ease;
	box-sizing: border-box;
}
body.elush-product .flex-control-thumbs li img:hover {
	border-color: #cbd5e1;
}
body.elush-product .flex-control-thumbs li img.flex-active {
	border-color: var( --ea-line-active );
	opacity: 1;
}

/* Right column: title, rating, price, add to cart */
body.elush-product .summary.entry-summary {
	float: none;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	margin: 0;
}
body.elush-product .summary .product_title,
body.elush-product .product_title.entry-title {
	font-size: 32px;
	font-weight: 800;
	color: var( --ea-text );
	line-height: 1.2;
	margin: 0 0 12px;
}
body.elush-product .summary .price,
body.elush-product p.price,
body.elush-product span.price {
	font-size: 30px;
	font-weight: 800;
	color: var( --ea-text );
	margin: 8px 0 18px;
	line-height: 1.1;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
body.elush-product .summary .price ins,
body.elush-product p.price ins,
body.elush-product span.price ins {
	text-decoration: none;
	font-weight: 800;
	color: var( --ea-danger );
}
body.elush-product .summary .price del,
body.elush-product p.price del,
body.elush-product span.price del {
	color: #94a3b8;
	font-size: 18px;
	font-weight: 500;
	order: -1;
}
body.elush-product .summary .price del .amount {
	color: inherit;
}
body.elush-product .woocommerce-product-rating {
	margin: 4px 0 8px;
}

/* Stack the cart form: quantity on its own row, Add to Cart full-width
   on the row below. */
body.elush-product .summary form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin: 16px 0 0;
}
body.elush-product .summary form.cart .quantity {
	flex: 0 0 auto;
}

/* Big Add to Cart button — hide Buy Now / WooCommerce Direct Checkout.
   Matches WC's own `.woocommerce-js div.product form.cart .button.single_add_to_cart_button`
   selector specificity with `body.elush-product` prefix so the padding/colour
   overrides win. */
body.elush-product.woocommerce-js div.product form.cart .button.single_add_to_cart_button,
body.elush-product .summary .single_add_to_cart_button,
body.elush-product form.cart .single_add_to_cart_button {
	background: var( --ea-accent );
	color: #fff;
	border-radius: 10px;
	padding: 20px 20px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	width: 100%;
	max-width: none;
	transition: background 0.15s ease;
}
body.elush-product .summary .single_add_to_cart_button:hover,
body.elush-product form.cart .single_add_to_cart_button:hover {
	background: #1d4ed8;
}
body.elush-product .buy-now-button,
body.elush-product .wcdc-direct-checkout-button,
body.elush-product a.button.buy_now_button,
body.elush-product .wc-direct-checkout-button,
body.elush-product .single_buy_now_button {
	display: none !important;
}

/* Promo strip: countdown + sold + " / " + left on one row, progress bar
   on the next, just below the title. Rendered by the campaigns plugin's
   Counters::auto_inject() at priority 6 with .elush-product-promo
   .elush-campaign-counters wrapper.
   `align-items: stretch` is explicit because the campaigns plugin's
   native `.elush-product-promo` rule sets it to `center`, which would
   otherwise center-align our two stacked rows in the column. */
body.elush-product .elush-product-promo.elush-campaign-counters {
	margin: 16px 0 14px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}
body.elush-product .elush-campaign-counters .elush-promo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	font-size: 14px;
	color: #b26a00;
}
body.elush-product .elush-campaign-counters .elush-promo-row .elush-counter {
	color: inherit;
	font-weight: 600;
}
body.elush-product .elush-campaign-counters .elush-promo-row .elush-countdown {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
body.elush-product .elush-campaign-counters .elush-promo-sep {
	color: #d1d5db;
	font-weight: 400;
}
body.elush-product .elush-campaign-counters .elush-promo-bar {
	width: 100%;
}
/* Progress: track fills the row on the left, text label sits at the
   end (right). Markup is already track-then-text, so default row order. */
body.elush-product .elush-campaign-counters .elush-promo-bar .elush-counter-progress {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 100%;
}
body.elush-product .elush-campaign-counters .elush-promo-bar .elush-progress-text {
	flex: 0 0 auto;
	display: block;
	font-size: 12px;
	color: #6b7280;
	white-space: nowrap;
	margin: 0;
}
body.elush-product .elush-campaign-counters .elush-promo-bar .elush-progress-track {
	flex: 1 1 auto;
	display: block;
	width: auto;
	height: 8px;
	background: #e5e7eb;
	border-radius: 999px;
	overflow: hidden;
}
body.elush-product .elush-campaign-counters .elush-promo-bar .elush-progress-fill {
	display: block;
	height: 100%;
	background: linear-gradient( 90deg, #f59e0b, #ef4444 );
	border-radius: 999px;
}

/* Description tabs: trim the trailing space so Related products sits
   directly underneath without the large WC default gap. */
body.elush-product .woocommerce-tabs,
body.elush-product div.product .woocommerce-tabs {
	margin: 16px 0 16px;
	padding: 0;
}

/* Related products: 4-column grid, heading matches the "Frequently Bought
   Together" heading; no top margin, 50px bottom. */
body.elush-product .related.products,
body.elush-product section.related {
	flex: 1 1 100%;
	width: 100%;
	margin: 0 0 50px;
	padding: 0;
}
/* Tighten the gap above the category label only inside the related-products
   cards on the single product page — keeps archives / search / popular
   products unaffected. */
body.elush-product .related ul.products li.product .elush-card-body,
body.elush-product section.related ul.products li.product .elush-card-body {
	padding-top: 6px;
	margin-top: -20px;
}
body.elush-product .related.products > h2,
body.elush-product section.related > h2 {
	font-size: 20px;
	font-weight: 800;
	color: var( --ea-text, #0f172a );
	margin: 0 0 14px;
	line-height: 1.2;
}
body.elush-product .related.products ul.products,
body.elush-product section.related ul.products {
	--ea-cols: 4;
}

/* Bundles section above description tabs.
   Sits inside `.product` (a flex container), so we claim the full row
   below the gallery + summary instead of squeezing in as a third column.
   No `order` override — source order (hook priority 5 vs tabs at 10)
   already puts us in the right spot.
   Inside this section the bundle plugin's own CSS (elush-bundles/assets/
   css/frontend.css) renders each .elush-box correctly: product cards
   stack vertically (image top, name middle, price bottom) inside an
   .elush-box, summary with price+CTA on the right. We don't override
   those — only the wrapper. */
body.elush-product .elush-product-bundles {
	flex: 1 1 100%;
	width: 100%;
	/* Negative margins reach into the summary's bottom padding above and
	   the description tabs' top margin below — pulls everything tighter. */
	margin: -12px 0 -2px;
}
.elush-product-bundles-heading {
	font-size: 20px;
	font-weight: 800;
	color: var( --ea-text, #0f172a );
	margin: 0 0 10px;
}
/* The bundle plugin's own .elush-boxes wrapper adds 20px vertical margin
   and each .elush-box has 16px trailing margin — collapse both inside our
   section so the "Frequently Bought Together" block doesn't have huge
   gaps above and below. */
.elush-product-bundles .elush-boxes {
	margin: 0;
}
.elush-product-bundles .elush-box {
	margin-bottom: 10px;
}
.elush-product-bundles .elush-box:last-child {
	margin-bottom: 0;
}
/* Hide the bundle that the bundle plugin auto-injects inside the summary
   (via woocommerce_after_add_to_cart_button). All bundles should appear
   in the "Frequently Bought Together" section only. */
body.elush-product .summary .elush-box,
body.elush-product .summary .elush-boxes,
body.elush-product form.cart + .elush-box,
body.elush-product form.cart + .elush-boxes,
body.elush-product form.cart ~ .elush-box,
body.elush-product form.cart ~ .elush-boxes {
	display: none !important;
}
/* Bundle product image + name are now anchor tags — keep them looking
   like the original (no underline, inherit color). */
.elush-product-bundles a.elush-box-thumb {
	display: block;
	text-decoration: none;
	color: inherit;
}
.elush-product-bundles .elush-box-name a {
	color: inherit;
	text-decoration: none;
}
.elush-product-bundles .elush-box-name a:hover {
	color: var( --ea-accent, #2563eb );
}

/* 9. Small screens -------------------------------------------------------- */
@media ( max-width: 920px ) {
	body.elush-archive ul.products,
	body.elush-archive .products {
		grid-template-columns: repeat( 2, 1fr );
		gap: 14px;
	}
	body.elush-archive .woocommerce-products-header__title,
	body.elush-archive .page-title {
		font-size: 28px;
	}
	body.elush-product div.product,
	body.elush-product .type-product {
		gap: 20px;
	}
	body.elush-product .woocommerce-product-gallery,
	body.elush-product .summary.entry-summary {
		float: none;
		flex: 1 1 100%;
		width: 100%;
		margin: 0;
	}
}
@media ( max-width: 520px ) {
	body.elush-archive ul.products,
	body.elush-archive .products,
	body.elush-product .related ul.products,
	body.elush-product .upsells ul.products {
		grid-template-columns: 1fr;
	}
}