/* ============================================================
   Variation accordion — BUILDER PAGES ONLY
   ------------------------------------------------------------
   Figma Style Guide "Accordion Tabs" (Type=In Stock), as used for the
   option groups in the Figma "Product Page" file's Builder frames.
   Standard product pages use the static Section Header instead
   (wwg-single-product.css).

   Paired with includes/js/wwg-variation-accordion.js, which turns each
   WooCommerce table.variations row into a tab: th.label is the header
   (group icon + name + chevron), td.value the panel. A collapsed tab
   shows the chosen value underneath. States: Default / Hover /
   Focus (open) / Focus Hover.

   Enqueued only on builder pages (see custom-wwg-single-product.php).
   The script targets `.wwg-product-top form.variations_form`; the Modular
   Table configurator renders its own markup, so both are inert there
   until the script is pointed at that markup.
   ============================================================ */

body .wwg-product-top table.variations,
body .wwg-product-top table.variations tbody,
body .wwg-product-top table.variations tr.wwg-acc,
body .wwg-product-top table.variations tr.wwg-acc > th.label,
body .wwg-product-top table.variations tr.wwg-acc > td.value {
	display: block;
	width: 100%;
}
body .wwg-product-top table.variations {
	margin: 0 0 40px !important;
	border: 0;
}
body .wwg-product-top table.variations tr.wwg-acc + tr.wwg-acc {
	margin-top: 40px;
}
body .wwg-product-top table.variations tr.wwg-acc > th.label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	border-radius: var(--wwg-radius-lg);
	background-color: var(--wwg-color-bg-primary);
	box-shadow: inset 0 -2px 0 var(--wwg-color-accent-neutral);
	text-align: left;
	cursor: pointer;
	transition: background-color .2s, box-shadow .2s;
}
body .wwg-product-top table.variations tr.wwg-acc > th.label:focus-visible {
	outline: 2px solid var(--wwg-color-text-cta);
	outline-offset: 2px;
}
.wwg-product-top tr.wwg-acc .wwg-acc-title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.wwg-product-top tr.wwg-acc .wwg-acc-title label {
	margin: 0;
	cursor: pointer;
	transition: color .2s;
}
.wwg-product-top tr.wwg-acc .wwg-acc-icon {
	flex: 0 0 24px;
	fill: var(--wwg-color-accent-strong);
}
/* The chosen value moves out of the header into the summary line. */
.wwg-product-top tr.wwg-acc th.label .woo-selected-variation-item-name {
	display: none;
}
.wwg-product-top tr.wwg-acc .wwg-acc-chevron {
	flex: 0 0 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
.wwg-product-top tr.wwg-acc .wwg-acc-chevron svg {
	fill: var(--wwg-color-icon-2);
	transition: transform .2s, fill .2s;
}
/* Hover */
body .wwg-product-top table.variations tr.wwg-acc > th.label:hover {
	box-shadow: inset 0 -2px 0 var(--wwg-color-accent-strong);
}
.wwg-product-top table.variations tr.wwg-acc > th.label:hover label {
	color: var(--wwg-color-text-strong-hover) !important;
}
/* Focus (open) */
body .wwg-product-top table.variations tr.wwg-acc.is-open > th.label {
	background-color: var(--wwg-color-bg-secondary);
	box-shadow: inset 0 -4px 0 var(--wwg-color-accent-focus);
}
.wwg-product-top tr.wwg-acc.is-open .wwg-acc-chevron svg {
	transform: rotate(180deg);
	fill: var(--wwg-color-icon-focus-1);
}
/* Focus Hover */
body .wwg-product-top table.variations tr.wwg-acc.is-open > th.label:hover {
	box-shadow: inset 0 -2px 0 var(--wwg-color-accent-strong);
}
.wwg-product-top tr.wwg-acc.is-open > th.label:hover .wwg-acc-chevron svg {
	fill: var(--wwg-color-icon-2);
}
/* Panel: swatches when open, the chosen value when collapsed. */
body .wwg-product-top table.variations tr.wwg-acc > td.value {
	margin: 0;
	padding: 16px 0 0 !important;
}
body .wwg-product-top table.variations tr.wwg-acc:not(.is-open) > td.value > :not(.wwg-acc-summary) {
	display: none !important;
}
.wwg-product-top tr.wwg-acc.is-open .wwg-acc-summary,
.wwg-product-top tr.wwg-acc .wwg-acc-summary[hidden] {
	display: none;
}
body .wwg-product-top table.variations tr.wwg-acc:not(.is-open) > td.value:has(.wwg-acc-summary[hidden]) {
	padding-top: 0 !important;
}
.wwg-product-top tr.wwg-acc .wwg-acc-summary {
	padding-left: 24px;
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	font-weight: 400;
}
.wwg-product-top tr.wwg-acc .wwg-acc-summary {
	color: var(--wwg-color-text-primary);
}
@media (max-width: 767px) {
	body .wwg-product-top table.variations tr.wwg-acc > th.label {
		padding: 4px 8px;
	}
	.wwg-product-top tr.wwg-acc .wwg-acc-summary {
		font-size: var(--wwg-text-sm-size);
		line-height: 24px;
	}
}