/**
 * Shared enrichment widgets — identical on BOTH product page types
 * (WooCommerce product tabs and the catalog mk_product tabbed PDP).
 * Uses the theme's site-wide custom properties with safe fallbacks, so the
 * palette always matches whichever PDP is rendering.
 */

/* ---------------------------------------------------------------------
 * Spec table (mirror of mockup-core catalog-product.css .mk-spec-table,
 * applied via the shared .aiwe-spec-table class so Woo pages match even
 * where the catalog stylesheet is not enqueued).
 * ------------------------------------------------------------------- */
.aiwe-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.aiwe-spec-table tr {
	border-bottom: 1px solid var(--mk-border, #e8e8e8);
}
.aiwe-spec-table td {
	padding: 14px 16px;
	font-size: 13px;
	color: var(--mk-text, #1a1a1a);
}
.aiwe-spec-table td.mk-spec-label {
	font-weight: 600;
	color: var(--mk-text-sec, #555);
	width: 220px;
}
@media (max-width: 600px) {
	.aiwe-spec-table td.mk-spec-label {
		width: 140px;
	}
}

/* ---------------------------------------------------------------------
 * FAQ accordion (native <details> — expandable, crawlable, no JS).
 * Same list rhythm as the spec table: bottom hairlines, 600-weight labels.
 * ------------------------------------------------------------------- */
.aiwe-faq-list {
	max-width: 760px;
}
.aiwe-faq-item {
	border-bottom: 1px solid var(--mk-border, #e8e8e8);
}
.aiwe-faq-q {
	display: block;
	position: relative;
	padding: 16px 40px 16px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--mk-text, #1a1a1a);
	cursor: pointer;
	list-style: none;
	transition: color .2s;
}
.aiwe-faq-q::-webkit-details-marker {
	display: none;
}
.aiwe-faq-q::after {
	content: '+';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 400;
	color: var(--mk-text-muted, #999);
	transition: transform .25s;
}
.aiwe-faq-item[open] > .aiwe-faq-q::after {
	content: '−';
	color: var(--mk-text, #1a1a1a);
}
.aiwe-faq-q:hover {
	color: var(--mk-yellow, #f5c518);
}
.aiwe-faq-a p {
	margin: 0;
	padding: 0 24px 18px 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--mk-text-sec, #555);
}

/* ---------------------------------------------------------------------
 * WooCommerce tab chrome aligned to the catalog's flat tab bar
 * (mk-tabs-nav look: 2px baseline, yellow active underline).
 * ------------------------------------------------------------------- */
.woocommerce-tabs ul.wc-tabs,
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	border: none;
	border-bottom: 2px solid var(--mk-border, #e8e8e8);
	background: none;
}
.woocommerce-tabs ul.wc-tabs::before,
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.wc-tabs::after,
.woocommerce-tabs ul.tabs::after {
	display: none;
}
.woocommerce-tabs ul.wc-tabs li,
.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.woocommerce-tabs ul.wc-tabs li::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.wc-tabs li::after,
.woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce-tabs ul.wc-tabs li a,
.woocommerce-tabs ul.tabs li a {
	display: block;
	position: relative;
	padding: 14px 28px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mk-text-muted, #777);
	text-decoration: none;
	transition: color .3s;
}
.woocommerce-tabs ul.wc-tabs li a:hover,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--mk-text, #1a1a1a);
}
.woocommerce-tabs ul.wc-tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
	color: var(--mk-text, #1a1a1a);
	font-weight: 700;
}
.woocommerce-tabs ul.wc-tabs li.active a::after,
.woocommerce-tabs ul.tabs li.active a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--mk-yellow, #f5c518);
	border-radius: 2px 2px 0 0;
}
/* Woo prints a duplicate panel heading inside each tab — the tab bar
   already names the panel. */
.woocommerce-Tabs-panel > h2:first-of-type {
	display: none;
}