/*
 * Product Tabs Accordion — Mobile Styles
 * Scope: @media (max-width: 999.98px) only.
 * Desktop styles are left entirely to WooCommerce / Blocksy defaults.
 *
 * Supports both Blocksy tab layouts:
 *   type-1/2: <ul.tabs.wc-tabs> + <div.woocommerce-Tabs-panel>
 *   type-4:   no tab nav, panels as <article> > <div id="tab-*" class="entry-content">
 */

@media (max-width: 999.98px) {

	/* 1. Hide the horizontal tab navigation list (type-1/2 only — no-op for type-4). */
	.woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs {
		display: none !important;
	}

	/* 2. Hide all tab panels by default, both layout types, until JS marks them. */
	.woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel,
	.woocommerce-tabs.wc-tabs-wrapper article > [id^="tab-"] {
		display: none !important;
	}

	/* 3. Panels marked by JS — hidden by default.
	      Specificity (0,3,0) intentionally beats the hide rule above. */
	.woocommerce-tabs.wc-tabs-wrapper .vdt-acc-panel {
		display: none !important;
	}

	/* 4. Open panel — shown. Specificity (0,4,0) beats the hide rule. */
	.woocommerce-tabs.wc-tabs-wrapper .vdt-acc-panel.vdt-acc-open {
		display: block !important;
		padding-bottom: 16px;
	}

	/* 5. Heading button */
	.vdt-acc-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 20px;
		background: transparent;
		border: none;
		border-top: 1px solid #e2e8f0;
		cursor: pointer;
		font-size: 1rem;
		font-weight: 600;
		color: inherit;
		text-align: left;
		line-height: 1.4;
	}

	.vdt-acc-btn:focus-visible {
		outline: 2px solid var(--theme-palette-color-1, #e8a425);
		outline-offset: 2px;
	}

	/* 6. Chevron icon */
	.vdt-acc-icon {
		flex-shrink: 0;
		margin-left: 12px;
		width: 16px;
		height: 16px;
		transition: transform 0.25s ease;
	}

	.vdt-acc-btn.vdt-acc-open .vdt-acc-icon {
		transform: rotate(180deg);
	}

	/* 7. Hide the <h2> heading Blocksy injects into panels — the button already shows it. */
	.woocommerce-tabs.wc-tabs-wrapper .vdt-acc-panel > h2:first-child {
		display: none;
	}
}