/**
 * Macro Tables - front-end styles.
 * Everything is driven by custom properties set inline per table,
 * so two tables on the same page can look completely different.
 */

.mt-wrap {
	--mt-ground: #ffffff;
	--mt-header-bg: #ffffff;
	--mt-header-text: #1a1a1a;
	--mt-label-bg: #f4f5f7;
	--mt-label-text: #1a1a1a;
	--mt-cell-bg: #f4f5f7;
	--mt-cell-text: #333333;
	--mt-alt-cell-bg: #eceef1;
	--mt-heading-bg: #e4e7ea;
	--mt-heading-text: #1a1a1a;
	--mt-hover-bg: #e8eaed;
	--mt-gap: 4px;
	--mt-radius: 4px;
	--mt-font-size: 15px;
	--mt-padding-v: 14px;
	--mt-padding-h: 16px;
	--mt-max-width: none;

	background: var(--mt-ground);
	border-radius: var(--mt-radius);
	box-sizing: border-box;
	margin: 0 auto 1.5em;
	max-width: var(--mt-max-width);
	padding: 0;
	width: 100%;
}

.mt-wrap *,
.mt-wrap *::before,
.mt-wrap *::after {
	box-sizing: border-box;
}

/* Horizontal scroll on narrow screens instead of squashed columns. */
.mt-scroll {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	width: 100%;
}

.mt-wrap .mt-table {
	background: transparent;
	border: 0;
	border-collapse: separate;
	border-spacing: var(--mt-gap);
	color: var(--mt-cell-text);
	font-size: var(--mt-font-size);
	line-height: 1.35;
	margin: 0;
	table-layout: auto;
	width: 100%;
}

/* Reset the theme's own table styling (Woodmart adds borders + stripes). */
.mt-wrap .mt-table th,
.mt-wrap .mt-table td {
	background-clip: padding-box;
	border: 0 !important;
	vertical-align: middle;
}

.mt-wrap .mt-table tr,
.mt-wrap .mt-table tbody tr:nth-child(odd),
.mt-wrap .mt-table tbody tr:nth-child(even) {
	background: transparent !important;
}

/* Header row */
.mt-wrap .mt-th {
	background: var(--mt-header-bg);
	border-radius: var(--mt-radius);
	color: var(--mt-header-text);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: var(--mt-padding-v) var(--mt-padding-h);
	text-align: center;
	white-space: nowrap;
}

.mt-wrap .mt-th--label {
	min-width: 160px;
	text-align: left;
}

/* First column - the item name */
.mt-wrap .mt-label {
	background: var(--mt-label-bg);
	border-radius: var(--mt-radius);
	color: var(--mt-label-text);
	font-weight: 700;
	min-width: 160px;
	padding: var(--mt-padding-v) var(--mt-padding-h);
	text-align: left;
}

/* Data cells */
.mt-wrap .mt-cell {
	background: var(--mt-cell-bg);
	border-radius: var(--mt-radius);
	color: var(--mt-cell-text);
	font-weight: 500;
	padding: var(--mt-padding-v) var(--mt-padding-h);
	text-align: center;
	white-space: nowrap;
}

.mt-wrap.is-align-left .mt-cell,
.mt-wrap.is-align-left .mt-th {
	text-align: left;
}

.mt-wrap.is-align-left .mt-th--label {
	text-align: left;
}

/* Optional zebra striping */
.mt-wrap.is-striped .mt-table tbody tr:nth-of-type(even) .mt-cell,
.mt-wrap.is-striped .mt-table tbody tr:nth-of-type(even) .mt-label {
	background: var(--mt-alt-cell-bg);
}

/* Section heading rows */
.mt-wrap .mt-heading {
	background: var(--mt-heading-bg);
	border-radius: var(--mt-radius);
	color: var(--mt-heading-text);
	font-size: 0.86em;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: calc(var(--mt-padding-v) * 0.8) var(--mt-padding-h);
	text-align: left;
	text-transform: uppercase;
}

/* Row hover */
@media (hover: hover) {
	.mt-wrap .mt-table tbody tr:not(.mt-row--heading):hover .mt-cell,
	.mt-wrap .mt-table tbody tr:not(.mt-row--heading):hover .mt-label {
		background: var(--mt-hover-bg);
	}
}

.mt-wrap .mt-table tbody tr .mt-cell,
.mt-wrap .mt-table tbody tr .mt-label {
	transition: background-color 0.15s ease;
}

/* Small screens - tighten things up a little */
@media (max-width: 600px) {
	.mt-wrap {
		--mt-font-size: 14px;
		--mt-padding-v: 11px;
		--mt-padding-h: 12px;
	}

	.mt-wrap .mt-th--label,
	.mt-wrap .mt-label {
		min-width: 140px;
	}
}

.mt-notice {
	background: #fff4e5;
	border-left: 4px solid #f0a132;
	color: #6b4a12;
	margin: 1em 0;
	padding: 10px 14px;
}
