.elementor-widget-nk-price-table {
	--_border-radius: 0.5rem;
	--_padding-inline: var(--nd-space-xs);

	/* Tablet and up */
	@media only screen and (min-width: 768px) {
		--_padding-inline: calc(var(--nd-space-xs) / 3 * 4);

		.col-price {
			width: 22%;
			min-width: min-content;
		}
	}

	table {
		border-collapse: separate;
		border-spacing: 0 0.25rem; /* row gaps */
		text-align: left;
		font-size: initial;
		margin-block-end: 0;

		th,
		td {
			border: none;
			line-height: initial;
			vertical-align: baseline;
		}

		thead {
			/* Extra gap below header - this basically doubles the row gap */
			&::after {
				content: "";
				display: block;
			}
			tr {
				background: var(--e-global-color-primary);
				color: var(--e-global-color-6210a60, #fff);

				th {
					padding: var(--nd-space-xs) var(--_padding-inline, var(--nd-space-xs));
					font-size: var(--e-global-typography-fbfec04-font-size);
					font-weight: var(--e-global-typography-fbfec04-font-weight);
					line-height: var(--e-global-typography-fbfec04-line-height);

					&:first-child {
						border-radius: var(--_border-radius) 0 0 var(--_border-radius);
					}

					&:last-child {
						border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
					}
				}
			}
		}

		tbody {
			tr {
				background: var(--e-global-color-6210a60, #fff);

				&:nth-child(even) {
					background: var(--e-global-color-b70b285);
				}

				td {
					background: inherit;
					padding: 1rem var(--_padding-inline, var(--nd-space-xs));

					&:first-child {
						border-radius: var(--_border-radius) 0 0 var(--_border-radius);
					}

					&:last-child {
						border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
					}
				}

				&:hover :is(th, td) {
					background: inherit;
				}
			}
		}
	}
}