:root {
	--wpss-open: #1e7e34;
	--wpss-closed: #c0392b;
	--wpss-badge-text: #fff;
	--wpss-border: #dcdfe5;
	--wpss-bg: #f9fafb;
}

.wp-shop-status {
	border: none;
	background: transparent;
	padding: 0;
	font-family: inherit;
}

.wp-shop-status__badge {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 8px 12px;
	border-radius: 999px;
	color: var(--wpss-badge-text, #fff);
	font-weight: 600;
	margin-bottom: 12px;
}

.wp-shop-status__badge--open {
	background: var(--wpss-open);
}

.wp-shop-status__badge--closed {
	background: var(--wpss-closed);
}

.wp-shop-status__next {
	font-weight: 400;
}

.wp-shop-status__table {
	width: 100%;
	border-collapse: collapse;
}

.wp-shop-status__table th,
.wp-shop-status__table td {
	padding: 6px 8px;
	border-top: 1px solid var(--wpss-border);
	/* Logical, not physical: identical to `left` in LTR, correctly flips for
	   RTL locales (weekday labels come from $wp_locale, so the table can render
	   right-to-left). */
	text-align: start;
}

.wp-shop-status__table tr.is-today th,
.wp-shop-status__table tr.is-today td {
	background: var(--wpss-bg);
	color: var(--wpss-today-text, #1d2327);
	font-weight: 600;
}

.wp-shop-status__table tr.is-today th {
	/* Logical inline-start: left in LTR, right in RTL (see note above). */
	border-inline-start: 3px solid var(--wpss-open);
}

.wp-shop-status__closed {
	color: var(--wpss-closed);
	font-weight: 600;
}

/* Windows High Contrast / forced-colors mode overrides the badge's solid
   background with the system Canvas colour, which would erase the pill's
   boundary and leave floating text. Restore a visible outline; the rule is
   inert in normal rendering, so no live site is affected. */
@media (forced-colors: active) {
	.wp-shop-status__badge {
		border: 1px solid CanvasText;
	}
}