/**
 * Tabs → accordion at mobile breakpoint (≤768px).
 *
 * Above 768px: WC tabs render unchanged (no rules here apply).
 * At ≤768px: hides .wc-tabs and renders <details>/<summary> accordion sections
 * via the companion JS file.
 *
 * See pp-custom/includes/tabs-accordion-mobile.php for context.
 */

@media (max-width: 768px) {
	.woocommerce-tabs .wc-tabs {
		display: none !important;
	}

	.woocommerce-tabs .woocommerce-Tabs-panel {
		display: block !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.pp-tabs-acc {
		border-top: 1px solid #e5e5e5;
		margin: 0;
	}

	.woocommerce-tabs .woocommerce-Tabs-panel:last-of-type .pp-tabs-acc {
		border-bottom: 1px solid #e5e5e5;
	}

	.pp-tabs-acc__summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 0;
		cursor: pointer;
		font-weight: 600;
		font-size: 18px;
		list-style: none;
		user-select: none;
	}

	.pp-tabs-acc__summary::-webkit-details-marker {
		display: none;
	}

	.pp-tabs-acc__summary::after {
		content: '▾';
		font-size: 19px;
		transition: transform 200ms ease;
		flex-shrink: 0;
		margin-left: 12px;
		line-height: 1;
	}

	.pp-tabs-acc[open] > .pp-tabs-acc__summary::after {
		transform: rotate(180deg);
	}

	.pp-tabs-acc__body {
		padding: 0 0 16px;
	}
}