/* Filalab Drops – front end. Scoped under .fld-*; fonts inherit from the theme. */

.fld-page,
.fld-card,
.fld-product-notice,
.fld-account,
.fld-grid {
	--fl-accent: #0A28C3;
	--fl-accent-2: #1863DC;
	--fl-ink: #0c0c0c;
	--fl-muted: #4e4b66;
	--fl-line: #d9d9d9;
	--fl-soft: #F3F3F3;
	--fld-ok: #1f7a3d;
	--fld-warn: #a15c00;
	--fld-bad: #b3261e;
	--fld-radius: 10px;
	--fld-radius-sm: 8px;
	color: var(--fl-ink);
}

.fld-page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 8px 0 48px;
}

.fld-page *,
.fld-page *::before,
.fld-page *::after {
	box-sizing: border-box;
}

.fld-page [hidden],
.fld-account [hidden],
.fld-card [hidden] { display: none !important; }
.fld-muted { color: var(--fl-muted); }
.fld-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fld-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }

.fld-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fl-muted);
}

.fld-lead { font-size: 17px; line-height: 1.55; color: var(--fl-muted); margin: 0 0 16px; }

.fld-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--fl-muted); margin: 0 0 18px; }
.fld-breadcrumb a { color: var(--fl-muted); text-decoration: none; }
.fld-breadcrumb a:hover { color: var(--fl-accent); }

/* Pills and badges */
.fld-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
	background: var(--fl-soft);
	color: var(--fl-ink);
	border: 1px solid var(--fl-line);
}
.fld-pill--live { background: #e7f6ec; border-color: #b9e3c6; color: var(--fld-ok); }
.fld-pill--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fld-ok); animation: fld-pulse 1.6s infinite; }
.fld-pill--waitlist,
.fld-pill--scheduled { background: #eaf0ff; border-color: #c6d4ff; color: var(--fl-accent); }
.fld-pill--paused { background: #fff4e0; border-color: #f3d39b; color: var(--fld-warn); }
.fld-pill--sold_out,
.fld-pill--ended { background: #f1f1f4; color: var(--fl-muted); }
.fld-pill--mode { background: #fff; }
.fld-pill--won,
.fld-pill--claimed { background: #e7f6ec; border-color: #b9e3c6; color: var(--fld-ok); }
.fld-pill--lapsed,
.fld-pill--not_selected { color: var(--fl-muted); }

@keyframes fld-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fld-pill--live::before { animation: none; } }

/* Buttons */
:is(.fld-page, .fld-card, .fld-product-notice, .fld-account) .fld-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid var(--fl-accent);
	border-radius: var(--fld-radius-sm);
	background: var(--fl-accent);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}
:is(.fld-page, .fld-card, .fld-product-notice, .fld-account) .fld-button:hover,
:is(.fld-page, .fld-card, .fld-product-notice, .fld-account) .fld-button:focus-visible { background: var(--fl-accent-2); border-color: var(--fl-accent-2); color: #fff; }
.fld-button:focus-visible,
.fld-link:focus-visible,
.fld-input:focus-visible,
.fld-select:focus-visible,
.fld-page a:focus-visible,
.fld-card a:focus-visible { outline: 3px solid rgba(10, 40, 195, .35); outline-offset: 2px; }
:is(.fld-page, .fld-card, .fld-product-notice, .fld-account) .fld-button[disabled] { opacity: .65; cursor: progress; }
:is(.fld-page, .fld-card, .fld-product-notice, .fld-account) .fld-button--ghost { background: #fff; color: var(--fl-accent); }
:is(.fld-page, .fld-card, .fld-product-notice, .fld-account) .fld-button--ghost:hover { color: #fff; }
:is(.fld-page, .fld-card, .fld-product-notice, .fld-account) .fld-button--xl { min-height: 52px; font-size: 16px; padding: 12px 28px; }
:is(.fld-page, .fld-card, .fld-product-notice, .fld-account) .fld-button--sm { min-height: 34px; padding: 6px 12px; font-size: 13px; margin-top: 6px; }
:is(.fld-page, .fld-card, .fld-product-notice, .fld-account) .fld-link { background: none; border: 0; padding: 0; color: var(--fl-accent); text-decoration: underline; cursor: pointer; font: inherit; }

/* Forms */
.fld-form { display: grid; gap: 14px; margin: 0; }
.fld-field { display: grid; gap: 6px; margin: 0; }
.fld-field label,
.fld-choices legend { font-weight: 600; font-size: 14px; }
.fld-input,
.fld-select {
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid var(--fl-line);
	border-radius: var(--fld-radius-sm);
	background: #fff;
	font: inherit;
	color: var(--fl-ink);
}
.fld-choice .fld-select { width: auto; min-width: 76px; }
.fld-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.fld-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	border: 1px solid var(--fl-line);
	border-radius: var(--fld-radius-sm);
	background: #fff;
}
.fld-choice__label { display: flex; align-items: center; gap: 10px; font-weight: 500; flex-wrap: wrap; }
.fld-choice__label input { width: 18px; height: 18px; accent-color: var(--fl-accent); }
.fld-consent { font-size: 13px; color: var(--fl-muted); margin: 0; }
.fld-consent input { margin-right: 6px; accent-color: var(--fl-accent); }
.fld-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.fld-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.fld-message { margin: 0; padding: 10px 14px; border-radius: var(--fld-radius-sm); font-size: 14px; background: var(--fl-soft); border-left: 3px solid var(--fl-accent); }
.fld-message--success { background: #e7f6ec; border-left-color: var(--fld-ok); }
.fld-message--error { background: #fdecea; border-left-color: var(--fld-bad); }
.fld-message--info { background: #eaf0ff; }
.fld-member-badge { display: inline-block; font-size: 13px; font-weight: 600; color: var(--fld-ok); }
.fld-notice { padding: 10px 14px; border-radius: var(--fld-radius-sm); background: #fff4e0; border: 1px solid #f3d39b; }

/* Swatches */
.fld-swatch {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--fld-swatch, #d9d9d9);
	border: 1px solid rgba(12, 12, 12, .18);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
	flex: none;
}
.fld-swatch--lg { width: 34px; height: 34px; }
.fld-swatches { position: absolute; z-index: 1; left: 12px; bottom: 12px; display: flex; gap: 4px; padding: 5px 7px; border-radius: 999px; background: rgba(255, 255, 255, .92); }

/* Allocation bar */
.fld-alloc {
	position: relative;
	display: flex;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: repeating-linear-gradient(135deg, var(--fl-soft), var(--fl-soft) 6px, #e9e9ee 6px, #e9e9ee 12px);
	border: 1px solid var(--fl-line);
}
.fld-alloc--sm { height: 8px; margin: 10px 0 6px; }
.fld-alloc__sold { background: var(--fl-accent); transition: width .6s ease; }
.fld-alloc__held { background: repeating-linear-gradient(135deg, var(--fl-accent-2), var(--fl-accent-2) 5px, #5a8ef0 5px, #5a8ef0 10px); transition: width .6s ease; }
.fld-allocation { margin: 16px 0; }
.fld-allocation__text { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; font-size: 14px; }

/* Countdown */
.fld-countdown { display: grid; gap: 6px; margin: 12px 0; }
.fld-countdown__label { font-size: 13px; color: var(--fl-muted); text-transform: uppercase; letter-spacing: .06em; }
.fld-countdown__value { display: flex; gap: 8px; flex-wrap: wrap; }
.fld-countdown__cell { display: grid; justify-items: center; min-width: 64px; padding: 8px 10px; border-radius: var(--fld-radius-sm); background: var(--fl-ink); color: #fff; }
.fld-countdown__cell strong { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.fld-countdown__cell small { font-size: 11px; opacity: .75; margin-top: 4px; }

/* Archive */
.fld-archive__intro { max-width: 760px; margin: 0 0 32px; }
.fld-archive__title { font-size: clamp(28px, 4vw, 42px); margin: 0 0 12px; line-height: 1.15; }
.fld-section { margin: 0 0 40px; }
.fld-section__title { font-size: 22px; margin: 0 0 16px; }
.fld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.fld-empty { padding: 24px; border: 1px dashed var(--fl-line); border-radius: var(--fld-radius); color: var(--fl-muted); }

/* Card */
.fld-card { display: flex; flex-direction: column; border: 1px solid var(--fl-line); border-radius: var(--fld-radius); background: #fff; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.fld-card:hover { box-shadow: 0 10px 30px rgba(12, 12, 12, .08); transform: translateY(-2px); }
.fld-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--fl-soft); overflow: hidden; }
.fld-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.fld-grid--feature { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.fld-card--feature { flex-direction: row; }
.fld-card--feature .fld-card__media { flex: 0 0 40%; aspect-ratio: auto; min-height: 260px; }
.fld-card--feature .fld-card__body { padding: 20px 22px; }
.fld-card--feature .fld-card__title { font-size: 21px; }
.fld-card--feature .fld-button { align-self: flex-start; }
.fld-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.fld-card__title { font-size: 18px; line-height: 1.3; margin: 0; }
.fld-card__title a { color: inherit; text-decoration: none; }
.fld-card__title a:hover { color: var(--fl-accent); }
.fld-card__summary { margin: 0; font-size: 14px; color: var(--fl-muted); }
.fld-card__countdown,
.fld-card__result { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: 14px; }
.fld-card__countdown strong { font-variant-numeric: tabular-nums; }
.fld-card__meta { margin: 0 0 8px; font-size: 13px; color: var(--fl-muted); }
.fld-card .fld-button { margin-top: auto; }
.fld-card.fld-status--sold_out .fld-card__media img,
.fld-card.fld-status--ended .fld-card__media img { filter: grayscale(.6); }

/* Single */
.fld-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: start; margin: 0 0 32px; }
.fld-hero__media { border-radius: var(--fld-radius); overflow: hidden; background: var(--fl-soft); aspect-ratio: 1 / 1; }
.fld-hero__img { width: 100%; height: 100%; object-fit: contain; padding: 18px; display: block; }
.fld-hero__title { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; margin: 0 0 10px; }
.fld-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.fld-facts div { padding: 10px 12px; border: 1px solid var(--fl-line); border-radius: var(--fld-radius-sm); }
.fld-facts dt { font-size: 12px; color: var(--fl-muted); text-transform: uppercase; letter-spacing: .05em; }
.fld-facts dd { margin: 2px 0 0; font-weight: 600; }

.fld-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.fld-panel,
.fld-card-box,
.fld-action-box {
	border: 1px solid var(--fl-line);
	border-radius: var(--fld-radius);
	background: #fff;
	padding: 22px;
	margin: 0 0 20px;
}
.fld-panel { border-top: 4px solid var(--fl-accent); }
.fld-panel--sold_out,
.fld-panel--ended { border-top-color: var(--fl-muted); }
.fld-panel__title,
.fld-card-box h2,
.fld-action-box h2 { font-size: 20px; margin: 0 0 10px; }
.fld-action-box { background: #f6f8ff; border-color: #c6d4ff; }
.fld-panel .fld-queue { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--fl-line); }
.fld-panel .fld-waitlist + .fld-queue { margin-top: 24px; }
.fld-panel > .fld-queue:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fld-demand-note { font-size: 14px; padding: 8px 12px; background: var(--fl-soft); border-radius: var(--fld-radius-sm); }
.fld-description { line-height: 1.65; }

.fld-variation-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fld-variation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sw name price" "sw left left"; align-items: center; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fl-line); }
.fld-variation:last-child { border-bottom: 0; }
.fld-variation .fld-swatch { grid-area: sw; }
.fld-variation__name { grid-area: name; display: grid; }
.fld-variation__name small { color: var(--fl-muted); font-size: 12px; }
.fld-variation__price { grid-area: price; font-weight: 600; }
.fld-variation__left { grid-area: left; font-size: 13px; color: var(--fl-muted); }

.fld-checklist { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; font-size: 14px; }
.fld-commit { display: grid; gap: 4px; margin: 14px 0 0; font-size: 13px; }
.fld-hash { display: block; word-break: break-all; font-size: 12px; padding: 6px 8px; border-radius: 6px; background: var(--fl-soft); }

/* Queue */
.fld-queue__opens { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--fld-radius-sm); background: var(--fl-soft); }
.fld-queue__opens strong { font-variant-numeric: tabular-nums; }
.fld-queue-state { padding: 16px; border-radius: var(--fld-radius); background: var(--fl-soft); }
.fld-queue-state h3 { margin: 0 0 6px; font-size: 18px; }
.fld-queue-facts { font-weight: 600; font-variant-numeric: tabular-nums; }
.fld-progress { height: 10px; border-radius: 999px; background: #fff; border: 1px solid var(--fl-line); overflow: hidden; margin: 10px 0; }
.fld-progress span { display: block; height: 100%; background: var(--fl-accent); transition: width .6s ease; }
.fld-expiry { font-weight: 600; color: var(--fld-warn); }
.fld-reserve { margin-top: 10px; }

/* Raffle */
.fld-entry-label { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; padding: 6px 12px; border-radius: var(--fld-radius-sm); background: var(--fl-ink); color: #fff; }
.fld-entry-status { margin-top: 16px; padding: 14px; border-radius: var(--fld-radius-sm); background: var(--fl-soft); }
.fld-entry-status--won,
.fld-entry-status--claimed { background: #e7f6ec; }

/* Results */
.fld-results__head { max-width: 820px; margin: 0 0 24px; }
.fld-record { display: grid; gap: 4px; margin: 0; }
.fld-record dt { font-size: 13px; color: var(--fl-muted); margin-top: 10px; }
.fld-record dd { margin: 0; }
.fld-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.55; }
.fld-order { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; counter-reset: fld-order; }
.fld-order__item { counter-increment: fld-order; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--fl-line); border-radius: var(--fld-radius-sm); font-size: 13px; }
.fld-order__item::before { content: counter(fld-order) "."; font-size: 11px; color: var(--fl-muted); }
.fld-order__no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.fld-order__status { color: var(--fl-muted); font-size: 12px; }
.fld-order__item--claimed,
.fld-order__item--won { border-color: #b9e3c6; background: #f3fbf5; }
.fld-verify__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.fld-verify__item { padding: 4px 8px; border-radius: 6px; background: var(--fl-soft); }
.fld-verify__item--claimed,
.fld-verify__item--won { background: #e7f6ec; }

/* How it works */
.fld-how { margin-top: 48px; padding: 28px; border-radius: var(--fld-radius); background: var(--fl-soft); }
.fld-how h2 { margin: 0 0 18px; font-size: 22px; }
.fld-how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.fld-how__item h3 { font-size: 16px; margin: 0 0 6px; }
.fld-how__item p { margin: 0; font-size: 14px; color: var(--fl-muted); line-height: 1.55; }

/* Product page */
.fld-product-notice { margin: 16px 0; padding: 16px; border: 1px solid #c6d4ff; border-left: 4px solid var(--fl-accent); border-radius: var(--fld-radius); background: #f6f8ff; }
.fld-product-notice p { margin: 0 0 8px; }
.fld-product-notice__countdown { display: flex; gap: 8px; }
.fld-variation-note { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--fld-radius-sm); background: #f6f8ff; font-size: 14px; }
.fld-loop-badge { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: var(--fl-accent, #0A28C3); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* My Account */
.fld-account h3 { margin: 28px 0 10px; font-size: 18px; }
.fld-account .fld-table code { font-size: 12px; }
.fld-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.fld-switch input { accent-color: #0A28C3; }

/* Responsive */
@media (max-width: 960px) {
	.fld-hero,
	.fld-layout { grid-template-columns: minmax(0, 1fr); }
	.fld-hero__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
	.fld-card--feature { flex-direction: column; }
	.fld-card--feature .fld-card__media { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 560px) {
	.fld-page { padding-bottom: 32px; }
	.fld-grid2,
	.fld-facts { grid-template-columns: minmax(0, 1fr); }
	.fld-panel,
	.fld-card-box,
	.fld-action-box { padding: 16px; }
	.fld-countdown__cell { min-width: 56px; }
	.fld-countdown__cell strong { font-size: 22px; }
	.fld-choice { flex-wrap: wrap; }
	.fld-button--xl { width: 100%; }
	.fld-allocation__text { flex-direction: column; gap: 2px; }
	.fld-queue__opens { flex-direction: column; }
}