/*
 * Storefront — inventory states added by the back office (schema 3).
 *
 * A SEPARATE file on purpose. `storefront.css` is a byte-identical copy of the demo's
 * <style> block and `tools/ui-test/fidelity-test.mjs` guards it as such; appending to it
 * would break the one thing that proves the port has not drifted visually. Everything
 * here is additive — no existing selector is redefined — so the shipped design is
 * untouched and an item with no stock data looks exactly as it did in v1.0.0.
 */

/* Out-of-stock / out-for-season flag on a catalogue card. Mirrors the demo's own
   .new badge, in the opposite corner so the two can coexist on one tile. */
#sg-app .card .thumb .oos {
	position: absolute;
	left: 8px;
	top: 8px;
	background: #c8102e;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
	padding: 3px 8px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	z-index: 2;
}

/* An unavailable item stays readable rather than being hidden: the buyer still wants
   to see the SKU and price, they just cannot order it today. */
#sg-app .card:has(.oos) .thumb .pimg {
	filter: saturate(.35) opacity(.65);
}

#sg-app .btn[disabled] {
	opacity: .5;
	cursor: not-allowed;
	filter: grayscale(.4);
}

/* The "min 6" hint beside the Cases label in the product modal. */
#sg-app label.f .hint {
	font-weight: 600;
	opacity: .7;
	font-size: .85em;
}

/* The wholesale gate reuses the demo's empty-category panel, and only needs the
   call-to-action spaced off the copy. */
#sg-app .empty-cat .btn {
	margin-top: 14px;
	display: inline-block;
}

/* One-click reorder banner (v1.10.0). Lives here, not in storefront.css, which stays a
   byte-identical copy of the demo (fidelity-test.mjs). */
.sg-reorder-banner{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:16px 0;padding:12px 16px;border-radius:14px;background:#eaf6ff;border:1px solid #bfe0f5;color:#0b3a5b;font-weight:600}
.sg-reorder-banner.warn{background:#fff4e5;border-color:#f0d2a0;color:#6b4410}
.sg-reorder-banner .sg-reorder-skip{flex-basis:100%;font-weight:400;font-size:13px;opacity:.85}
.sg-reorder-banner .sg-reorder-review{padding:8px 14px;font-size:14px}
.sg-reorder-banner .x{margin-left:auto;background:none;border:0;font-size:18px;line-height:1;cursor:pointer;color:inherit}