/* Wholesale Bulk Order — design tokens
   bg:      #0a0f1a (deep lab-navy)
   surface: #10192b
   border:  #1f2c42
   text:    #e8edf5 / #93a2ba (muted)
   accent:  #2fd6a7 (assay-teal — progress, "your rate")
   warn:    #f2b134 (below-minimum notice)
   heading font: 'Space Grotesk', body: 'Inter', data: 'IBM Plex Mono'
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

.osw-wrap {
	--osw-bg: #0a0f1a;
	--osw-surface: #10192b;
	--osw-surface-2: #0d1524;
	--osw-border: #1f2c42;
	--osw-text: #e8edf5;
	--osw-muted: #8b99b3;
	--osw-accent: #2fd6a7;
	--osw-accent-dim: rgba(47, 214, 167, 0.14);
	--osw-warn: #f2b134;
	--osw-warn-dim: rgba(242, 177, 52, 0.12);
	font-family: 'Inter', sans-serif;
	color: var(--osw-text);
	max-width: 1240px;
	margin: 0 auto;
}

.osw-wrap * { box-sizing: border-box; }

/* ---------- hero ---------- */
.osw-hero {
	background: linear-gradient(160deg, var(--osw-bg) 0%, #0d1730 100%);
	border: 1px solid var(--osw-border);
	border-radius: 20px;
	padding: 48px 40px;
	margin-bottom: 28px;
}
.osw-eyebrow {
	display: inline-block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--osw-accent);
	background: var(--osw-accent-dim);
	border: 1px solid rgba(47, 214, 167, .35);
	border-radius: 999px;
	padding: 5px 12px;
	margin-bottom: 16px;
}
.osw-hero h1 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	margin: 0 0 12px;
	color: #fff;
}
.osw-hero > p {
	color: var(--osw-muted);
	max-width: 560px;
	margin: 0 0 28px;
	line-height: 1.6;
}
.osw-tier-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}
.osw-tier-card {
	position: relative;
	background: var(--osw-surface);
	border: 1px solid var(--osw-border);
	border-radius: 14px;
	padding: 20px 22px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.osw-tier-card.is-current {
	border-color: var(--osw-accent);
	box-shadow: 0 0 0 1px var(--osw-accent) inset;
}
.osw-tier-badge {
	display: none;
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--osw-accent-dim);
	border: 1px solid rgba(47, 214, 167, .4);
	color: var(--osw-accent);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}
.osw-tier-card.is-current .osw-tier-badge { display: inline-block; }
.osw-tier-pct {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 32px;
	color: #fff;
}
.osw-tier-pct span { font-size: 14px; color: var(--osw-muted); margin-left: 4px; }
.osw-tier-min {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--osw-muted);
	margin-top: 6px;
}

/* ---------- body layout ---------- */
.osw-body {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 24px;
	align-items: start;
}
@media (max-width: 860px) {
	.osw-body { grid-template-columns: 1fr; }
}

.osw-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}
.osw-search {
	flex: 1 1 200px;
	background: var(--osw-surface);
	border: 1px solid var(--osw-border);
	border-radius: 10px;
	padding: 11px 14px;
	color: var(--osw-text);
	font-size: 14px;
}
.osw-search:focus { outline: 2px solid var(--osw-accent); outline-offset: 1px; }
.osw-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.osw-filter {
	background: transparent;
	border: 1px solid var(--osw-border);
	color: var(--osw-muted);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all .15s ease;
}
.osw-filter:hover { border-color: var(--osw-accent); color: var(--osw-text); }
.osw-filter.is-active {
	background: var(--osw-text);
	border-color: var(--osw-text);
	color: #0a0f1a;
}

/* ---------- list / grid view toggle ---------- */
.osw-view-toggle {
	display: flex;
	gap: 2px;
	background: var(--osw-surface);
	border: 1px solid var(--osw-border);
	border-radius: 10px;
	padding: 3px;
	flex-shrink: 0;
}
.osw-view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: transparent;
	border: none;
	border-radius: 7px;
	color: var(--osw-muted);
	cursor: pointer;
	transition: all .15s ease;
}
.osw-view-btn:hover { color: var(--osw-text); }
.osw-view-btn.is-active { background: var(--osw-accent-dim); color: var(--osw-accent); }

.osw-product-list { display: flex; flex-direction: column; gap: 10px; }

/* grid layout: cards instead of rows */
.osw-product-list[data-view="grid"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}
.osw-product-list[data-view="grid"] .osw-row {
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	gap: 10px;
	padding: 16px 14px;
}
.osw-product-list[data-view="grid"] .osw-row-img { width: 100%; height: 120px; border-radius: 10px; align-self: center; }
.osw-product-list[data-view="grid"] .osw-row-info { text-align: center; }
.osw-product-list[data-view="grid"] .osw-row-sub { justify-content: center; }
.osw-product-list[data-view="grid"] .osw-stepper { align-self: center; }

.osw-row {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--osw-surface);
	border: 1px solid var(--osw-border);
	border-radius: 12px;
	padding: 12px 16px;
	cursor: pointer;
	transition: border-color .15s ease;
}
.osw-row:hover { border-color: rgba(47, 214, 167, .4); }
.osw-row.has-qty { border-color: var(--osw-accent); }
.osw-row-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #1a2438; flex-shrink: 0; }
.osw-row-info { flex: 1; min-width: 0; }
.osw-row-name { font-weight: 600; font-size: 14.5px; color: #fff; }
.osw-row-sub { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.osw-row-price { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--osw-muted); }
.osw-attr {
	background: var(--osw-bg);
	border: 1px solid var(--osw-border);
	color: var(--osw-text);
	border-radius: 6px;
	padding: 3px 8px;
	font-size: 12px;
	font-family: 'IBM Plex Mono', monospace;
	cursor: pointer;
}

.osw-stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--osw-border); border-radius: 10px; overflow: hidden; flex-shrink: 0; cursor: default; }
.osw-step {
	background: var(--osw-surface-2);
	border: none;
	color: var(--osw-text);
	width: 32px;
	height: 34px;
	font-size: 16px;
	cursor: pointer;
}
.osw-step:hover { background: var(--osw-accent-dim); color: var(--osw-accent); }
.osw-qty {
	width: 48px;
	height: 34px;
	text-align: center;
	background: var(--osw-bg);
	border: none;
	border-left: 1px solid var(--osw-border);
	border-right: 1px solid var(--osw-border);
	color: var(--osw-text);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
}
.osw-qty::-webkit-outer-spin-button, .osw-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.osw-empty { color: var(--osw-muted); font-size: 14px; padding: 20px 4px; }

/* ---------- bulk order panel ---------- */
.osw-panel {
	background: var(--osw-surface);
	border: 1px solid var(--osw-border);
	border-radius: 16px;
	padding: 22px;
	position: sticky;
	top: 20px;
}
.osw-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.osw-panel-head h3 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; margin: 0; color: #fff; }
#osw-vial-count { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--osw-accent); }

.osw-progress-wrap { margin-bottom: 18px; }
.osw-progress-label { font-size: 12.5px; color: var(--osw-muted); display: flex; justify-content: space-between; margin-bottom: 8px; }
.osw-progress-label strong { color: #fff; }
.osw-progress-bar { height: 6px; border-radius: 999px; background: var(--osw-surface-2); overflow: hidden; }
.osw-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #1fb8f0, var(--osw-accent)); transition: width .25s ease; }
.osw-progress-next {
	font-size: 12px;
	color: var(--osw-accent);
	margin-top: 8px;
}
.osw-progress-next.is-warning {
	background: var(--osw-warn-dim);
	border: 1px solid rgba(242, 177, 52, .4);
	color: var(--osw-warn);
	padding: 9px 11px;
	border-radius: 8px;
	font-weight: 600;
}

.osw-items { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--osw-border); border-bottom: 1px solid var(--osw-border); padding: 10px 0; margin-bottom: 16px; }
.osw-item-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 2px; font-size: 13px; }
.osw-item-name { grid-column: 1 / -1; font-weight: 500; color: #fff; }
.osw-item-meta { color: var(--osw-muted); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.osw-item-total { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--osw-text); }

.osw-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.osw-total-row span { color: var(--osw-muted); font-size: 14px; }
.osw-total-row strong { font-family: 'Space Grotesk', sans-serif; font-size: 24px; color: #fff; }

.osw-checkout-btn {
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 10px;
	background: var(--osw-accent);
	color: #06231b;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: opacity .15s ease, transform .1s ease;
}
.osw-checkout-btn:hover:not(:disabled) { opacity: .9; }
.osw-checkout-btn:active:not(:disabled) { transform: scale(.98); }
.osw-checkout-btn:disabled { background: var(--osw-surface-2); color: var(--osw-muted); cursor: not-allowed; }