/**
 * Templates tab — the supplier / WP-Table-Builder parity layout.
 * Table: Size | (Square|Vertical) | Horizontal, with per-cell format icons
 * (Illustrator / Photoshop / PDF / InDesign / JPG). Icons are the same
 * individual PNGs the team uses in WP Table Builder on prod, so the look
 * matches exactly. Full cell-border grid + zebra striping like the WPTB tables.
 */

.hp-tpl-intro { margin: 0 0 1.25rem; line-height: 1.6; }

.hp-gp-product .woocommerce-tabs .hp-tpl-table {
	width: 100%;
	border-collapse: collapse !important;
	margin: 0;
	border: 1px solid #111 !important;
}
.hp-gp-product .woocommerce-tabs .hp-tpl-table th,
.hp-gp-product .woocommerce-tabs .hp-tpl-table td {
	border: 1px solid #111 !important;
	padding: 14px 16px;
	vertical-align: middle;
	text-align: left;
}
.hp-gp-product .woocommerce-tabs .hp-tpl-table thead th {
	background: #fff;
	font-weight: 700;
	font-size: 15px;
	color: #2e2e2e;
}
.hp-gp-product .woocommerce-tabs .hp-tpl-table tbody td:first-child { font-weight: 600; white-space: nowrap; color: #2e2e2e; }
/* Zebra striping (WPTB look). */
.hp-gp-product .woocommerce-tabs .hp-tpl-table tbody tr:nth-child(even) td { background: #f0f0f0; }

/* Icon row inside a cell */
.hp-tpl-files { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hp-tpl-files a {
	display: inline-block;
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	text-indent: -9999px;       /* hide the format text, keep it for a11y */
	overflow: hidden;
	transition: transform .12s ease, opacity .12s ease;
}
.hp-tpl-files a:hover { transform: translateY(-1px); opacity: .85; }

/* Individual format icons (same PNGs as the WPTB tables on prod). */
.hp-tpl-files a.ai   { background-image: url( ../img/icon-ai.png ); }
.hp-tpl-files a.psd  { background-image: url( ../img/icon-psd.png ); }
.hp-tpl-files a.pdf  { background-image: url( ../img/icon-pdf.png ); }
.hp-tpl-files a.indd { background-image: url( ../img/icon-indd.png ); }
.hp-tpl-files a.jpg  { background-image: url( ../img/icon-jpg.png ); }
/* Formats without a sprite icon (EPS / PNG — 4over tablecloths publish EPS): a text badge, same box height. */
.hp-tpl-files a.eps,
.hp-tpl-files a.png {
	width: auto;
	min-width: 36px;
	padding: 0 8px;
	text-indent: 0;
	font: 700 11px/34px "Poppins", Arial, sans-serif;
	letter-spacing: .04em;
	color: #2e2e2e;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	background: #fff;
	text-align: center;
	text-decoration: none;
}

.hp-tpl-none { color: #bbb; }

@media (max-width: 600px) {
	.hp-tpl-table, .hp-tpl-table thead, .hp-tpl-table tbody, .hp-tpl-table tr, .hp-tpl-table th, .hp-tpl-table td { display: block; }
	.hp-tpl-table thead { display: none; }
	.hp-tpl-table td { border: 0; border-bottom: 1px solid #e0e0e0; padding: 8px 12px; }
	.hp-tpl-table tbody tr { border: 1px solid #111; margin-bottom: 10px; display: block; }
	.hp-tpl-table td:first-child { font-size: 16px; padding-top: 12px; background: #f7f7f7; }
}