/**
 * GG Logic — Blocksy-specific storefront styles.
 *
 * Enqueued site-wide by includes/functions/theme-blocksy/assets.php.
 * Everything here is written against Blocksy's markup (and the child theme's
 * tabs override); theme-agnostic styles belong in frontend.css.
 */

/* ── Product tabs: description + additional information side by side ────── */

/*
 * On desktop, when "Descrição" and "Informação adicional" are the only two
 * tabs, both panels are shown at once as two columns (3/5 + 2/5) and the two
 * tab labels become their column headings. WooCommerce only adds the
 * additional-information tab when the product has attributes, weight or
 * dimensions to show, so a product without them keeps its single full-width
 * description. Any other tab mix, smaller screens, and browsers without
 * `:has()` all keep Blocksy's classic tabs.
 *
 * The labels and the panels share one grid geometry, so each heading sits
 * over its column. The labels are made inert: both columns are always
 * visible, there is nothing to switch.
 */
@media (min-width: 1000px) {
	.woocommerce-tabs:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > ul.tabs,
	.woocommerce-tabs:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > article {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: 60px;
	}

	/* Same box as the tab list (Blocksy's `.is-width-constrained`). */
	.woocommerce-tabs:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > article {
		margin-inline: auto;
		width: var(--theme-container-width);
		max-width: var(--theme-block-max-width);
	}

	.woocommerce-tabs:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > article > .woocommerce-Tabs-panel {
		/* WooCommerce's tabs script hides the inactive panel with an inline style. */
		display: block !important;
		/* Let the panel content fill its column instead of the page's block width. */
		--theme-block-width: 100%;
		--theme-block-max-width: 100%;
	}

	.woocommerce-tabs:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > article > #tab-description {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce-tabs:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > article > #tab-additional_information {
		grid-column: 2;
		grid-row: 1;
	}

	/* Tab labels as column headings, aligned with the column content. */
	.woocommerce-tabs:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > ul.tabs > li {
		justify-self: start;
	}

	.woocommerce-tabs:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > ul.tabs > li > a {
		pointer-events: none;
		cursor: default;
		color: var(--theme-link-active-color, var(--theme-link-hover-color));
	}

	/*
	 * Blocksy's default (underlined) tab style: text flush with the columns,
	 * and both headings carry the active underline.
	 */
	.woocommerce-tabs[data-type*="type-1"]:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > ul.tabs > li > a {
		padding-inline: 0;
	}

	.woocommerce-tabs[data-type*="type-1"]:has(> ul.tabs > li.description_tab:first-child + li.additional_information_tab:last-child) > ul.tabs > li::before {
		position: absolute;
		content: "";
		height: 3px;
		inset-inline: 0;
		bottom: -2px;
		background: var(--tab-background, var(--theme-palette-color-1));
	}
}

/* ── Language flags on product cards ────────────────────────────────────── */

/*
 * "type-3" product cards slide their wishlist / quick-view buttons up over the
 * bottom of the image on hover; the flags (frontend.css) step aside meanwhile.
 */
[data-products="type-3"] .product:hover figure:has(.ct-woo-card-extra) .gg-language-flags--card {
	opacity: 0;
}