/**
 * Product tab shell — matches PROD (pangja-child) styling exactly.
 *
 * Prod wraps the panel in a teal (rgb(76,159,156)) 3-sided border, and the
 * ACTIVE tab gets a full teal border with no bottom edge — the folder-tab look
 * that connects the tab to the panel box below. Replicated here verbatim, just
 * scoped to the supplier catalog products (body.hp-gp-product) so it's plugin-owned and
 * matches even where the theme CSS differs (e.g. local).
 *
 * Source of truth: prod /wp-content/themes/pangja-child/style.css lines 13-31.
 */

:root { --hp-tab-border: rgb(76, 159, 156); }

/* Tab label row: bottom rule in the brand teal. */
.hp-gp-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs {
	margin-bottom: 0 !important;
	border-bottom: 1px solid var(--hp-tab-border);
}

/* Nudge the first tab in from the edge (prod parity). */
.hp-gp-product .single-product-content .woocommerce-tabs ul.tabs li:first-child {
	padding-left: 1em !important;
}

/* Active tab: full teal border, no bottom — connects into the panel box. */
.hp-gp-product .woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.active,
.hp-gp-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs li.active {
	border: 1px solid var(--hp-tab-border) !important;
	border-bottom: 0 !important;
}

/* Panel: teal left/right/bottom border (no top — the tab row is the top). */
.hp-gp-product .woocommerce-tabs.wc-tabs-wrapper .panel.wc-tab,
.hp-gp-product .woocommerce-tabs .panel,
.hp-gp-product .woocommerce-tabs .wc-tab {
	padding: 2em 2em !important;
	border-left: 1px solid var(--hp-tab-border);
	border-right: 1px solid var(--hp-tab-border);
	border-bottom: 1px solid var(--hp-tab-border);
	border-radius: 0;
}
.hp-gp-product .woocommerce-tabs .panel > h2:first-child,
.hp-gp-product .woocommerce-tabs .wc-tab > h2:first-child { margin-top: 0; }

/* ── Variant accordions inside the panel: no left/right borders, separators
   only (per request — neat inside the bordered panel). ── */
.hp-gp-product .hp-tpl-group {
	border: 0;
	border-top: 1px solid #e3e3e3;
	border-radius: 0;
	margin: 0;
}
.hp-gp-product .hp-tpl-group:last-of-type { border-bottom: 1px solid #e3e3e3; }
.hp-gp-product .hp-tpl-group > summary {
	background: #fff;
	padding: 14px 2px;
	font-size: 16px;
	font-weight: 600;
}
.hp-gp-product .hp-tpl-group .hp-tpl-group-body { padding: 6px 2px 18px; }

/* Theme's native-details accordion shortcode, when used inside a supplier panel —
   drop its side borders so it sits flush like prod. */
.hp-gp-product .woocommerce-tabs .prod-template-shortcode-accordion {
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}

/* Product Details block (the supplier's first tab, stored cleaned at import). The markup
   uses the theme's bootstrap grid; these cover the supplier's own utility classes. */
.hp-gp-product .hp-product-details .bold,
.hp-gp-product .hp-product-details .fonts6 { font-weight: 600; }
.hp-gp-product .hp-product-details .row + .row { margin-top: 10px; }
.hp-gp-product .hp-product-details p { margin: 6px 0 10px; }
.hp-gp-product .hp-product-details ul { margin: 6px 0 12px 20px; }
.hp-gp-product .hp-product-details h3 { font-size: 18px; font-weight: 600; margin: 18px 0 8px; }

/* The supplier's details block is authored on a Bootstrap-4 grid (.row / .col-md-* / .col)
   the theme does not load — lay it out ourselves: label column left, values right, no
   negative row margins (they clipped the value lines at the panel edge). */
.hp-gp-product .hp-product-details .row { display: flex; flex-wrap: wrap; margin: 0; align-items: flex-start; }
.hp-gp-product .hp-product-details .row + .row { margin-top: 8px; }
.hp-gp-product .hp-product-details [class^="col"], .hp-gp-product .hp-product-details [class*=" col"] { padding: 0 12px 0 0; box-sizing: border-box; min-width: 0; }
.hp-gp-product .hp-product-details .col-md-12 { flex: 0 0 100%; max-width: 100%; }
.hp-gp-product .hp-product-details .col-md-6 { flex: 0 0 50%; max-width: 50%; }
.hp-gp-product .hp-product-details .col-md-4 { flex: 0 0 34%; max-width: 34%; }
.hp-gp-product .hp-product-details .col { flex: 1 1 0; }
.hp-gp-product .hp-product-details .col-md-6 > .row > .col-md-4 { flex: 0 0 38%; max-width: 38%; }
@media (max-width: 767px) {
	.hp-gp-product .hp-product-details .col-md-6,
	.hp-gp-product .hp-product-details .col-md-4,
	.hp-gp-product .hp-product-details .col-md-6 > .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; }
	.hp-gp-product .hp-product-details .col-md-6 + .col-md-6 { margin-top: 12px; }
	/* File Setup: a note's continuation row has no label — stacked, it would leave a blank line. */
	.hp-gp-product .hp-file-setup .hp-file-setup-cont { display: none; }
}

/* The supplier's extra tabs (Size Chart, Print/Embroidery Guidelines, Fold Options…). */
.hp-gp-product .hp-extra-tab img { max-width: 100%; height: auto; }
.hp-gp-product .hp-extra-tab .m-auto { margin: 0 auto; }
/* Guideline images ship as a desktop + a mobile rendition — show one, like the supplier. */
.hp-gp-product .hp-extra-tab .mobile-tab-img { display: none; }
@media (max-width: 767px) {
	.hp-gp-product .hp-extra-tab .desktop-tab-img { display: none; }
	.hp-gp-product .hp-extra-tab .mobile-tab-img { display: block; }
}
/* Fold-option thumbnails: a 3-across table of centered cells with the label underneath. */
.hp-gp-product .hp-extra-tab .tableRow { display: flex; flex-wrap: wrap; justify-content: center; margin: 18px 0; }
.hp-gp-product .hp-extra-tab .tableData { flex: 0 0 33.333%; max-width: 33.333%; text-align: center; padding: 0 8px; box-sizing: border-box; }
.hp-gp-product .hp-extra-tab .tableData img { width: 101px; height: auto; display: inline-block; }
.hp-gp-product .hp-extra-tab .textData { margin-top: 8px; font-weight: 600; }
@media (max-width: 599px) {
	.hp-gp-product .hp-extra-tab .tableData { flex: 0 0 50%; max-width: 50%; }
}