/* ==========================================================================
   Orien Biolabs — theme stylesheet
   Ported from the Orien storefront mock-up (orien-guide/…/mockup).
   Tokens match the style guide's Global Colors; IBM Plex Sans everywhere,
   IBM Plex Mono for prices, SKUs and labels; 3px buttons, 44–48px tall.
   Layout is mostly fluid (flex-wrap / auto-fill grids) like the mockup;
   a few media queries handle header and spacing on phones.
   ========================================================================== */

:root {
	--ob-navy: #0B1F3A;
	--ob-navy-hover: #1B3358;
	--ob-navy-line: #23395C;
	--ob-accent: #0B7A75;
	--ob-accent-on-dark: #2DD4BF;
	--ob-accent-light: #5EEAD4;
	--ob-text: #334155;
	--ob-muted: #475569;
	--ob-muted-2: #64748B;
	--ob-slate-300: #94A3B8;
	--ob-border: #CBD5E1;
	--ob-hairline: #E2E8F0;
	--ob-row: #F1F5F9;
	--ob-surface: #F6F8FA;
	--ob-white: #FFFFFF;
	--ob-on-navy: #CBD5E1;
	--ob-on-navy-2: #B6C2D2;
	--ob-on-navy-3: #D7DEE8;
	--ob-blue: #2F5BD3;
	--ob-blue-dark: #1E3A8A;
	--ob-blue-bg: #EEF3FF;
	--ob-blue-line: #C7D5F5;

	--ob-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ob-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--ob-radius: 3px;
	--ob-radius-box: 4px;
	--ob-wrap: 1200px;
	--ob-gutter: 20px;
	--ob-header-h: 68px;
}

/* --------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ob-white);
	color: var(--ob-navy);
	font: 400 16px/1.5 var(--ob-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ob-accent); text-underline-offset: 3px; }
a:hover { color: var(--ob-navy); }

input, select, textarea, button { font-family: inherit; }

input:focus, select:focus, textarea:focus { outline: 2px solid var(--ob-accent); outline-offset: 0; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }

h1, h2, h3, h4 { color: var(--ob-navy); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.ob-skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	z-index: 200; top: 8px; left: 8px; padding: 10px 14px;
	background: var(--ob-white); color: var(--ob-navy); border: 2px solid var(--ob-accent);
}

.ob-site { min-height: 100vh; display: flex; flex-direction: column; background: var(--ob-white); }
.ob-main { flex: 1; }

.ob-wrap {
	width: 100%;
	max-width: var(--ob-wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ob-gutter);
	padding-right: var(--ob-gutter);
}

.ob-mono { font-family: var(--ob-mono); }
.ob-strong { font-weight: 600; }
.ob-muted { color: var(--ob-muted); }
.ob-muted-2 { color: var(--ob-text); }
.ob-break { word-break: break-all; }

.ob-eyebrow {
	font: 500 12px/1 var(--ob-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ob-accent);
}
.ob-eyebrow--light { color: var(--ob-accent-light); }
.ob-eyebrow--dark-bg { color: var(--ob-accent-on-dark); }

.ob-label {
	display: block;
	margin: 0;
	font: 600 12px/1 var(--ob-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ob-navy);
}

.ob-h2 { margin: 0; font: 600 30px/1.15 var(--ob-sans); letter-spacing: -.01em; }

.ob-link-strong { font: 500 14px/1 var(--ob-sans); text-decoration: underline; text-underline-offset: 3px; }

.ob-disclaimer { margin: 0; font: 400 12px/1.5 var(--ob-sans); color: var(--ob-muted-2); }

.ob-empty { color: var(--ob-muted); font-size: 15px; }
.ob-empty-box {
	padding: 48px 20px; text-align: center;
	border: 1px dashed var(--ob-border); border-radius: var(--ob-radius-box);
	font: 400 15px/1.5 var(--ob-sans); color: var(--ob-muted);
}

/* --------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */

.ob-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: var(--ob-radius);
	font: 500 14px/1 var(--ob-sans);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s, border-color .15s, color .15s;
}
.ob-btn--lg { height: 48px; padding: 0 24px; font-size: 15px; }
.ob-btn--sm { height: 40px; padding: 0 16px; font-size: 13px; }
.ob-btn--xs { height: 34px; padding: 0 12px; font-size: 12.5px; }
.ob-btn--block { display: flex; width: 100%; }

.ob-btn--primary { background: var(--ob-navy); border-color: var(--ob-navy); color: var(--ob-white); }
.ob-btn--primary:hover { background: var(--ob-navy-hover); border-color: var(--ob-navy-hover); color: var(--ob-white); }
.ob-btn--primary.is-added { background: var(--ob-accent); border-color: var(--ob-accent); }

.ob-btn--outline { background: var(--ob-white); border-color: var(--ob-border); color: var(--ob-navy); }
.ob-btn--outline:hover { border-color: var(--ob-navy); color: var(--ob-navy); }

.ob-btn--white { background: var(--ob-white); border-color: var(--ob-white); color: var(--ob-navy); }
.ob-btn--white:hover { background: var(--ob-hairline); border-color: var(--ob-hairline); color: var(--ob-navy); }

.ob-btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.65); color: var(--ob-white); }
.ob-btn--ghost-light:hover { border-color: var(--ob-white); color: var(--ob-white); }

.ob-btn--disabled,
.ob-btn:disabled { background: var(--ob-row); border-color: var(--ob-hairline); color: var(--ob-muted-2); cursor: not-allowed; }

/* WooCommerce appends "View cart" after AJAX add — the header count and
   the "Added ✓" label already confirm it. */
.ob-card .added_to_cart { display: none; }
.ob-btn.loading { opacity: .7; pointer-events: none; }

/* --------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------ */

.ob-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 8px;
	border-radius: 2px;
	font: 500 10.5px/1 var(--ob-mono);
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ob-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ob-badge__square { width: 6px; height: 6px; background: var(--ob-accent); }

.ob-badge--stock.badge--instock, .ob-badge--instock { background: #E7F6EC; color: #166534; }
.badge--instock .ob-badge__dot, .ob-badge--instock .ob-badge__dot { background: #16A34A; }
.ob-badge--stock.badge--lowstock { background: #FEF3C7; color: #92400E; }
.badge--lowstock .ob-badge__dot { background: #D97706; }
.ob-badge--stock.badge--outofstock { background: #FDECEC; color: #991B1B; }
.badge--outofstock .ob-badge__dot { background: #DC2626; }

.ob-badge--us-warehouse { align-self: flex-start; border: 1px solid var(--ob-border); color: var(--ob-navy); }
.ob-badge--lg { height: 24px; padding: 0 9px; font-size: 11px; }

.ob-badge--hold {
	align-self: flex-start; height: 28px; padding: 0 12px; gap: 8px;
	background: #FEF3C7; color: #92400E; font: 600 11.5px/1 var(--ob-mono); letter-spacing: .08em;
}
.ob-badge--hold .ob-badge__dot { width: 7px; height: 7px; background: #D97706; }

/* --------------------------------------------------------------------------
   Logo
   ------------------------------------------------------------------------ */

.ob-logo { display: flex; align-items: center; gap: 10px; color: var(--ob-navy); text-decoration: none; }
.ob-logo:hover { color: var(--ob-navy); }
.ob-logo .ob-mark { flex: none; }
.ob-logo__word { font: 600 15px/1 var(--ob-sans); letter-spacing: .2em; white-space: nowrap; }
.ob-logo__word span { font-weight: 400; color: var(--ob-muted); }
.ob-logo__word--sm { font-size: 13px; }
.ob-logo--light { color: var(--ob-white); }
.ob-logo--light .ob-logo__word { font-size: 14px; }
.ob-logo--light .ob-logo__word span { color: var(--ob-on-navy); }

/* --------------------------------------------------------------------------
   Announcement bar + header
   ------------------------------------------------------------------------ */

.ob-announce {
	background: var(--ob-navy);
	color: var(--ob-hairline);
	font: 500 11.5px/1.4 var(--ob-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ob-announce__inner {
	padding-top: 9px; padding-bottom: 9px;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; text-align: center;
}
.ob-announce__dot { color: var(--ob-accent-on-dark); }

.ob-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--ob-white);
	border-bottom: 1px solid var(--ob-hairline);
}
.admin-bar .ob-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ob-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ob-header { top: 0; } }

.ob-header__bar {
	padding-top: 10px; padding-bottom: 10px;
	min-height: var(--ob-header-h);
	display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px;
}
.ob-header .ob-logo { margin-right: auto; }

/* The same menu renders twice: a right-aligned row when the bar is wider
   than 760px, a full-width scrolling row under the logo when narrower —
   width math instead of breakpoints, as in the mockup. */
.ob-nav { flex: 0 0 auto; min-width: 0; overflow: hidden; }
.ob-nav--desktop { width: calc((100% - 760px) * 999); max-width: 560px; }
.ob-nav--mobile { width: calc((760px - 100%) * 999); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ob-nav--mobile::-webkit-scrollbar { display: none; }

.ob-nav ul { list-style: none; margin: 0; padding: 0; display: flex; white-space: nowrap; }
.ob-nav--desktop ul { justify-content: flex-end; gap: 2px; }
.ob-nav--mobile ul { justify-content: space-between; }

.ob-nav a {
	display: block;
	padding: 10px;
	font: 500 14px/1 var(--ob-sans);
	color: var(--ob-muted);
	text-decoration: none;
	box-shadow: inset 0 -2px 0 transparent;
}
.ob-nav--mobile a { padding: 10px 8px; }
.ob-nav a:hover { color: var(--ob-navy); }
.ob-nav .current-menu-item > a,
.ob-nav .current_page_item > a,
.ob-nav .current-menu-ancestor > a {
	color: var(--ob-navy);
	box-shadow: inset 0 -2px 0 var(--ob-accent);
}

.ob-header-cart {
	flex: none;
	margin-left: 16px;
	display: flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 12px;
	background: var(--ob-white);
	border: 1px solid var(--ob-border);
	border-radius: var(--ob-radius);
	color: var(--ob-navy);
	font: 500 13px/1 var(--ob-sans);
	text-decoration: none;
}
.ob-header-cart:hover { border-color: var(--ob-navy); color: var(--ob-navy); }
.ob-cart-count {
	min-width: 22px; height: 22px; padding: 0 6px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ob-navy); color: var(--ob-white);
	border-radius: 11px; font: 600 11px/1 var(--ob-mono);
}

.ob-kit-notice { background: var(--ob-accent); color: var(--ob-white); }
.ob-kit-notice__inner {
	padding-top: 10px; padding-bottom: 10px;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
	font: 500 12.5px/1.4 var(--ob-mono); letter-spacing: .03em; text-align: center;
}

/* --------------------------------------------------------------------------
   Page banner + home hero
   ------------------------------------------------------------------------ */

.ob-banner,
.ob-hero {
	background-color: var(--ob-navy);
	background-image:
		linear-gradient(90deg, rgba(11,31,58,.92) 0%, rgba(11,31,58,.72) 50%, rgba(11,31,58,.25) 100%),
		var(--ob-banner-image, none);
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
	color: var(--ob-white);
}

.ob-banner__inner {
	padding-top: clamp(44px, 7vw, 72px);
	padding-bottom: clamp(36px, 6vw, 56px);
	display: flex; flex-direction: column; gap: 12px;
}
.ob-banner--lg .ob-banner__inner { padding-top: clamp(48px, 8vw, 88px); padding-bottom: clamp(40px, 7vw, 72px); gap: 16px; }
.ob-banner--sm .ob-banner__inner { padding-top: clamp(36px, 6vw, 56px); padding-bottom: clamp(32px, 5vw, 48px); }

.ob-banner__title { margin: 0; color: var(--ob-white); font: 600 36px/1.1 var(--ob-sans); letter-spacing: -.02em; text-wrap: balance; }
.ob-banner--lg .ob-banner__title { max-width: 760px; font-size: clamp(30px, 4.5vw, 46px); }
.ob-banner--sm .ob-banner__title { font-size: clamp(26px, 4vw, 36px); }
.page-policy .ob-banner__title, .ob-policy-banner .ob-banner__title { font-size: clamp(30px, 4vw, 40px); }
.ob-banner__text { margin: 0; max-width: 640px; font: 400 15px/1.55 var(--ob-sans); color: var(--ob-on-navy); }
.ob-banner--lg .ob-banner__text { font-size: 17px; }
.ob-banner__meta { font: 400 13px/1.4 var(--ob-mono); color: var(--ob-on-navy); }
.ob-banner--sm .ob-banner__meta { font-size: 14px; line-height: 1.5; }

.ob-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 400 12px/1 var(--ob-mono); color: var(--ob-on-navy-2); }
.ob-crumbs a { color: var(--ob-on-navy); text-decoration: none; }
.ob-crumbs a:hover { color: var(--ob-white); }

.ob-hero__inner { padding-top: clamp(64px, 10vw, 128px); padding-bottom: clamp(56px, 9vw, 112px); }
.ob-hero__content { max-width: 640px; display: flex; flex-direction: column; gap: 22px; }
.ob-hero__title { margin: 0; font: 600 clamp(34px, 5vw, 54px)/1.06 var(--ob-sans); letter-spacing: -.02em; color: var(--ob-white); text-wrap: balance; }
.ob-hero__text { margin: 0; max-width: 520px; font: 400 18px/1.55 var(--ob-sans); color: var(--ob-on-navy-3); text-wrap: pretty; }
.ob-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ob-hero__note { margin: 0; font: 400 12.5px/1.5 var(--ob-mono); color: var(--ob-on-navy-2); }

/* --------------------------------------------------------------------------
   Home sections
   ------------------------------------------------------------------------ */

.ob-trust { border-bottom: 1px solid var(--ob-hairline); }
.ob-trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ob-trust__item { padding: 20px 16px; box-shadow: 0 0 0 .5px var(--ob-hairline); display: flex; flex-direction: column; gap: 6px; }
.ob-trust__value { font: 600 22px/1 var(--ob-mono); }
.ob-trust__label { font: 400 13px/1.3 var(--ob-sans); color: var(--ob-muted); }

.ob-section { padding-top: 64px; padding-bottom: 64px; }
.ob-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ob-section__titles { display: flex; flex-direction: column; gap: 10px; }
.ob-section__aside { font: 400 13px/1.4 var(--ob-mono); color: var(--ob-muted); }

.ob-how { background: var(--ob-surface); border-top: 1px solid var(--ob-hairline); border-bottom: 1px solid var(--ob-hairline); }
.ob-how__inner { padding-top: 64px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 28px; }
.ob-how__steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	border: 1px solid var(--ob-hairline); background: var(--ob-white); border-radius: var(--ob-radius-box);
}
.ob-how__steps li { padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 0 0 .5px var(--ob-hairline); }
.ob-how__n { font: 600 13px/1 var(--ob-mono); color: var(--ob-accent); }
.ob-how__title { font: 600 17px/1.3 var(--ob-sans); }
.ob-how__text { font: 400 14px/1.55 var(--ob-sans); color: var(--ob-muted); }

.ob-quality { background: var(--ob-navy); color: var(--ob-white); }
.ob-quality__inner {
	padding-top: 72px; padding-bottom: 72px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px;
}
.ob-quality__copy { display: flex; flex-direction: column; gap: 20px; }
.ob-quality__title { color: var(--ob-white); line-height: 1.2; text-wrap: balance; }
.ob-quality__copy > p { margin: 0; font: 400 16px/1.6 var(--ob-sans); color: var(--ob-on-navy); text-wrap: pretty; }
.ob-quality__steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--ob-navy-line); }
.ob-quality__steps li {
	display: grid; grid-template-columns: 44px 1fr auto; gap: 12px;
	padding: 14px 0; border-bottom: 1px solid var(--ob-navy-line);
	font: 400 14px/1.4 var(--ob-sans);
}
.ob-quality__n { font: 500 12px/1.6 var(--ob-mono); color: var(--ob-accent-on-dark); }
.ob-quality__who { font: 400 12px/1.6 var(--ob-mono); color: var(--ob-slate-300); }
.ob-quality__panel-wrap { align-self: center; min-width: 0; }

.ob-release { background: var(--ob-white); border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius-box); overflow: hidden; color: var(--ob-navy); }
.ob-release__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ob-hairline); }
.ob-release__label { font: 600 12px/1 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; }
.ob-release__date { font: 400 12px/1 var(--ob-mono); color: var(--ob-muted-2); }
.ob-release__table { width: 100%; min-width: 380px; border-collapse: collapse; font: 400 13px/1.3 var(--ob-mono); }
.ob-release__table th { padding: 10px 8px; font-weight: 500; text-align: left; color: var(--ob-muted-2); border-bottom: 1px solid var(--ob-hairline); }
.ob-release__table td { padding: 11px 8px; border-bottom: 1px solid var(--ob-row); color: var(--ob-text); }
.ob-release__table th:first-child, .ob-release__table td:first-child { padding-left: 18px; }
.ob-release__table th:last-child, .ob-release__table td:last-child { padding-right: 18px; }
.ob-release__table .is-num { text-align: right; }
.ob-release__table tbody tr { cursor: pointer; }
.ob-release__table tbody tr:hover { background: var(--ob-surface); }
.ob-release__name a { color: var(--ob-navy); font-weight: 500; text-decoration: none; }
.ob-release__purity { color: var(--ob-navy) !important; }
.ob-release__status { color: var(--ob-muted) !important; }
.ob-release__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 18px; background: var(--ob-surface); font: 400 12px/1.4 var(--ob-sans); color: var(--ob-muted); }
.ob-release__foot a { font-weight: 500; }

.ob-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ob-home-faq { display: flex; flex-wrap: wrap; gap: 40px; }
.ob-home-faq__intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ob-home-faq__intro p { margin: 0; font: 400 15px/1.55 var(--ob-sans); color: var(--ob-muted); }
.ob-home-faq__intro .ob-link-strong { margin-top: 6px; text-decoration: none; }
.ob-home-faq__list { flex: 2 1 520px; min-width: 0; }

/* FAQ accordion */
.ob-faq-list { border-top: 1px solid var(--ob-hairline); }
.ob-faq-list--strong { border-top-color: var(--ob-navy); }
.ob-faq-item { border-bottom: 1px solid var(--ob-hairline); }
.ob-faq-item__q {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 18px 0; background: none; border: 0; cursor: pointer; text-align: left;
	font: 500 16px/1.4 var(--ob-sans); color: var(--ob-navy);
}
.ob-faq-list--strong .ob-faq-item__q { padding: 16px 0; }
.ob-faq-item__sign { flex: none; font: 400 20px/1 var(--ob-mono); color: var(--ob-accent); }
.ob-faq-item__a { max-width: 700px; padding-bottom: 18px; font: 400 15px/1.6 var(--ob-sans); color: var(--ob-text); }
.ob-faq-item__a p { margin: 0 0 10px; }
.ob-faq-item__a p:last-child { margin-bottom: 0; }
.ob-faq-item__a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Product grid + card
   ------------------------------------------------------------------------ */

.ob-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px;
}

.ob-card { display: flex; flex-direction: column; border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius-box); background: var(--ob-white); overflow: hidden; }
.ob-card__image { display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--ob-surface); border-bottom: 1px solid var(--ob-hairline); overflow: hidden; }
.ob-card__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ob-card__meta-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-card__sku { font: 400 11.5px/1 var(--ob-mono); color: var(--ob-muted-2); }
.ob-card__heading { display: flex; flex-direction: column; gap: 4px; }
.ob-card__title { margin: 0; font: 600 16px/1.25 var(--ob-sans); }
.ob-card__title a { color: var(--ob-navy); text-decoration: none; }
.ob-card__title a:hover { color: var(--ob-accent); }
.ob-card__unit { font: 400 13px/1.3 var(--ob-sans); color: var(--ob-muted); }
.ob-card__price { display: flex; flex-direction: column; gap: 2px; }
.ob-card__amount { font: 600 22px/1.1 var(--ob-mono); color: var(--ob-navy); }
.ob-card__per { font: 400 11.5px/1.3 var(--ob-mono); color: var(--ob-muted-2); }
.ob-card__actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.ob-card__coa { text-align: center; font: 500 13px/1 var(--ob-sans); padding: 4px 0; }

.ob-product-img { width: 100%; height: 100%; object-fit: cover; }
.ob-product-img--placeholder {
	display: flex; align-items: center; justify-content: center;
	background:
		repeating-linear-gradient(135deg, transparent 0 10px, rgba(11,31,58,.035) 10px 20px),
		var(--ob-surface);
	opacity: .9;
}

/* --------------------------------------------------------------------------
   Shop archive
   ------------------------------------------------------------------------ */

.ob-shop { padding-top: 32px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.ob-shop__filters { flex: 1 1 220px; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.ob-filter { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ob-filter__title { padding: 0; margin-bottom: 10px; font: 600 12px/1 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ob-navy); }
.ob-filter__opt { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; font: 400 14px/1.3 var(--ob-sans); color: var(--ob-navy); }
.ob-filter__opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--ob-navy); }
.ob-filter__label { flex: 1; }
.ob-filter__count { font: 400 12px/1 var(--ob-mono); color: var(--ob-muted-2); }
.ob-shop__reset { font: 500 13px/1 var(--ob-sans); color: var(--ob-accent); text-decoration: underline; }

.ob-shop__results { flex: 4 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ob-shop__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--ob-hairline); }
.ob-shop__count { font: 400 13px/1 var(--ob-mono); color: var(--ob-muted); }
.ob-shop__sort { margin: 0; }
.ob-shop__sort label { display: flex; align-items: center; gap: 10px; font: 400 13px/1 var(--ob-sans); color: var(--ob-muted); }

.ob-input,
.ob-shop__sort select {
	height: 44px; padding: 0 12px;
	border: 1px solid var(--ob-border); border-radius: var(--ob-radius);
	background: var(--ob-white); color: var(--ob-navy);
	font: 400 15px/1 var(--ob-sans);
	width: 100%;
}
.ob-shop__sort select { height: 40px; padding: 0 10px; font-size: 14px; width: auto; }
textarea.ob-input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ob-input--mono { font-family: var(--ob-mono); }
select.ob-input { padding: 0 10px; }

.woocommerce-pagination ul { list-style: none; display: flex; gap: 6px; padding: 0; margin: 12px 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 10px;
	border: 1px solid var(--ob-border); border-radius: var(--ob-radius);
	font: 500 13px/1 var(--ob-mono); color: var(--ob-navy); text-decoration: none;
}
.woocommerce-pagination .current { background: var(--ob-navy); border-color: var(--ob-navy); color: var(--ob-white); }

/* --------------------------------------------------------------------------
   Single product
   ------------------------------------------------------------------------ */

.ob-pdp {
	padding-top: 32px; padding-bottom: 64px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px; align-items: start;
}
.ob-pdp__media { display: flex; flex-direction: column; gap: 16px; }
.ob-pdp__image { width: 100%; aspect-ratio: 1 / 1; max-width: 560px; border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius-box); overflow: hidden; background: var(--ob-surface); }

.ob-coa-block { border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius-box); padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 560px; }
.ob-coa-block__text { display: flex; flex-direction: column; gap: 6px; }
.ob-coa-block__meta { font: 400 13px/1.5 var(--ob-mono); color: var(--ob-text); }

.ob-pdp__summary { display: flex; flex-direction: column; gap: 20px; }
.ob-pdp__head { display: flex; flex-direction: column; gap: 12px; }
.ob-pdp__badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-pdp__title { margin: 0; font: 600 clamp(30px, 4vw, 40px)/1.1 var(--ob-sans); letter-spacing: -.02em; }
.ob-pdp__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 400 15px/1.4 var(--ob-sans); color: var(--ob-muted); }
.ob-sku { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--ob-border); border-radius: 2px; font: 500 12px/1 var(--ob-mono); color: var(--ob-navy); }
.ob-sku .sku { font-weight: 600; }
.ob-pdp__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--ob-hairline); border-bottom: 1px solid var(--ob-hairline); }
.ob-pdp__amount { font: 600 32px/1 var(--ob-mono); }
.ob-pdp__per { font: 400 13px/1.3 var(--ob-mono); color: var(--ob-muted-2); }

.ob-ruo-box { padding: 14px 16px; background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-radius); display: flex; flex-direction: column; gap: 6px; font: 400 13.5px/1.55 var(--ob-sans); color: var(--ob-text); }
.ob-ruo-box .ob-label { font-size: 11.5px; }

.ob-pdp__ship { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font: 400 13px/1.4 var(--ob-sans); color: var(--ob-muted); }

.ob-pdp__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ob-pdp__qty-label { font: 500 13px/1 var(--ob-sans); color: var(--ob-navy); }
.ob-pdp__buy { display: flex; gap: 12px; flex-wrap: wrap; }
.ob-pdp__add { flex: 1 1 200px; }

.ob-qty { display: flex; align-items: center; border: 1px solid var(--ob-border); border-radius: var(--ob-radius); height: 48px; }
.ob-qty__btn { width: 44px; height: 100%; background: none; border: 0; cursor: pointer; font: 400 18px/1 var(--ob-mono); color: var(--ob-navy); }
.ob-qty__btn:hover { background: var(--ob-surface); }
.ob-qty__field { min-width: 72px; display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; font: 500 15px/1 var(--ob-mono); }
.ob-qty__input {
	width: 3ch; min-width: 2ch; border: 0; padding: 0; background: transparent; text-align: right;
	font: 500 15px/1 var(--ob-mono); color: var(--ob-navy); -moz-appearance: textfield; appearance: textfield;
}
.ob-qty__input::-webkit-outer-spin-button, .ob-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-qty__unit { font-weight: 400; color: var(--ob-muted-2); }

.ob-specs { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--ob-navy); border-bottom: 1px solid var(--ob-hairline); margin-top: 8px; }
.ob-specs__text { display: flex; flex-direction: column; gap: 6px; font: 400 15px/1.4 var(--ob-sans); color: var(--ob-text); }
.ob-specs .ob-link-strong { text-decoration: none; }

/* --------------------------------------------------------------------------
   WooCommerce notices (classic markup)
   ------------------------------------------------------------------------ */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid #F5C26B;
	background: #FFF8EB;
	border-radius: var(--ob-radius);
	font: 500 14px/1.4 var(--ob-sans);
	color: #7A4A00;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
}
.woocommerce-message { border-color: #9ED9B2; background: #EEF9F1; color: #14532D; }
.woocommerce-error { border-color: #F1A7A7; background: #FDF2F2; color: #991B1B; flex-direction: column; align-items: flex-start; }
.woocommerce-message .button, .woocommerce-info .button {
	order: 2; margin-left: auto; color: inherit; font-weight: 600; text-decoration: underline; background: none; border: 0; padding: 0;
}

/* --------------------------------------------------------------------------
   COA Library
   ------------------------------------------------------------------------ */

.ob-page-body { padding-top: 28px; padding-bottom: 64px; }
.ob-coa { display: flex; flex-direction: column; gap: 18px; }
.ob-coa__search { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ob-coa__q { flex: 1 1 280px; width: auto; font-size: 14px; }
.ob-coa__compound { flex: 0 1 240px; width: auto; font-size: 14px; }
.ob-coa__go { height: 44px; }
.ob-coa__count { font: 400 13px/1 var(--ob-mono); color: var(--ob-muted); }

.ob-table-box { border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius-box); overflow: hidden; }
.ob-coa__table { width: 100%; min-width: 640px; border-collapse: collapse; }
.ob-coa__table thead tr { background: var(--ob-surface); text-align: left; }
.ob-coa__table th { padding: 12px 16px; border-bottom: 1px solid var(--ob-hairline); font: 600 11.5px/1 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ob-text); text-align: left; }
.ob-coa__table td { padding: 13px 16px; border-bottom: 1px solid var(--ob-row); font: 400 13px/1.3 var(--ob-mono); color: var(--ob-navy); }
.ob-coa__table td:last-child { padding-top: 9px; padding-bottom: 9px; }
.ob-coa__table tbody tr:hover { background: var(--ob-surface); }
.ob-coa__table .is-num { text-align: right; }
.ob-coa__name { font: 500 14px/1.3 var(--ob-sans) !important; }
.ob-coa__name a { color: var(--ob-navy); text-decoration: none; }
.ob-coa__name a:hover { color: var(--ob-accent); }
.ob-coa__purity { font-weight: 500 !important; }
.ob-coa__none { padding: 40px 20px; text-align: center; font: 400 14px/1.5 var(--ob-sans); color: var(--ob-muted); }
.ob-coa + .ob-disclaimer, .ob-coa .ob-disclaimer { font-size: 12.5px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   About
   ------------------------------------------------------------------------ */

.ob-pillars {
	padding-top: 56px; padding-bottom: 56px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px;
	border-bottom: 1px solid var(--ob-hairline);
}
.ob-pillar { padding: 20px 0 8px; border-top: 1px solid var(--ob-navy); display: flex; flex-direction: column; gap: 12px; }
.ob-pillar__n { font: 600 13px/1 var(--ob-mono); color: var(--ob-accent); }
.ob-pillar h2 { margin: 0; font: 600 20px/1.25 var(--ob-sans); }
.ob-pillar p { margin: 0; font: 400 15px/1.6 var(--ob-sans); color: var(--ob-muted); }

.ob-about-media { padding-top: 56px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 40px; }
.ob-about-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ob-about-figure img { width: 100%; height: auto; min-height: 220px; object-fit: cover; border-radius: var(--ob-radius-box); border: 1px solid var(--ob-hairline); }
.ob-about-figure figcaption { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 400 12.5px/1.4 var(--ob-mono); color: var(--ob-muted); }

/* --------------------------------------------------------------------------
   FAQ page
   ------------------------------------------------------------------------ */

.ob-faq { padding-top: 32px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.ob-faq__side { flex: 1 1 200px; align-self: stretch; }
.ob-faq__index { position: sticky; top: calc(var(--ob-header-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.ob-faq__index a { padding: 8px 0; font: 400 14px/1.3 var(--ob-sans); color: var(--ob-muted); text-decoration: none; }
.ob-faq__index a:hover { color: var(--ob-navy); }
.ob-faq__groups { flex: 4 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.ob-faq__group { display: flex; flex-direction: column; scroll-margin-top: 96px; }
.ob-faq__group-title { margin: 0 0 6px; font: 600 12px/1 var(--ob-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ob-accent); }

/* --------------------------------------------------------------------------
   Contact + forms
   ------------------------------------------------------------------------ */

.ob-contact { padding-top: 48px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.ob-contact__main { flex: 3 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ob-contact__side { flex: 2 1 300px; display: flex; flex-direction: column; border-top: 1px solid var(--ob-navy); }
.ob-contact__row { padding: 16px 0; border-bottom: 1px solid var(--ob-hairline); display: flex; flex-direction: column; gap: 6px; }
.ob-contact__row:last-child { border-bottom: 0; }
.ob-contact__k { font: 400 12px/1 var(--ob-sans); color: var(--ob-muted); }
.ob-contact__email { font: 500 15px/1.3 var(--ob-mono); }
.ob-contact__v { font: 500 15px/1.3 var(--ob-sans); }
.ob-contact__p { font: 400 14px/1.5 var(--ob-sans); color: var(--ob-text); }

.ob-form { display: flex; flex-direction: column; gap: 14px; }
.ob-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ob-field { display: flex; flex-direction: column; gap: 6px; font: 500 13px/1 var(--ob-sans); color: var(--ob-navy); }
.ob-field__opt { font-weight: 400; color: var(--ob-muted-2); }
.ob-form .ob-btn { align-self: flex-start; }
.ob-form__error { font: 500 13px/1.4 var(--ob-sans); color: #991B1B; }
.ob-note { padding: 12px 14px; border: 1px solid var(--ob-border); background: var(--ob-surface); border-radius: var(--ob-radius); font: 500 13.5px/1.5 var(--ob-sans); color: var(--ob-navy); }
.ob-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ob-alert { padding: 20px; border-radius: var(--ob-radius-box); display: flex; flex-direction: column; gap: 6px; }
.ob-alert--success { border: 1px solid #9ED9B2; background: #EEF9F1; }
.ob-alert--success strong { font: 600 15px/1.3 var(--ob-sans); color: #166534; }
.ob-alert--success span { font: 400 14px/1.5 var(--ob-sans); color: #14532D; }
.ob-alert--error { border: 1px solid #F1A7A7; background: #FDF2F2; color: #991B1B; }

/* --------------------------------------------------------------------------
   Prose (generic page content) + policy pages
   ------------------------------------------------------------------------ */

.ob-prose { max-width: 760px; font: 400 15.5px/1.7 var(--ob-sans); color: var(--ob-text); }
.ob-prose h2 { font: 600 22px/1.3 var(--ob-sans); margin: 32px 0 12px; }
.ob-prose h3 { font: 600 18px/1.3 var(--ob-sans); margin: 24px 0 10px; }
.ob-prose p, .ob-prose ul, .ob-prose ol { margin: 0 0 14px; }

.ob-policy { padding-top: 36px; padding-bottom: 72px; }
.ob-policy__body { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.ob-policy__intro { margin: 0; font: 400 17px/1.65 var(--ob-sans); color: var(--ob-navy); text-wrap: pretty; }
.ob-policy__lead { font: 400 17px/1.65 var(--ob-sans); color: var(--ob-navy); }
.ob-policy__lead p { margin: 0 0 12px; }
.ob-policy__section { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--ob-hairline); scroll-margin-top: 96px; }
.ob-policy__section h2 { margin: 0; display: flex; gap: 14px; font: 600 19px/1.3 var(--ob-sans); }
.ob-policy__n { font: 500 14px/1.7 var(--ob-mono); color: var(--ob-accent); }
.ob-policy__section p,
.ob-policy__section li { margin: 0; font: 400 15.5px/1.7 var(--ob-sans); color: var(--ob-text); text-wrap: pretty; }
.ob-policy__section ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* --------------------------------------------------------------------------
   Cart & Checkout (WooCommerce Blocks) — restyled to the mockup
   ------------------------------------------------------------------------ */

.ob-wc-page { padding-top: 40px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 24px; }
.ob-wc-page__head { display: flex; flex-direction: column; gap: 8px; }
.ob-wc-page__title { margin: 0; font: 600 36px/1.1 var(--ob-sans); letter-spacing: -.02em; }
.ob-wc-page__sub { font: 400 14px/1.4 var(--ob-sans); color: var(--ob-muted); }

.ob-wc-page .wp-block-woocommerce-cart,
.ob-wc-page .wp-block-woocommerce-checkout { margin: 0; max-width: none; }

.ob-wc-page,
.ob-wc-page .wc-block-components-text-input input,
.ob-wc-page .wc-block-components-combobox input,
.ob-wc-page .wc-blocks-components-select__select,
.ob-wc-page textarea { font-family: var(--ob-sans); }

/* WooCommerce sizes main/sidebar as 65% / 35% and wraps them, so the
   gutter must come from padding — a flex `gap` pushes the sidebar under
   the form. */
.ob-wc-page .wc-block-components-sidebar-layout { margin: 0; }
.ob-wc-page .wc-block-components-sidebar-layout.is-large .wc-block-components-main,
.ob-wc-page .wc-block-components-sidebar-layout.is-medium .wc-block-components-main { padding-right: 32px; }
.ob-wc-page .wc-block-components-sidebar { padding-left: 0; padding-right: 0; }

/* Summary = one light-gray "Order summary" card (the block's own box). */
.ob-wc-page .wp-block-woocommerce-checkout-order-summary-block,
.ob-wc-page .wp-block-woocommerce-cart-order-summary-block {
	padding: 6px 22px 22px;
	border: 1px solid var(--ob-hairline) !important;
	border-radius: var(--ob-radius-box);
	background: var(--ob-surface);
}
.ob-wc-page .wc-block-components-sidebar .wc-block-components-checkout-order-summary__content,
.ob-wc-page .wc-block-components-sidebar .wc-block-components-order-summary { border: 0 !important; }
.ob-wc-page .wc-block-checkout__sidebar.is-sticky { top: calc(var(--ob-header-h) + 20px); }
.ob-wc-page .wc-block-components-sidebar .wc-block-components-panel,
.ob-wc-page .wc-block-components-sidebar .wc-block-components-totals-wrapper { padding-left: 0; padding-right: 0; border-color: var(--ob-hairline); }
.ob-wc-page .wc-block-cart__totals-title,
.ob-wc-page .wc-block-components-checkout-order-summary__title-text,
.ob-wc-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font: 600 12px/1 var(--ob-mono) !important;
	letter-spacing: .08em; text-transform: uppercase; color: var(--ob-navy);
}
.ob-wc-page .wc-block-components-totals-item { font: 400 14px/1.4 var(--ob-sans); }
.ob-wc-page .wc-block-components-totals-item__label { color: var(--ob-muted); }
.ob-wc-page .wc-block-components-totals-item__value,
.ob-wc-page .wc-block-components-formatted-money-amount,
.ob-wc-page .wc-block-components-product-price { font-family: var(--ob-mono); }
.ob-wc-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.ob-wc-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--ob-navy); font-weight: 600; font-size: 17px; }

/* Cart line items */
.ob-wc-page .wc-block-cart-items { border-top: 1px solid var(--ob-navy); border-bottom: 0; }
.ob-wc-page .wc-block-cart-items__header { font: 600 11.5px/1 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ob-text); }
.ob-wc-page .wc-block-cart-items td { border-top: 0 !important; border-bottom: 1px solid var(--ob-hairline) !important; padding-top: 18px !important; padding-bottom: 18px !important; }
.ob-wc-page .wc-block-cart-item__image img { border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius); background: var(--ob-surface); }
.ob-wc-page .wc-block-components-product-name { font: 600 16px/1.3 var(--ob-sans); color: var(--ob-navy); text-decoration: none; }
.ob-wc-page .wc-block-components-product-metadata { font: 400 12.5px/1.3 var(--ob-mono); color: var(--ob-muted); }
.ob-wc-page .wc-block-components-product-details__name { display: none; }
.ob-wc-page .wc-block-components-quantity-selector { border: 1px solid var(--ob-border); border-radius: var(--ob-radius); height: 38px; }
.ob-wc-page .wc-block-components-quantity-selector::after { display: none; }
.ob-wc-page .wc-block-components-quantity-selector input { font: 500 13px/1 var(--ob-mono); color: var(--ob-navy); }
.ob-wc-page .wc-block-components-quantity-selector button { color: var(--ob-navy); font-family: var(--ob-mono); }
.ob-wc-page .wc-block-cart-item__remove-link { font: 400 13px/1 var(--ob-sans) !important; color: var(--ob-muted) !important; text-decoration: underline !important; }
.ob-wc-page .wc-block-cart-item__total { font: 600 16px/1 var(--ob-mono); }

/* Buttons */
.ob-wc-page .wc-block-components-button:not(.is-link),
.ob-wc-page .wc-block-cart__submit-button,
.ob-wc-page .wc-block-components-checkout-place-order-button {
	min-height: 48px;
	background: var(--ob-navy) !important;
	color: var(--ob-white) !important;
	border: 1px solid var(--ob-navy) !important;
	border-radius: var(--ob-radius) !important;
	font: 500 15px/1 var(--ob-sans) !important;
	box-shadow: none !important;
	text-decoration: none;
}
.ob-wc-page .wc-block-components-button:not(.is-link):hover { background: var(--ob-navy-hover) !important; border-color: var(--ob-navy-hover) !important; }
.ob-wc-page .wc-block-components-button.is-link { color: var(--ob-accent); }
.ob-wc-page .wc-block-components-checkout-return-to-cart-button { color: var(--ob-accent); font: 500 14px/1 var(--ob-sans); }

/* Steps / fieldsets: "01 · Contact" style legends */
.ob-wc-page .wc-block-components-checkout-step__title,
.ob-wc-page .wc-block-components-checkout-step .wc-block-components-title {
	font: 600 12px/1 var(--ob-mono) !important;
	letter-spacing: .08em; text-transform: uppercase; color: var(--ob-navy);
}
.ob-wc-page .wc-block-checkout__form { counter-reset: ob-step; }
.ob-wc-page .wc-block-components-checkout-step:not(.wc-block-checkout__order-notes) { counter-increment: ob-step; }
.ob-wc-page .wc-block-components-checkout-step:not(.wc-block-checkout__order-notes) .wc-block-components-checkout-step__title::before { content: counter(ob-step, decimal-leading-zero) " · "; }
.ob-wc-page .wc-block-components-checkout-step__container::after { display: none; }
.ob-wc-page .wc-block-components-checkout-step { padding-left: 0 !important; }
.ob-wc-page .wc-block-components-checkout-step__heading { margin-bottom: 14px; }
.ob-wc-page .wc-block-components-checkout-step__description { font: 400 13px/1.5 var(--ob-sans); color: var(--ob-muted); }

/* Inputs */
.ob-wc-page .wc-block-components-text-input input,
.ob-wc-page .wc-block-components-combobox .wc-block-components-combobox-control input,
.ob-wc-page .wc-blocks-components-select .wc-blocks-components-select__select,
.ob-wc-page .wc-block-components-textarea {
	border: 1px solid var(--ob-border) !important;
	border-radius: var(--ob-radius) !important;
	background: var(--ob-white) !important;
	color: var(--ob-navy) !important;
	font-size: 15px !important;
	box-shadow: none !important;
}
.ob-wc-page .wc-block-components-text-input.is-active input,
.ob-wc-page .wc-block-components-text-input input:focus { border-color: var(--ob-accent) !important; outline: 2px solid var(--ob-accent); outline-offset: -1px; }
.ob-wc-page .wc-block-components-text-input label,
.ob-wc-page .wc-blocks-components-select__label { color: var(--ob-muted-2); }

/* Shipping method → navy selected card like the mockup */
.ob-wc-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted,
.ob-wc-page .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked {
	background: var(--ob-navy); color: var(--ob-white); border-radius: var(--ob-radius-box); box-shadow: none;
}
.ob-wc-page .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__secondary-label,
.ob-wc-page .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__description { color: var(--ob-on-navy); }
.ob-wc-page .wc-block-components-radio-control__option { font: 600 15px/1.2 var(--ob-sans); }
.ob-wc-page .wc-block-components-radio-control__input:checked { border-color: var(--ob-navy); }
.ob-wc-page .wc-block-components-radio-control__input:checked::before { background: var(--ob-navy); }
.ob-wc-page .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__input:checked { border-color: var(--ob-accent-on-dark); }
.ob-wc-page .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__input:checked::before { background: var(--ob-accent-on-dark); }

/* Payment methods: bordered option tiles */
.ob-wc-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--ob-border) !important;
	border-radius: var(--ob-radius-box) !important;
	margin-bottom: 10px;
	box-shadow: none !important;
	background: var(--ob-white);
}
.ob-wc-page .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--ob-navy) !important; background: var(--ob-surface);
}
.ob-wc-page .wc-block-checkout__payment-method .wc-block-components-radio-control__label { font: 600 14px/1.2 var(--ob-sans); color: var(--ob-navy); }

/* Checkboxes (acknowledgements + others) */
.ob-wc-page .wc-block-components-checkbox { font: 400 13.5px/1.5 var(--ob-sans); color: var(--ob-navy); }
.ob-wc-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border-color: var(--ob-border); border-radius: 2px; }
.ob-wc-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--ob-navy); border-color: var(--ob-navy); }
.ob-wc-page .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--ob-white); }

/* Acknowledgements card ("Required acknowledgements") */
.ob-wc-page .wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__title,
.ob-wc-page .wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__heading { display: none; }
.ob-wc-page .wp-block-woocommerce-checkout-additional-information-block { counter-increment: none !important; }
.ob-wc-page .wp-block-woocommerce-checkout-additional-information-block .wc-block-components-address-form,
.ob-wc-page .wp-block-woocommerce-checkout-additional-information-block .wc-block-checkout__additional-fields {
	display: flex; flex-direction: column; gap: 12px;
	padding: 16px; background: var(--ob-white);
	border: 1px solid var(--ob-border); border-radius: var(--ob-radius-box);
}
.ob-wc-page .wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkbox { margin: 0 !important; }
.ob-acks-first::before {
	content: attr(data-ob-heading);
	display: block; margin-bottom: 12px;
	font: 600 11px/1 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ob-navy);
}

/* Notices inside blocks */
.ob-wc-page .wc-block-components-notice-banner { border-radius: var(--ob-radius); font: 500 13.5px/1.45 var(--ob-sans); }
.ob-wc-page .wc-block-components-notice-banner.is-error { border-color: #F1A7A7; background: #FDF2F2; color: #991B1B; }
.ob-wc-page .wc-block-components-validation-error { color: #991B1B; }

/* Empty cart */
.ob-wc-page .wc-block-cart__empty-cart__title { font: 400 16px/1.5 var(--ob-sans); color: var(--ob-muted); }
.ob-wc-page .wp-block-woocommerce-empty-cart-block {
	padding: 56px 20px; border: 1px dashed var(--ob-border); border-radius: var(--ob-radius-box); text-align: center;
}
.ob-wc-page .wp-block-woocommerce-empty-cart-block .wp-block-separator,
.ob-wc-page .wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title),
.ob-wc-page .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new { display: none; }

/* Under-cart RUO + shipping notes, and the checkout footnote */
.ob-cart-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 32px; align-items: start; }
.ob-cart-foot .ob-ruo-box { background: var(--ob-white); font-size: 12.5px; }
.ob-cart-foot .ob-ruo-box .ob-label { font-size: 11px; }
.ob-cart-foot__ship p { margin: 0 0 8px; font: 400 12px/1.5 var(--ob-sans); color: var(--ob-muted); }
.ob-checkout-foot { max-width: 760px; }
.ob-checkout-foot p { margin: 0 0 8px; font: 400 12px/1.5 var(--ob-sans); color: var(--ob-muted); }

/* --------------------------------------------------------------------------
   Peplaunchpad Manual Payments — instructions + proof upload, on-brand
   ------------------------------------------------------------------------ */

.ob-wc-page .peplaunchpad-manual-payment-description,
.ob-wc-page .peplaunchpad-payment-content-box { font: 400 14px/1.55 var(--ob-sans); color: var(--ob-text); }
.ob-wc-page .peplaunchpad-step__title { font: 600 15px/1.3 var(--ob-sans); color: var(--ob-navy); }
.ob-wc-page .peplaunchpad-step__warning { border-radius: var(--ob-radius); }
.ob-wc-page .peplaunchpad-field label,
.ob-wc-page .peplaunchpad-field-label { font: 500 13px/1.3 var(--ob-sans); color: var(--ob-navy); }
.ob-wc-page .peplaunchpad-field input {
	height: 44px; padding: 0 12px; width: 100%;
	border: 1px solid var(--ob-border); border-radius: var(--ob-radius);
	font: 400 14px/1 var(--ob-mono); color: var(--ob-navy); background: var(--ob-white);
}
.ob-wc-page .peplaunchpad-dropzone { border: 1px dashed var(--ob-border); border-radius: var(--ob-radius-box); background: var(--ob-white); }
.ob-wc-page .peplaunchpad-dropzone:hover { border-color: var(--ob-navy); }
.ob-wc-page .peplaunchpad-dropzone--done { border-style: solid; border-color: #9ED9B2; background: #EEF9F1; }
.ob-wc-page .peplaunchpad-proof-section__title { font: 600 12px/1 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ob-navy); }
/* Orien support runs by email — the plugin's optional Discord username
   field (always the field right before the proof upload) is not used. */
.peplaunchpad-field:has(+ .peplaunchpad-proof-section),
.peplaunchpad-field:has(.peplaunchpad-discord-username) { display: none !important; }

/* Copy-to-clipboard rows used in the payment steps */
.ob-pay-copy {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 8px 0; padding: 10px 12px;
	border: 1px solid var(--ob-border); border-radius: var(--ob-radius); background: var(--ob-white);
}
.ob-pay-copy small { display: block; font: 400 11.5px/1.3 var(--ob-sans); color: var(--ob-muted-2); }
.ob-pay-copy code { font: 500 13.5px/1.4 var(--ob-mono); color: var(--ob-navy); word-break: break-all; background: none; }
.ob-pay-warn { margin: 8px 0; padding: 10px 12px; border: 1px solid #F5C26B; background: #FFF8EB; border-radius: var(--ob-radius); color: #7A4A00; font: 500 13px/1.5 var(--ob-sans); }
.ob-pay-danger { margin: 8px 0; padding: 10px 12px; border: 1px solid #F1A7A7; background: #FDF2F2; border-radius: var(--ob-radius); color: #991B1B; font: 600 13px/1.5 var(--ob-sans); }
.ob-pay-net { margin: 8px 0; padding: 10px 12px; border-left: 3px solid var(--ob-accent); background: var(--ob-surface); font: 400 13px/1.5 var(--ob-sans); }

/* --------------------------------------------------------------------------
   Order Protection — inline card + pop-ups
   ------------------------------------------------------------------------ */

.ob-op-original {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ob-op-card {
	display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start;
	margin: 0 0 24px; padding: 16px;
	border: 1px solid var(--ob-border); border-radius: var(--ob-radius-box);
	background: var(--ob-white); cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.ob-op-card:hover { border-color: var(--ob-navy); }
.ob-op-card.is-active { border-color: var(--ob-blue); background: var(--ob-blue-bg); }
.ob-op-card.is-loading { opacity: .75; cursor: progress; }
.ob-op-card__box {
	width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--ob-border); border-radius: 3px; background: var(--ob-white);
	display: flex; align-items: center; justify-content: center;
}
.ob-op-card.is-active .ob-op-card__box { background: var(--ob-blue); border-color: var(--ob-blue); }
.ob-op-card.is-active .ob-op-card__box::after { content: "✓"; color: var(--ob-white); font: 700 12px/1 var(--ob-mono); }
.ob-op-card__copy { display: flex; flex-direction: column; gap: 4px; }
.ob-op-card__title { font: 600 15px/1.2 var(--ob-sans); color: var(--ob-navy); }
.ob-op-card__desc { font: 400 13px/1.5 var(--ob-sans); color: var(--ob-text); }
.ob-op-card__desc a { font-weight: 500; color: var(--ob-blue); }
.ob-op-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ob-op-card__fee { font: 600 16px/1 var(--ob-mono); color: var(--ob-blue-dark); }
.ob-op-card__tag {
	padding: 4px 8px; border-radius: 2px; background: var(--ob-row); color: var(--ob-navy);
	font: 600 10.5px/1 var(--ob-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.ob-op-card.is-active .ob-op-card__tag { background: var(--ob-blue); color: var(--ob-white); }

html.ob-op-open, html.ob-gate-open { overflow: hidden; }

.ob-op-overlay {
	position: fixed; inset: 0; z-index: 90;
	background: rgba(11,31,58,.62);
	display: flex; align-items: center; justify-content: center;
	padding: 16px; overflow-y: auto;
}
.ob-op-overlay[hidden] { display: none; }
.ob-op-overlay--policy { z-index: 91; }

.ob-op-modal {
	width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto;
	background: var(--ob-white); border-radius: 6px; box-shadow: 0 24px 60px rgba(11,31,58,.35);
}
.ob-op-modal[hidden] { display: none; }
.ob-op-modal--confirm { max-width: 400px; }
.ob-op-modal__head { padding: 24px 24px 20px; background: var(--ob-navy); color: var(--ob-white); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ob-op-modal__icon { width: 48px; height: 48px; border-radius: 10px; background: var(--ob-blue); display: flex; align-items: center; justify-content: center; }
.ob-op-modal__title { font: 700 15px/1.2 var(--ob-mono); letter-spacing: .1em; text-transform: uppercase; }
.ob-op-modal__sub { font: 400 13px/1.4 var(--ob-sans); color: var(--ob-on-navy); }
.ob-op-modal__body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.ob-op-modal__body--center { padding: 24px; text-align: center; }
.ob-op-modal__lead { margin: 0; text-align: center; font: 400 14px/1.6 var(--ob-sans); color: var(--ob-text); }
.ob-op-modal__lead b { color: var(--ob-navy); }
.ob-op-cover {
	list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
	border: 1px solid var(--ob-blue-line); background: var(--ob-blue-bg); border-radius: 6px;
	font: 400 13.5px/1.4 var(--ob-sans); color: var(--ob-text);
}
.ob-op-cover li { display: flex; gap: 10px; align-items: center; }
.ob-op-cover b { color: var(--ob-navy); }
.ob-op-cover__tick { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ob-blue); color: var(--ob-white); display: flex; align-items: center; justify-content: center; font: 700 10px/1 var(--ob-mono); }
.ob-op-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--ob-blue-line); border-radius: 6px; }
.ob-op-price__amt { font: 700 26px/1 var(--ob-mono); color: var(--ob-blue-dark); }
.ob-op-price__tag { padding: 4px 8px; border: 1px solid var(--ob-blue); border-radius: 10px; font: 600 10px/1 var(--ob-mono); letter-spacing: .06em; color: var(--ob-blue-dark); }
.ob-op-price__calc { margin-left: auto; font: 400 12px/1.3 var(--ob-sans); color: var(--ob-muted); }
.ob-op-link { text-align: center; font: 500 13px/1.3 var(--ob-sans); color: var(--ob-blue); text-decoration: none; }
.ob-op-link:hover { color: var(--ob-blue-dark); text-decoration: underline; }
.ob-op-btn { flex-shrink: 0; height: 48px; border-radius: 4px; font: 600 15px/1 var(--ob-sans); cursor: pointer; }
.ob-op-btn--add { background: var(--ob-navy); color: var(--ob-white); border: 0; }
.ob-op-btn--add:hover { background: var(--ob-navy-hover); }
.ob-op-btn--no { height: 46px; background: var(--ob-white); color: var(--ob-navy); border: 1px solid var(--ob-border); font-weight: 500; }
.ob-op-btn--no:hover { border-color: var(--ob-navy); }
.ob-op-modal__fine { text-align: center; font: 400 11.5px/1.5 var(--ob-sans); color: var(--ob-muted-2); }
.ob-op-modal__warn { align-self: center; width: 48px; height: 48px; border-radius: 10px; background: #FEF3C7; display: flex; align-items: center; justify-content: center; }
.ob-op-modal__sure { font: 600 19px/1.2 var(--ob-sans); color: var(--ob-navy); }
.ob-op-modal__muted { margin: 0; font: 400 13.5px/1.55 var(--ob-sans); color: var(--ob-muted); }
.ob-op-modal__text { margin: 0; font: 400 14px/1.55 var(--ob-sans); color: var(--ob-text); }
.ob-op-lose {
	list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
	border: 1px solid var(--ob-hairline); background: var(--ob-surface); border-radius: 6px;
	text-align: left; font: 400 13px/1.45 var(--ob-sans); color: var(--ob-text);
}
.ob-op-lose li { display: flex; gap: 8px; }
.ob-op-lose__x { flex: none; width: 18px; color: #B91C1C; font: 700 13px/1.4 var(--ob-mono); text-align: center; }

.ob-op-modal--policy { max-width: 560px; display: flex; flex-direction: column; overflow: hidden; }
.ob-op-policy__head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; background: var(--ob-navy); color: var(--ob-white); font: 600 16px/1.2 var(--ob-sans); }
.ob-op-policy__close { flex: none; width: 36px; height: 36px; background: transparent; border: 1px solid #3B5478; border-radius: 4px; color: var(--ob-white); font: 400 18px/1 var(--ob-mono); cursor: pointer; }
.ob-op-policy__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.ob-op-policy__body p { margin: 0; font: 400 13.5px/1.6 var(--ob-sans); color: var(--ob-text); }
.ob-op-policy__body section { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ob-hairline); }
.ob-op-policy__body h3 { margin: 0; display: flex; gap: 10px; font: 600 15px/1.35 var(--ob-sans); color: var(--ob-navy); }
.ob-op-policy__body h3 span:first-child { font: 500 12px/1.9 var(--ob-mono); color: var(--ob-blue); }
.ob-op-policy__foot { flex: none; display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--ob-hairline); background: var(--ob-surface); }
.ob-op-policy__foot .ob-op-btn--add { flex: 1 1 180px; height: 46px; font-size: 14px; }
.ob-op-policy__foot .ob-op-btn--no { flex: 1 1 140px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Thank-you page
   ------------------------------------------------------------------------ */

.ob-thankyou__banner { gap: 14px; }
.ob-thankyou__banner .ob-banner__title { font-size: clamp(28px, 4.5vw, 40px); }
.ob-thankyou__banner .ob-banner__text { max-width: 680px; font-size: 16px; color: var(--ob-on-navy-3); text-wrap: pretty; }
.ob-thankyou__banner .ob-banner__text b { color: var(--ob-white); font-weight: 500; }
.ob-overview {
	list-style: none; margin: 8px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	border: 1px solid var(--ob-hairline); background: var(--ob-white); border-radius: var(--ob-radius-box); color: var(--ob-navy);
}
.ob-overview li { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 0 0 .5px var(--ob-hairline); font: 500 15px/1.2 var(--ob-sans); }
.ob-overview__k { font: 400 12px/1 var(--ob-sans); color: var(--ob-muted); }

.ob-thankyou__body { padding-top: 32px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-start; }
.ob-thankyou__main { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ob-thankyou__side { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ob-thankyou__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.ob-thankyou__q { margin: 0; font: 400 14px/1.5 var(--ob-sans); color: var(--ob-text); }

.ob-box { padding: 20px; border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius-box); display: flex; flex-direction: column; gap: 12px; }
.ob-box--surface { background: var(--ob-surface); gap: 14px; }
.ob-box > h2.ob-label { margin: 0 0 4px; }

.ob-summary { display: flex; flex-direction: column; font: 400 14px/1.4 var(--ob-sans); }
.ob-summary--strong { border-top: 1px solid var(--ob-navy); }
.ob-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ob-hairline); }
.ob-summary__row b { font-weight: 500; }
.ob-summary__row--total { border-bottom: 0; padding-top: 12px; font-weight: 600; font-size: 17px; }

.ob-address { font: normal 400 14px/1.6 var(--ob-sans); color: var(--ob-text); }
.ob-kv { display: flex; flex-direction: column; gap: 4px; }
.ob-kv__k { font: 400 12px/1 var(--ob-sans); color: var(--ob-muted); }
.ob-kv__v { font: 500 14px/1.4 var(--ob-sans); }
.ob-kv__v.ob-mono { font-size: 13.5px; }

.ob-acks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--ob-hairline); }
.ob-acks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ob-hairline); font: 400 14px/1.5 var(--ob-sans); color: var(--ob-navy); }
.ob-acks__tick { width: 20px; height: 20px; border-radius: 3px; background: var(--ob-navy); color: var(--ob-white); display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--ob-mono); }
.ob-acks__links { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 13px/1.4 var(--ob-sans); }
.ob-acks__stamp { font: 400 12px/1.4 var(--ob-mono); color: var(--ob-muted-2); }

.ob-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ob-next li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ob-hairline); font: 400 13.5px/1.5 var(--ob-sans); }
.ob-next li:last-child { border-bottom: 0; }
.ob-next__n { font: 600 12px/1.6 var(--ob-mono); color: var(--ob-accent); }

.ob-thankyou .peplaunchpad-payment-proof { padding: 14px; border: 1px solid #F5C26B; background: #FFF8EB; border-radius: var(--ob-radius); }

/* --------------------------------------------------------------------------
   Age gate
   ------------------------------------------------------------------------ */

.ob-gate {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(11,31,58,.82);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ob-gate[hidden], .ob-gate-exit[hidden] { display: none; }
.ob-gate__panel { width: 100%; max-width: 460px; background: var(--ob-white); border-radius: var(--ob-radius-box); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.ob-gate__copy { display: flex; flex-direction: column; gap: 10px; }
.ob-gate__copy .ob-eyebrow { font-weight: 600; font-size: 11.5px; }
.ob-gate__copy h2 { margin: 0; font: 600 24px/1.25 var(--ob-sans); letter-spacing: -.01em; }
.ob-gate__copy p { margin: 0; font: 400 15px/1.55 var(--ob-sans); color: var(--ob-text); }
.ob-gate__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ob-gate__actions .ob-btn { height: 48px; font-size: 15px; }
.ob-gate__actions .ob-btn--primary { flex: 1 1 160px; }
.ob-gate__actions .ob-btn--outline { flex: 1 1 120px; }
.ob-gate__note { font: 400 12px/1.5 var(--ob-sans); color: var(--ob-muted-2); }
.ob-gate__note a { color: var(--ob-muted); }

.ob-gate-exit {
	position: fixed; inset: 0; z-index: 100; background: var(--ob-navy);
	display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center;
}
.ob-gate-exit__inner { max-width: 420px; display: flex; flex-direction: column; gap: 16px; align-items: center; color: var(--ob-on-navy); }
.ob-gate-exit__brand { font: 600 13px/1 var(--ob-sans); letter-spacing: .2em; color: var(--ob-white); }
.ob-gate-exit p { margin: 0; font: 400 15px/1.6 var(--ob-sans); }
.ob-gate-exit .ob-btn { height: 40px; padding: 0 16px; font-size: 13px; border-color: #3B5478; }

/* --------------------------------------------------------------------------
   RUO band + footer
   ------------------------------------------------------------------------ */

.ob-ruo-band { background: var(--ob-row); border-top: 1px solid var(--ob-border); }
.ob-ruo-band__inner { padding-top: 22px; padding-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.ob-ruo-band__label { font: 600 12px/1.4 var(--ob-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ob-navy); }
.ob-ruo-band p { margin: 0; flex: 1 1 520px; font: 400 13.5px/1.55 var(--ob-sans); color: var(--ob-text); }

.ob-footer { background: var(--ob-navy); color: var(--ob-on-navy); }
.ob-footer__inner { padding-top: 48px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 36px; }
.ob-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 32px; }
.ob-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.ob-footer__tagline { font: 400 13.5px/1.55 var(--ob-sans); }
.ob-footer__email { font: 500 13.5px/1.3 var(--ob-mono); color: var(--ob-accent-on-dark); text-decoration: none; }
.ob-footer__email:hover { color: var(--ob-white); }
.ob-footer__nav { display: flex; flex-direction: column; gap: 10px; }
.ob-footer__heading { margin-bottom: 4px; font: 600 11.5px/1 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ob-white); }
.ob-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob-footer__links a { color: var(--ob-on-navy); text-decoration: none; font: 400 14px/1.3 var(--ob-sans); }
.ob-footer__links a:hover { color: var(--ob-white); }
.ob-footer__disclaimer { margin: 0; padding: 18px 0; border-top: 1px solid var(--ob-navy-line); border-bottom: 1px solid var(--ob-navy-line); font: 400 12.5px/1.65 var(--ob-sans); color: var(--ob-on-navy-2); }
.ob-footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font: 400 12px/1.4 var(--ob-mono); color: var(--ob-slate-300); }

/* --------------------------------------------------------------------------
   404 + misc
   ------------------------------------------------------------------------ */

.ob-404 { display: flex; flex-wrap: wrap; gap: 12px; }
.ob-post-summary { padding: 20px 0; border-bottom: 1px solid var(--ob-hairline); }

/* --------------------------------------------------------------------------
   Phones
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {
	:root { --ob-gutter: 16px; }
	.ob-header-cart { margin-left: 10px; }
	.ob-header-cart > span:not(.ob-cart-count) { display: none; }
	.ob-banner__title { font-size: 30px; }
	.ob-h2 { font-size: 26px; }
	.ob-section, .ob-how__inner { padding-top: 48px; padding-bottom: 48px; }
	.ob-quality__inner { padding-top: 56px; padding-bottom: 56px; }
	.ob-wc-page__title { font-size: 30px; }
	.ob-pdp__buy .ob-qty { flex: 1 1 100%; justify-content: space-between; }
	.ob-form .ob-btn, .ob-hero__actions .ob-btn { width: 100%; }
	.ob-gate__panel { padding: 24px; }
	.ob-op-card { grid-template-columns: 24px minmax(0, 1fr); }
	.ob-op-card__side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* The payment plugin keeps Place Order disabled until a payment screenshot
   is uploaded; say so, instead of a silently dead button. */
.ob-wc-page .wc-block-checkout__actions:has(.wc-block-components-checkout-place-order-button:disabled)::after,
.ob-wc-page .wc-block-checkout__actions:has(.wc-block-components-checkout-place-order-button[aria-disabled="true"])::after {
	content: "Upload your payment screenshot above to enable Place Order.";
	display: block;
	margin-top: 10px;
	text-align: center;
	font: 500 13px/1.4 var(--ob-sans);
	color: #92400E;
}

/* --------------------------------------------------------------------------
   Narrow phones (found in the 320–480px responsive sweep)
   ------------------------------------------------------------------------ */

@media (max-width: 480px) {
	/* The bar wraps onto several lines here; a dot at a line end reads as a stray mark. */
	.ob-announce__dot { display: none; }
	.ob-announce__inner { flex-direction: column; gap: 2px; }

	/* Cart rows: WooCommerce's fixed grid (80px + 132px + 19px + 76px) is
	   wider than a 320px screen; let the details column flex instead. */
	.ob-wc-page .wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; }
	.ob-wc-page .wc-block-cart-items .wc-block-cart-item__image,
	.ob-wc-page .wc-block-cart-items .wc-block-cart-item__image img { width: 56px; }
	.ob-wc-page .wc-block-cart-items .wc-block-cart-item__image { padding-right: 0 !important; }
	.ob-wc-page .wc-block-cart-items .wc-block-cart-item__product { min-width: 0; padding-right: 0 !important; }
	.ob-wc-page .wc-block-cart-items .wc-block-cart-item__total { padding-left: 0 !important; }
	.ob-wc-page .wc-block-cart-item__total .wc-block-components-product-price { font-size: 14px; }
	.ob-wc-page .wc-block-components-product-name { font-size: 15px; word-break: break-word; }
}

@media (max-width: 359px) {
	:root { --ob-gutter: 14px; }
	/* All five menu links on one row at 320px. */
	.ob-nav--mobile a { padding: 10px 5px; font-size: 13px; }
	.ob-logo__word { font-size: 14px; letter-spacing: .16em; }
}

/* The payment plugin's copy-address buttons: a full-size tap target. */
.peplaunchpad-address-copy__btn { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 380px) {
	/* Too narrow for three columns: the line total moves under the details.
	   WooCommerce's own is-mobile grid rules are more specific, hence !important. */
	.ob-wc-page table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 56px minmax(0, 1fr) !important; column-gap: 12px !important; }
	.ob-wc-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { grid-area: 1 / 1 / 3 / 2 !important; }
	.ob-wc-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-area: 1 / 2 / 2 / 3 !important; padding-bottom: 6px !important; }
	.ob-wc-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { grid-area: 2 / 2 / 3 / 3 !important; justify-self: start; padding-top: 0 !important; }
}
}

/* --------------------------------------------------------------------------
   My Account (classic WooCommerce markup): login, lost password, orders
   ------------------------------------------------------------------------ */

.woocommerce-account .ob-prose { max-width: none; }
.woocommerce-account .ob-prose h2 { font: 600 12px/1 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; }

.woocommerce-account .woocommerce-form,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-EditAccountForm {
	max-width: 440px; margin: 0; padding: 24px;
	border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius-box); background: var(--ob-white);
	display: flex; flex-direction: column; gap: 14px;
}
.woocommerce-account .woocommerce-form .form-row,
.woocommerce-account .woocommerce-ResetPassword .form-row,
.woocommerce-account .woocommerce-EditAccountForm .form-row { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.woocommerce-account form label { font: 500 13px/1.3 var(--ob-sans); color: var(--ob-navy); }
.woocommerce-account form .required { color: #B91C1C; text-decoration: none; border: 0; }
.woocommerce-account form .input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"] {
	width: 100%; height: 44px; padding: 0 12px;
	border: 1px solid var(--ob-border); border-radius: var(--ob-radius);
	background: var(--ob-white); color: var(--ob-navy); font: 400 15px/1 var(--ob-sans);
}
.woocommerce-account .password-input { position: relative; display: block; }
.woocommerce-account .show-password-input { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: none; cursor: pointer; }
.woocommerce-account .show-password-input::after { content: "👁"; font-size: 15px; opacity: .55; }
.woocommerce-account .woocommerce-form-login__rememberme { flex-direction: row !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.woocommerce-account .woocommerce-form-login__rememberme input { accent-color: var(--ob-navy); width: 16px; height: 16px; margin: 0; }
.woocommerce-account form .button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 22px; border: 1px solid var(--ob-navy); border-radius: var(--ob-radius);
	background: var(--ob-navy); color: var(--ob-white); font: 500 14px/1 var(--ob-sans); cursor: pointer; text-decoration: none;
}
.woocommerce-account form .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover { background: var(--ob-navy-hover); color: var(--ob-white); }
.woocommerce-account .woocommerce-form-login .form-row:has(.button) { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.woocommerce-account .lost_password { margin: 0; font: 500 13px/1 var(--ob-sans); }
.woocommerce-account .h-captcha { margin: 2px 0; }
.woocommerce-account .clear { display: none; }

/* Logged-in account: side nav + content */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { flex: 1 1 100%; }
.woocommerce-MyAccount-navigation { flex: 1 1 200px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ob-navy); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--ob-hairline); }
.woocommerce-MyAccount-navigation a { display: block; padding: 12px 0; font: 500 14px/1.2 var(--ob-sans); color: var(--ob-muted); text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { color: var(--ob-navy); }
.woocommerce-MyAccount-navigation .is-active a { box-shadow: inset 3px 0 0 var(--ob-accent); padding-left: 12px; }
.woocommerce-MyAccount-content { flex: 4 1 520px; min-width: 0; font: 400 15px/1.6 var(--ob-sans); color: var(--ob-text); }
.woocommerce-MyAccount-content table,
.woocommerce-account .woocommerce-table {
	width: 100%; border-collapse: collapse; border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius-box); overflow: hidden; font: 400 14px/1.4 var(--ob-sans);
}
.woocommerce-MyAccount-content th { padding: 12px 14px; background: var(--ob-surface); text-align: left; font: 600 11.5px/1 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ob-text); border-bottom: 1px solid var(--ob-hairline); }
.woocommerce-MyAccount-content td { padding: 12px 14px; border-bottom: 1px solid var(--ob-row); vertical-align: middle; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a { font-family: var(--ob-mono); font-weight: 600; }
.woocommerce-MyAccount-content mark { background: none; color: var(--ob-navy); font-weight: 600; }
.woocommerce-MyAccount-content address { font-style: normal; padding: 16px; border: 1px solid var(--ob-hairline); border-radius: var(--ob-radius-box); }
@media (max-width: 600px) {
	.woocommerce-MyAccount-content table.shop_table_responsive thead { display: none; }
	.woocommerce-MyAccount-content table.shop_table_responsive tr { display: block; border-bottom: 1px solid var(--ob-hairline); }
	.woocommerce-MyAccount-content table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; }
	.woocommerce-MyAccount-content table.shop_table_responsive td::before { content: attr(data-title); font: 500 12px/1.4 var(--ob-mono); color: var(--ob-muted); }
}