/**
 * Category Page Styles — e-Potion
 *
 * Loaded only on product_cat taxonomy pages (is_tax('product_cat')).
 * Enqueued by epotion_category_page_assets() in inc/category-customizations.php
 * with ep-legacy-styles as a dependency, so it loads AFTER legacy.css and wins
 * all same-specificity battles without needing !important hacks.
 *
 * Architecture:
 *   - All values reference --ep-* tokens from design-tokens.css
 *   - BEM prefix: ep-cat-* for new elements; overrides use existing selectors
 *   - This file supersedes the category rules in legacy.css (sections 5–6).
 *     Those rules remain as a fallback; remove them in the next legacy.css audit.
 *
 * Sections covered (in DOM order):
 *   1. .cat-section — shared rhythm
 *   2. #productCatinfo — editorial info block
 *   3. #productBestsellers — featured product card
 *   4. #catReview — Google reviews wrapper
 *   5. #questionnairet — quiz / questionnaire
 *   6. #productCatFaq — FAQ accordion
 *   7. #tipsSection — tips box
 *   8. #buyerSection — buyer persona box
 *   9. #relatedCategories — internal linking grid (override for token compliance)
 *  10. #catBlogpost — blog post row
 *  11. Shared typography helpers
 *
 * @package Shoptimizer_Child
 * @version 1.0.0
 * Override of legacy.css sections 5–6 — reviewed 2026-05-17
 */

/* ============================================================
 * 1. .cat-section — shared vertical rhythm
 * ============================================================ */

.cat-section {
	margin: var(--ep-space-10) 0;
}

/* Remove Shoptimizer's generic h2 treatment inside our sections */
body.archive.tax-product_cat .cat-section h2 {
	margin: 0 0 var(--ep-space-6);
	line-height: var(--ep-leading-snug);
}

/* Shared decorative heading underline used in info / FAQ / tips / buyer */
.ep-cat-heading {
	position: relative;
	font-size: var(--ep-font-2xl);
	font-weight: var(--ep-weight-bold);
	color: var(--ep-text-primary);
	margin: 0 0 var(--ep-space-6);
	padding-bottom: var(--ep-space-4);
	line-height: var(--ep-leading-snug);
}

.ep-cat-heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--ep-accent);
	border-radius: 2px;
}

/* ============================================================
 * 2. #productCatinfo — editorial info block
 * ============================================================ */

#productCatinfo {
	background: var(--ep-bg-muted);
	border-radius: var(--ep-radius-lg);
	border: 1px solid var(--ep-border-subtle);
	box-shadow: none;
	overflow: hidden;
	padding: var(--ep-space-8) var(--ep-space-8) var(--ep-space-10);
}

#productCatinfo h2 {
	font-size: var(--ep-font-2xl);
	font-weight: var(--ep-weight-bold);
	color: var(--ep-text-primary);
	margin: 0 0 var(--ep-space-5);
	line-height: var(--ep-leading-snug);
	position: relative;
	padding-bottom: var(--ep-space-4);
}

#productCatinfo h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--ep-accent);
	border-radius: 2px;
}

#productCatinfo .below-woocommerce-category {
	margin: var(--ep-space-6) 0 0;
	padding: var(--ep-space-6) 0 0;
	border-top: 1px solid var(--ep-border-default);
	color: var(--ep-text-secondary);
	font-size: var(--ep-font-base);
	line-height: var(--ep-leading-relaxed);
}

/* ============================================================
 * 3. #productBestsellers — premium featured product card
 *
 * Old layout: basic flex with width percentages and zero elevation.
 * New layout: CSS grid card with shadow, image zoom on hover,
 * and a button that matches the site's primary CTA style.
 * ============================================================ */

#productBestsellers {
	margin: var(--ep-space-10) 0;
}

.best-sellers-title {
	font-size: var(--ep-font-lg);
	font-weight: var(--ep-weight-semibold);
	color: var(--ep-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin: 0 0 var(--ep-space-6);
	display: flex;
	align-items: center;
	gap: var(--ep-space-3);
	font-size: var(--ep-font-sm);
}

/* Accent pip before the title */
.best-sellers-title::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 18px;
	background: var(--ep-accent);
	border-radius: 2px;
	flex-shrink: 0;
}

/* Reset list defaults */
#productBestsellers ul.best-seller-products {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The card */
#productBestsellers li.best-seller-item {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 0;
	align-items: stretch;
	background: var(--ep-bg-page);
	border-radius: var(--ep-radius-lg);
	overflow: hidden;
	box-shadow: var(--ep-shadow-md);
	border: 1px solid var(--ep-border-subtle);
	flex-wrap: unset; /* override legacy.css flex-wrap */
}

/* Image panel */
#productBestsellers .product_image {
	width: auto; /* override legacy.css 42% */
	position: relative;
	overflow: hidden;
	background: var(--ep-bg-surface);
	aspect-ratio: 1 / 1;
}

#productBestsellers .product_image a {
	display: block;
	height: 100%;
}

#productBestsellers .product_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ep-transition-slow);
	display: block;
}

#productBestsellers li.best-seller-item:hover .product_image img {
	transform: scale(1.04);
}

/* Info panel */
#productBestsellers .product_info {
	width: auto; /* override legacy.css 50% */
	padding: var(--ep-space-10);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--ep-space-5);
}

/* Product title */
#productBestsellers h3.product-title {
	font-size: var(--ep-font-xl);
	font-weight: var(--ep-weight-bold);
	margin: 0;
	line-height: var(--ep-leading-snug);
}

#productBestsellers h3.product-title a {
	color: var(--ep-text-primary);
	text-decoration: none;
	transition: color var(--ep-transition-fast);
}

#productBestsellers h3.product-title a:hover {
	color: var(--ep-accent-dark);
}

/* Price */
#productBestsellers .product-price {
	margin: 0;
	font-size: var(--ep-font-xl);
	font-weight: var(--ep-weight-bold);
	color: var(--ep-text-primary);
}

#productBestsellers .product-price bdi {
	font-weight: var(--ep-weight-bold);
}

/* Add to cart button — matches site primary CTA */
#productBestsellers .add-to-cart .button,
#productBestsellers .add-to-cart a.button {
	display: inline-flex;
	align-items: center;
	gap: var(--ep-space-2);
	padding: 14px 28px;
	background: var(--ep-text-primary);
	color: #ffffff;
	font-size: var(--ep-font-base);
	font-weight: var(--ep-weight-semibold);
	border-radius: var(--ep-radius-md);
	border: 2px solid var(--ep-text-primary);
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--ep-transition-fast),
		color var(--ep-transition-fast),
		transform var(--ep-transition-fast);
	white-space: nowrap;
}

#productBestsellers .add-to-cart .button:hover,
#productBestsellers .add-to-cart a.button:hover {
	background: transparent;
	color: var(--ep-text-primary);
	transform: translateY(-1px);
}

/* "View cart" link that appears after add-to-cart */
#productBestsellers .add-to-cart .added_to_cart.wc-forward {
	display: inline-block;
	margin-top: var(--ep-space-3);
	color: var(--ep-text-secondary);
	font-size: var(--ep-font-sm);
	text-decoration: underline;
}

/* Remove unneeded .col-full padding override from legacy.css */
#productBestsellers .col-full {
	padding: 0;
}

/* Mobile: stack image above info */
@media (max-width: 767px) {
	#productBestsellers li.best-seller-item {
		grid-template-columns: 1fr;
	}

	#productBestsellers .product_image {
		aspect-ratio: 16 / 9;
	}

	#productBestsellers .product_info {
		padding: var(--ep-space-6);
		gap: var(--ep-space-4);
	}

	#productBestsellers h3.product-title {
		font-size: var(--ep-font-lg);
	}
}

/* ============================================================
 * 4. #catReview — Google reviews wrapper
 * ============================================================ */

.catReview-section h2 {
	font-size: var(--ep-font-2xl);
	font-weight: var(--ep-weight-bold);
	color: var(--ep-text-primary);
	border-bottom: 1px solid var(--ep-border-default);
	padding: 0 0 var(--ep-space-4);
	margin: 0 0 var(--ep-space-8);
	line-height: var(--ep-leading-snug);
}

/* Remove old .col-full padding reset for reviews */
#catReview .col-full {
	padding: 0;
}

/* ============================================================
 * 5. #questionnairet — quiz / questionnaire
 * ============================================================ */

.questionnairet-section {
	margin: var(--ep-space-10) auto;
	max-width: 860px;
	text-align: center;
	background: var(--ep-bg-muted);
	border-radius: var(--ep-radius-lg);
	padding: var(--ep-space-10);
	border: 1px solid var(--ep-border-subtle);
}

.questionnairet-title {
	font-size: var(--ep-font-2xl);
	font-weight: var(--ep-weight-bold);
	color: var(--ep-text-primary);
	margin: 0 0 var(--ep-space-6);
	line-height: var(--ep-leading-snug);
}

.questionnairet-content {
	color: var(--ep-text-secondary);
	line-height: var(--ep-leading-relaxed);
	font-size: var(--ep-font-base);
}

/* Keep existing quiz-section margin from legacy.css */
.questionnairet-section .quiz-section {
	max-width: unset;
	margin: var(--ep-space-4) 0 var(--ep-space-10);
}

/* ============================================================
 * 6. #productCatFaq — FAQ accordion
 *
 * The key fix: active state uses --ep-text-primary (dark) instead of
 * the hardcoded #1e68c4 blue that lived in legacy.css — which clashed
 * with the site's design language.
 * ============================================================ */

#productCatFaq .col-full {
	background: var(--ep-bg-muted);
	padding: var(--ep-space-12) var(--ep-space-10);
	border-radius: var(--ep-radius-lg);
	margin: 0 auto var(--ep-space-10);
	border: 1px solid var(--ep-border-default);
	box-shadow: var(--ep-shadow-md);
	max-width: 1080px;
}

.cat_faq-title {
	font-size: var(--ep-font-2xl);
	font-weight: var(--ep-weight-bold);
	color: var(--ep-text-primary);
	margin: 0 0 var(--ep-space-8);
	position: relative;
	padding-bottom: var(--ep-space-4);
	line-height: var(--ep-leading-snug);
}

.cat_faq-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--ep-accent);
	border-radius: 2px;
}

/* FAQ list item */
#productCatFaq li.cat-faq-list {
	border: 1px solid var(--ep-border-default);
	border-radius: var(--ep-radius-md);
	background: var(--ep-bg-page);
	padding: 0;
	overflow: hidden;
	margin-bottom: var(--ep-space-3);
}

/* FAQ item heading */
#productCatFaq .cat-faq-list h3 {
	font-size: var(--ep-font-base);
	padding: var(--ep-space-4) var(--ep-space-10) var(--ep-space-4) var(--ep-space-5);
	cursor: pointer;
	margin: 0;
	color: var(--ep-text-primary);
	transition: background var(--ep-transition-fast), color var(--ep-transition-fast);
	position: relative;
}

/* Chevron via CSS — overrides the legacy +/- approach */
#productCatFaq .cat-faq-list h3::after {
	content: '';
	position: absolute;
	right: var(--ep-space-5);
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--ep-text-muted);
	border-bottom: 2px solid var(--ep-text-muted);
	transition: transform var(--ep-transition-normal), border-color var(--ep-transition-fast);
	font-size: unset;
	line-height: unset;
	font-weight: unset;
}

/* Active state — use brand tokens, NOT hardcoded blue */
#productCatFaq li.cat-faq-list.active h3 {
	background: var(--ep-text-primary);
	color: #ffffff;
}

#productCatFaq li.cat-faq-list h3:hover {
	background: var(--ep-bg-muted);
	color: var(--ep-text-primary);
}

#productCatFaq li.cat-faq-list.active h3::after {
	border-right-color: #ffffff;
	border-bottom-color: #ffffff;
	transform: translateY(-50%) rotate(-135deg);
	top: 52%;
}

/* FAQ answer body */
#productCatFaq .faq_content {
	padding: var(--ep-space-5) var(--ep-space-5) var(--ep-space-5);
	margin: 0;
	color: var(--ep-text-secondary);
	font-size: var(--ep-font-base);
	line-height: var(--ep-leading-relaxed);
	border-top: 1px solid var(--ep-border-subtle);
}

#productCatFaq .faq_content p {
	margin: 0 0 var(--ep-space-3);
}

#productCatFaq .faq_content p:last-child {
	margin-bottom: 0;
}

/* ============================================================
 * 7. #tipsSection — tips box
 *
 * Accent-soft background with left orange border strip.
 * List bullets use --ep-accent-dark (token, not hardcoded).
 * ============================================================ */

#tipsSection .col-full {
	background: var(--ep-accent-soft);
	border: 1px solid #fddbb4; /* slightly warmer than border-default */
	border-left: 4px solid var(--ep-accent);
	padding: var(--ep-space-10);
	border-radius: var(--ep-radius-lg);
	margin: 0 auto var(--ep-space-10);
	box-shadow: var(--ep-shadow-sm);
	max-width: 1080px;
}

.cat_tips-title {
	font-size: var(--ep-font-2xl);
	font-weight: var(--ep-weight-bold);
	color: var(--ep-text-primary);
	margin: 0 0 var(--ep-space-6);
	line-height: var(--ep-leading-snug);
	position: relative;
	padding-bottom: var(--ep-space-4);
}

.cat_tips-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--ep-accent);
	border-radius: 2px;
}

.cat_tips {
	color: var(--ep-text-secondary);
	font-size: var(--ep-font-base);
	line-height: var(--ep-leading-relaxed);
}

.cat_tips ul.cat-tipslists,
#tipsSection .cat-tipslists {
	margin: 0;
}

.cat-tipslists li {
	list-style: none;
	position: relative;
	padding-left: var(--ep-space-6);
	margin: 0 0 var(--ep-space-3);
}

.cat-tipslists li:before {
	content: '';
	position: absolute;
	left: var(--ep-space-2);
	top: 7px;
	width: 8px;
	height: 8px;
	background: var(--ep-accent-dark); /* token, was hardcoded */
	border-radius: var(--ep-radius-full);
}

.cat-tipslists h3 {
	line-height: var(--ep-leading-snug);
	margin: 0 0 var(--ep-space-1);
	font-size: var(--ep-font-lg);
	color: var(--ep-text-primary);
}

/* ============================================================
 * 8. #buyerSection — buyer persona box
 *
 * Previously used hardcoded #edf3fb / #d1e1f5 blues.
 * Now uses design-system surface tokens.
 * ============================================================ */

#buyerSection .col-full {
	background: var(--ep-bg-surface);
	border: 1px solid var(--ep-border-default);
	padding: var(--ep-space-10);
	border-radius: var(--ep-radius-lg);
	margin: 0 auto var(--ep-space-10);
	box-shadow: var(--ep-shadow-sm);
	max-width: 1080px;
}

/* .cat_tips-title is reused for buyer heading — already styled above */

.cat_buyer {
	color: var(--ep-text-secondary);
	font-size: var(--ep-font-base);
	line-height: var(--ep-leading-relaxed);
}

.cat-buyerlists {
	margin: 0;
	padding: 0;
}

.cat-buyerlists li {
	list-style: none;
	position: relative;
	padding-left: var(--ep-space-6);
	margin: 0 0 var(--ep-space-3);
}

/* Buyer persona uses info-blue bullet color via token */
.cat-section .cat-buyerlists li:before,
#buyerSection .cat-buyerlists li:before {
	content: '';
	position: absolute;
	left: var(--ep-space-2);
	top: 7px;
	width: 8px;
	height: 8px;
	background: var(--ep-info);
	border-radius: var(--ep-radius-full);
}

.cat-buyer-list h3 {
	line-height: var(--ep-leading-snug);
	margin: 0 0 var(--ep-space-1);
	font-size: var(--ep-font-lg);
	color: var(--ep-text-primary);
}

/* ============================================================
 * 9. #relatedCategories — internal linking grid
 *
 * The gold accent (#d4af37) logic from legacy.css is intentional
 * and uses the --ep-gold token. These rules add token compliance
 * for the border/bg values that were still hardcoded.
 * ============================================================ */

#relatedCategories {
	margin: var(--ep-space-12) 0 var(--ep-space-8);
}

#relatedCategories .col-full {
	max-width: 1240px;
	margin: 0 auto var(--ep-space-4);
	padding: 0 var(--ep-space-6);
}

#relatedCategories .related-category-group {
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-default);
	border-radius: var(--ep-radius-lg);
	padding: var(--ep-space-8) var(--ep-space-6);
	box-shadow: var(--ep-shadow-md);
	max-height: 460px;
	overflow-y: auto;
}

/* Group heading with gold accent (ep-gold token) */
#relatedCategories .related-category-group h2,
#relatedCategories .related-category-group h3 {
	position: relative;
	font-size: var(--ep-font-xl);
	font-weight: var(--ep-weight-bold);
	margin: 0 0 var(--ep-space-5);
	padding: 0 0 var(--ep-space-4);
	line-height: var(--ep-leading-snug);
	color: var(--ep-text-primary);
	border-bottom: 1px solid var(--ep-border-default);
}

#relatedCategories .related-category-group h2::after,
#relatedCategories .related-category-group h3::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 52px;
	height: 3px;
	background: var(--ep-gold); /* token reference */
}

#relatedCategories ul.related-category-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

#relatedCategories ul.related-category-list li {
	width: auto;
	margin: 0;
	padding: 0;
}

#relatedCategories ul.related-category-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-space-3);
	background: var(--ep-bg-page);
	border: 1px solid var(--ep-border-default);
	border-radius: var(--ep-radius-md);
	padding: 13px 16px;
	color: var(--ep-text-primary);
	text-decoration: none;
	font-size: var(--ep-font-sm);
	font-weight: var(--ep-weight-medium);
	line-height: var(--ep-leading-snug);
	min-height: 56px;
	box-shadow: var(--ep-shadow-sm);
	transition:
		background var(--ep-transition-fast),
		border-color var(--ep-transition-fast),
		color var(--ep-transition-fast),
		box-shadow var(--ep-transition-fast);
}

/* Gold hover — intentional brand touch for internal linking */
#relatedCategories ul.related-category-list a:hover {
	background: var(--ep-gold-soft);
	border-color: var(--ep-gold);
	color: #6b5200;
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.22);
}

/* Chevron pip */
#relatedCategories ul.related-category-list a::after {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--ep-gold);
	border-right: 2px solid var(--ep-gold);
	transform: rotate(45deg);
	transition: border-color var(--ep-transition-fast);
}

#relatedCategories ul.related-category-list a:hover::after {
	border-top-color: #6b5200;
	border-right-color: #6b5200;
}

/* Active (current page) item */
#relatedCategories ul.related-category-list li.active a {
	background: var(--ep-gold);
	border-color: var(--ep-gold);
	color: var(--ep-bg-dark);
	font-weight: var(--ep-weight-semibold);
	box-shadow: 0 2px 10px rgba(212, 175, 55, 0.35);
}

#relatedCategories ul.related-category-list li.active a::after {
	border-top-color: var(--ep-bg-dark);
	border-right-color: var(--ep-bg-dark);
}

/* Scrollbar — token-aligned */
#relatedCategories .related-category-group::-webkit-scrollbar {
	width: 6px;
}
#relatedCategories .related-category-group::-webkit-scrollbar-track {
	background: var(--ep-bg-surface);
}
#relatedCategories .related-category-group::-webkit-scrollbar-thumb {
	background: var(--ep-border-default);
	border-radius: var(--ep-radius-full);
}
#relatedCategories .related-category-group::-webkit-scrollbar-thumb:hover {
	background: var(--ep-gold);
}

/* Responsive grid breakpoints */
@media (max-width: 1024px) {
	#relatedCategories ul.related-category-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	#relatedCategories ul.related-category-list {
		grid-template-columns: repeat(2, 1fr);
	}

	#relatedCategories .related-category-group {
		padding: var(--ep-space-6) var(--ep-space-4);
	}
}

@media (max-width: 480px) {
	#relatedCategories ul.related-category-list {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * 10. #catBlogpost — blog post row
 * ============================================================ */

#catBlogpost h2 {
	text-align: center;
	font-size: var(--ep-font-2xl);
	font-weight: var(--ep-weight-bold);
	color: var(--ep-text-primary);
	margin: 0 0 var(--ep-space-8);
	line-height: var(--ep-leading-snug);
}

/* ============================================================
 * 11. Shared inline link treatment inside editorial sections
 * ============================================================ */

.below-woocommerce-category a:not(.button):not([class^="ep-"]),
.cat_faq-content a:not(.button),
.cat_tips a:not(.button),
.cat_buyer a:not(.button),
.questionnairet-content a:not(.button) {
	color: var(--ep-accent-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--ep-transition-fast);
}

.below-woocommerce-category a:not(.button):not([class^="ep-"]):hover,
.cat_faq-content a:not(.button):hover,
.cat_tips a:not(.button):hover,
.cat_buyer a:not(.button):hover,
.questionnairet-content a:not(.button):hover {
	color: var(--ep-accent);
}

/* ============================================================
 * 12. #questionnairet — quiz widget (.quizmainbox)
 *
 * Overrides legacy.css quiz rules (~296–360) never fully token-migrated.
 * Legacy .quiz-section carried a hardcoded blue gradient (#2e6bc6 →
 * #baf7f6) + white h3, clashing with the modern flat section. These
 * win the cascade — this file loads after legacy.css.
 * ============================================================ */

.quizmainbox .quiz-section {
	background: var(--ep-bg-page);
	box-shadow: var(--ep-shadow-sm);
	border: 1px solid var(--ep-border-default);
	border-radius: var(--ep-radius-lg);
}

.quizmainbox .quiz-section h3 {
	color: var(--ep-text-primary);
	font-size: var(--ep-font-lg);
	font-weight: var(--ep-weight-semibold);
}

.quizmainbox .option {
	transition: border-color var(--ep-transition-fast), background var(--ep-transition-fast);
}

.quizmainbox .option:hover {
	background-color: var(--ep-accent-soft);
	border-color: var(--ep-accent);
}

.quizmainbox .option:hover:before {
	border-color: var(--ep-accent);
}

.quizmainbox .solution {
	background: var(--ep-accent-soft);
	border-left: 4px solid var(--ep-accent);
	border-radius: 0 var(--ep-radius-md) var(--ep-radius-md) 0;
	padding: var(--ep-space-5) var(--ep-space-6);
	text-align: left;
	color: var(--ep-text-secondary);
	line-height: var(--ep-leading-relaxed);
}

.quizmainbox .solution h4 {
	color: var(--ep-text-primary);
	font-weight: var(--ep-weight-bold);
	margin: 0 0 var(--ep-space-2);
}

.quizmainbox .btn {
	background-color: transparent;
	color: var(--ep-text-primary);
	border: 1px solid var(--ep-border-default);
	border-radius: 999px;
	font-weight: var(--ep-weight-medium);
	transition: background var(--ep-transition-fast), border-color var(--ep-transition-fast);
}

.quizmainbox .btn:hover {
	background-color: var(--ep-bg-muted);
	border-color: var(--ep-text-muted);
}