/**
 * Drop presentation: home banner, product countdown panel, archive badge.
 *
 * ⚠ EVERY colour here is a token. No literal hex except as the fallback inside a var(), which is
 * what makes the light/dark contract hold by construction rather than by remembering to restyle
 * each new surface. If a rule in this file grows a bare hex value, it is wrong.
 *
 * ⚠ Every rule is scoped under `.ostz`. This sheet loads on pages the theme does not fully own,
 * and an unscoped `section` or bare-element rule would leak onto the host.
 */

/* --------------------------------------------------------------- shared bits */

.ostz .ostz-drop-dot {
	display: inline-block;
	inline-size: 7px;
	block-size: 7px;
	margin-inline-end: 7px;
	border-radius: 50%;
	background: var(--ostz-accent, #00e0d5);
	vertical-align: middle;
}

/* The countdown. Digits are tabular so the row does not jiggle every second. */
.ostz .ostz-drop-count {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ostz-space-2, 8px);
	margin-block: var(--ostz-space-3, 12px);
	font-variant-numeric: tabular-nums;
}

.ostz .ostz-drop-u {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-inline-size: 58px;
	padding: 8px 10px;
	border: 1px solid var(--ostz-line, #232733);
	border-radius: var(--ostz-radius-sm, 10px);
	background: var(--ostz-bg-sunken, #111318);
}

.ostz .ostz-drop-u b {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ostz-text, #f2f4f8);
}

.ostz .ostz-drop-u span {
	font-size: 11px;
	color: var(--ostz-text-dim, #9aa2b1);
}

/*
 * The no-JS fallback: a real date, shown until the script replaces it. It must not look like a
 * broken counter, so it reads as a plain line rather than an empty box row.
 */
.ostz .ostz-drop-count-fallback {
	color: var(--ostz-text-dim, #9aa2b1);
	font-size: 13px;
}

.ostz .ostz-drop-count.is-over {
	color: var(--ostz-text-faint, #6f7686);
	font-size: 13px;
}

/* --------------------------------------------------------------- home banner */

.ostz .ostz-drop-banner {
	margin-block: var(--ostz-space-8, 32px);
	border-block: 1px solid var(--ostz-line, #232733);
	background: var(--ostz-bg-raised, #14161c);
}

.ostz .ostz-drop-banner-inner {
	padding-block: var(--ostz-space-6, 24px);
}

.ostz .ostz-drop-kicker {
	margin: 0 0 var(--ostz-space-2, 8px);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--ostz-accent, #00e0d5);
}

.ostz .ostz-drop-banner-title {
	margin: 0 0 var(--ostz-space-2, 8px);
	font-size: clamp(21px, 3vw, 30px);
	font-weight: 900;
	line-height: 1.35;
}

/*
 * ⚠ The link gets its OWN class-based colour. `.ostz a { color: inherit }` in the main sheet
 * scores 0-1-1 and would out-specify a 0-1-0 rule here — the recorded specificity trap that has
 * already cost this project a debugging cycle.
 */
.ostz .ostz-drop-banner-title .ostz-drop-banner-link,
.ostz .ostz-drop-banner-title a {
	color: var(--ostz-text, #f2f4f8);
	text-decoration: none;
}

.ostz .ostz-drop-banner-title a:hover,
.ostz .ostz-drop-banner-title a:focus-visible {
	color: var(--ostz-accent, #00e0d5);
}

.ostz .ostz-drop-remaining {
	margin: 0;
	font-size: 14px;
	color: var(--ostz-text-dim, #9aa2b1);
}

.ostz .ostz-drop-cta {
	margin-block-start: var(--ostz-space-4, 16px);
	margin-block-end: 0;
}

/* --------------------------------------------------------------- product panel */

.ostz .ostz-drop-panel {
	margin-block: var(--ostz-space-4, 16px);
	padding: var(--ostz-space-4, 16px);
	border: 1px solid var(--ostz-line, #232733);
	border-radius: var(--ostz-radius, 14px);
	background: var(--ostz-bg-raised, #14161c);
}

.ostz .ostz-drop-panel-lead {
	margin: 0;
	font-size: 13px;
	color: var(--ostz-text-dim, #9aa2b1);
}

.ostz .ostz-drop-panel .ostz-drop-count {
	margin-block-end: 0;
}

.ostz .ostz-drop-why {
	margin: var(--ostz-space-3, 12px) 0 0;
	font-size: 12px;
	line-height: 1.9;
	color: var(--ostz-text-faint, #6f7686);
}

/* --------------------------------------------------------------- archive badge */

.ostz .ostz-badge-drop {
	border-color: var(--ostz-accent-2, #c026ff);
	color: var(--ostz-accent-2, #c026ff);
}

@media (max-width: 520px) {
	.ostz .ostz-drop-u {
		min-inline-size: 48px;
		padding: 6px 8px;
	}

	.ostz .ostz-drop-u b {
		font-size: 18px;
	}
}