.bbs-dt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;line-height:1.3}
.bbs-dt__headline{font-weight:700;letter-spacing:.02em}
.bbs-dt__timer{display:inline-flex;align-items:center;gap:5px}
.bbs-dt__label{opacity:.85;margin-right:2px}
.bbs-dt__unit{display:inline-flex;align-items:baseline;gap:1px;padding:2px 8px;border-radius:99px;
  background:rgba(255,255,255,.16);font-variant-numeric:tabular-nums;font-size:.95em}
.bbs-dt__unit b{font-weight:700;min-width:1.6em;text-align:right;display:inline-block}
.bbs-dt__note{opacity:.9}
.bbs-dt__code{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px dashed currentColor;
  border-radius:99px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.bbs-dt__code:hover{background:rgba(255,255,255,.14)}
.bbs-dt__code-value{font-weight:700;letter-spacing:.06em}
.bbs-dt__code-copied{font-size:.85em;opacity:0;transition:opacity .2s}
.bbs-dt__code.is-copied .bbs-dt__code-copied{opacity:.9}
.bbs-dt.is-expired{display:none}
@media(max-width:600px){
  .bbs-dt{gap:5px 9px;font-size:12.5px}
  .bbs-dt__label{display:none}
  .bbs-dt__unit{padding:2px 6px}
}
@media (prefers-reduced-motion: reduce){.bbs-dt *{transition:none!important}}

/* Theme hardening. WoodMart styles every bare <button> in the header with a
   light background and dark text, which turned the code pill into a white box
   on the navy bar. Its selectors are more specific than ours, so these few
   declarations are forced — scoped to this widget only. */
.bbs-dt button.bbs-dt__code,
.bbs-dt button.bbs-dt__code:hover,
.bbs-dt button.bbs-dt__code:focus,
.bbs-dt button.bbs-dt__code:active {
	background: transparent !important;
	background-image: none !important;
	color: inherit !important;
	border: 1px dashed currentColor !important;
	border-radius: 99px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 3px 10px !important;
	font: inherit !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.bbs-dt button.bbs-dt__code:hover { background: rgba(255, 255, 255, .16) !important; }

.bbs-dt .bbs-dt__headline,
.bbs-dt .bbs-dt__note { text-transform: none; }

/* The bar is one line of text, not a heading block. */
.wd-header-text .bbs-dt { margin: 0; }
.wd-header-text h2 { margin: 0; font-size: inherit; line-height: inherit; }

/* Top bar height on small screens.
   WoodMart pins the top-bar row to a fixed height with a hard max-height
   (--wd-top-bar-sm-h, 38px below 1024px). The bar wraps to two lines on a
   phone — headline on one, countdown and code on the next — so at 46px the
   content overflowed the cap and the headline was clipped off the top.
   Release the cap so the row grows to its content, but only for a row that
   actually contains the timer: :has() handles first paint, and the classes
   timer.js adds cover browsers without it. */
/* The :has() and class-based rules are kept apart on purpose: a browser that
   does not understand :has() discards the whole rule it appears in, which would
   take the fallback with it if they shared one selector list. */
@media (max-width: 1024px) {
	.whb-row.bbs-dt-row .whb-flex-row {
		height: auto;
		max-height: none;
		min-height: var(--wd-top-bar-sm-h, 38px);
	}

	.whb-column.bbs-dt-col {
		max-height: none;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.whb-row:has(.bbs-dt) .whb-flex-row {
		height: auto;
		max-height: none;
		min-height: var(--wd-top-bar-sm-h, 38px);
	}

	.whb-column:has(.bbs-dt) {
		max-height: none;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

/* Tighten the bar itself so the two lines stay compact. */
@media (max-width: 600px) {
	.bbs-dt__headline { font-size: 12px; text-align: center; }
	.bbs-dt button.bbs-dt__code { padding: 2px 9px !important; }
}

/* Below ~360px the code pill and countdown no longer share a line; dropping
   the "Use code" wording keeps them together instead of going to three. */
@media (max-width: 359px) {
	.bbs-dt__code-label { display: none; }
}