/*
Theme Name:        Owambe Connect
Theme URI:         https://owambeconnect.com
Author:            Instaquirk
Author URI:        https://instaquirk.com
Description:       Lightweight, mobile-first custom theme for the Owambe Connect vendor marketplace. Pairs with the Owambe Connect Core plugin which provides all marketplace logic.
Version:           1.2.0
Requires at least: 6.0
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       owambe-connect
Tags:              custom, marketplace, mobile-first
*/

/* =============================================================
   Owambe Connect — Theme styles (chrome only).
   Marketplace/component styles live in assets/css/marketplace.css (v1.2.0+).
   ============================================================= */

:root {
	--oc-burgundy:       #6E0F2C;
	--oc-burgundy-dark:  #4A0A1E;
	--oc-gold:           #C9A961;
	--oc-gold-dark:      #A8893D;
	--oc-cream:          #FAF7F2;
	--oc-ink:            #1F1B1A;
	--oc-stone:          #6B6361;
	--oc-mist:           #EFEAE2;
	--oc-border:         #E4DDD2;
	--oc-white:          #FFFFFF;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--oc-ink);
	background: var(--oc-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--oc-burgundy); }
h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--oc-burgundy);
	margin: 0 0 0.6em;
	line-height: 1.2;
}
.oc-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--oc-burgundy); color: #fff;
	padding: 10px 16px; text-decoration: none;
}
.oc-skip-link:focus { left: 8px; top: 8px; }

/* ---------- Header ---------- */
.oc-site-header {
	background: var(--oc-white);
	border-bottom: 1px solid var(--oc-border);
	position: sticky; top: 0; z-index: 100;
	backdrop-filter: saturate(180%) blur(8px);
}
/* Widget-driven header opt-in modifiers (override theme defaults via class) */
.oc-site-header--widget { position: static; border-bottom: 0; }
.oc-site-header--widget.oc-site-header--sticky { position: sticky; top: 0; z-index: 100; }
.oc-site-header--widget.oc-site-header--bordered { border-bottom: 1px solid var(--oc-border); }
.oc-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 20px;
	position: relative; /* anchor for mobile-nav absolute dropdown */
}
.oc-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.oc-brand img { max-height: 44px; width: auto; }
.oc-brand__text {
	display: flex; flex-direction: column; line-height: 1; font-family: 'Playfair Display', Georgia, serif;
}
.oc-brand__text-mark { color: var(--oc-burgundy); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.04em; }
.oc-brand__text-sub  { color: var(--oc-gold-dark); font-family: 'Inter', sans-serif; font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase; margin-top: 4px; }

.oc-nav { display: none; }
.oc-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; align-items: center; }
.oc-nav a {
	color: var(--oc-ink);
	text-decoration: none;
	padding: 10px 14px;
	font-weight: 500;
	border-radius: 6px;
	font-size: 0.95rem;
	transition: background .15s ease, color .15s ease;
}
.oc-nav a:hover, .oc-nav .current-menu-item > a { color: var(--oc-burgundy); background: var(--oc-cream); }
.oc-nav__cta a {
	background: var(--oc-burgundy);
	color: var(--oc-white) !important;
	padding: 10px 18px;
}
.oc-nav__cta a:hover { background: var(--oc-burgundy-dark); }

.oc-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--oc-border);
	width: 44px; height: 44px;
	border-radius: 8px;
	cursor: pointer;
	padding: 0;
}
.oc-nav-toggle:focus-visible { outline: 3px solid var(--oc-gold); outline-offset: 2px; }
.oc-nav-toggle__bars,
.oc-nav-toggle__bars::before,
.oc-nav-toggle__bars::after {
	display: block; width: 22px; height: 2px;
	background: var(--oc-ink);
	position: relative;
}
.oc-nav-toggle__bars::before, .oc-nav-toggle__bars::after {
	content: ''; position: absolute; left: 0;
}
.oc-nav-toggle__bars::before { top: -7px; }
.oc-nav-toggle__bars::after  { top:  7px; }

@media (min-width: 900px) {
	.oc-nav { display: block; }
	.oc-nav-toggle { display: none; }
}

@media (max-width: 899px) {
	.oc-nav--open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--oc-white);
		border-top: 1px solid var(--oc-border);
		border-bottom: 1px solid var(--oc-border);
		box-shadow: 0 16px 32px rgba(31, 27, 26, 0.10), 0 4px 8px rgba(31, 27, 26, 0.04);
		padding: 10px 16px 16px;
		max-height: calc(100dvh - 80px);
		overflow-y: auto;
		z-index: 99;
		animation: oc-nav-slide-in .18s ease-out;
	}
	.oc-nav--open ul {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}
	.oc-nav--open li { width: 100%; }
	.oc-nav--open a {
		display: block;
		padding: 14px 16px;
		font-size: 1.02rem;
		border-radius: 8px;
		color: var(--oc-ink);
	}
	.oc-nav--open a:hover,
	.oc-nav--open .current-menu-item > a { background: var(--oc-cream); color: var(--oc-burgundy); }
	.oc-nav--open .oc-nav__cta a { background: var(--oc-burgundy); color: #fff; text-align: center; margin-top: 8px; }
	.oc-nav--open .sub-menu {
		display: block;
		position: static;
		box-shadow: none;
		padding: 4px 0 4px 16px;
		background: transparent;
	}
}

@keyframes oc-nav-slide-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Prevent body scroll behind open mobile nav */
body.oc-no-scroll { overflow: hidden; }

body.oc-no-scroll { overflow: hidden; }

/* ---------- Main ---------- */
main.oc-main { min-height: 60vh; }

/* Full-width article — used by Elementor pages and marketplace shortcode pages */
.oc-full-page {
	width: 100%;
	display: block;
}

/* Prose article — used by text-only pages (About, Privacy, etc.) */
.oc-page {
	max-width: 860px;
	margin: 0 auto;
	padding: 56px 24px;
}
.oc-page__title {
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	margin-bottom: 0.5em;
}
.oc-page p, .oc-page ul, .oc-page ol { margin: 0 0 1em; }

/* ---------- Breadcrumb (page-header band) ---------- */
/* Slim burgundy strip used as a branded page header on info pages (About,
   Terms, Privacy, Contact). One line of serif text in white, full-width
   even when injected inside a constrained content container thanks to the
   box-shadow + clip-path trick. */
.oc-breadcrumb {
	background: var(--oc-burgundy, #6E0F2C);
	color: #fff;
	padding: 22px 0;
	position: relative;
	box-shadow: 0 0 0 100vmax var(--oc-burgundy, #6E0F2C);
	clip-path: inset(0 -100vmax);
	margin: 0 0 36px;
}
.oc-breadcrumb .oc-container { position: relative; z-index: 1; }
.oc-breadcrumb__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	font-weight: 600;
	color: #fff;
	margin: 0;
	line-height: 1.2;
	letter-spacing: 0.01em;
}
@media (max-width: 540px) { .oc-breadcrumb { padding: 16px 0; margin-bottom: 24px; } }

/* ---------- Footer ---------- */
/* ───────────────────────────────────────────────────────────
   Footer — modern marketplace style (widget + fallback share these styles)
   ─────────────────────────────────────────────────────────── */
.oc-footer,
.oc-site-footer {
	background: var(--oc-burgundy, #6E0F2C);
	color: rgba(255,255,255,.78);
	margin-top: 0;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 0 100vmax var(--oc-burgundy, #6E0F2C);
	clip-path: inset(0 -100vmax);
}
.oc-footer::before,
.oc-site-footer::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -100px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(201,169,97,0.06);
	pointer-events: none;
}
.oc-footer__inner,
.oc-site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 24px 24px;
	position: relative;
}
.oc-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	padding-bottom: 36px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
}
@media (min-width: 760px) { .oc-footer__top { grid-template-columns: 1.4fr 2fr; gap: 48px; } }
@media (min-width: 1024px) { .oc-footer__top { grid-template-columns: 1.3fr 2fr 1fr; } }
.oc-footer__top:has(.oc-footer__newsletter) { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .oc-footer__top:has(.oc-footer__newsletter) { grid-template-columns: 1.3fr 1.8fr 1fr; } }

/* Brand column */
.oc-footer__brand-link { display: inline-flex; align-items: center; text-decoration: none; margin-bottom: 16px; }
.oc-footer__brand-image { max-height: 48px; width: auto; display: block; }
.oc-footer__brand-text { display: inline-flex; flex-direction: column; line-height: 1; }
.oc-footer__brand-mark { font-family: 'Playfair Display', Georgia, serif; color: var(--oc-gold, #C9A961); font-size: 1.55rem; font-weight: 700; letter-spacing: 0.05em; }
.oc-footer__brand-sub { color: rgba(255,255,255,0.6); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; margin-top: 6px; }
.oc-footer__tagline { color: rgba(255,255,255,.72); line-height: 1.65; max-width: 360px; margin: 0 0 20px; font-size: .95rem; }
.oc-footer__contact { margin: 0 0 14px; }
.oc-footer__contact-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); text-decoration: none; font-size: .92rem; transition: color .15s; }
.oc-footer__contact-link:hover { color: var(--oc-gold, #C9A961); }
.oc-footer__contact-link svg { opacity: .9; flex-shrink: 0; }

/* Social icons */
.oc-footer__social { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.oc-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border-radius: 10px;
	background: rgba(255,255,255,.08);
	color: rgba(255,255,255,.85);
	transition: background .15s, color .15s, transform .15s;
	text-decoration: none;
}
.oc-footer__social a:hover {
	background: var(--oc-gold, #C9A961);
	color: var(--oc-burgundy, #6E0F2C);
	transform: translateY(-2px);
}

/* Link columns */
.oc-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
@media (min-width: 600px) { .oc-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.oc-footer__col-heading {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--oc-gold, #C9A961);
	font-size: 1rem;
	margin: 0 0 14px;
	letter-spacing: 0.04em;
	font-weight: 700;
}
.oc-footer__col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.oc-footer__col-list a,
.oc-footer__col-link {
	color: rgba(255,255,255,.78);
	text-decoration: none;
	font-size: .92rem;
	transition: color .15s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
	z-index: 1;
	pointer-events: auto;
	padding: 2px 0;
	line-height: 1.4;
}
.oc-footer__col-list a:hover,
.oc-footer__col-link:hover { color: var(--oc-gold, #C9A961); }
.oc-footer__col-link-icon svg { width: 14px; height: 14px; display: block; }

/* Newsletter */
.oc-footer__newsletter { display: flex; flex-direction: column; }
.oc-footer__newsletter-text { color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.55; margin: 0 0 14px; }
.oc-footer__newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.oc-footer__newsletter-form input[type="email"] {
	padding: 11px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.15);
	background: rgba(255,255,255,.06);
	color: #fff;
	font-size: 14px;
	font-family: inherit;
	width: 100%;
}
.oc-footer__newsletter-form input::placeholder { color: rgba(255,255,255,.5); }
.oc-footer__newsletter-form input:focus { outline: none; border-color: var(--oc-gold, #C9A961); background: rgba(255,255,255,.10); }
.oc-footer__newsletter-form .oc-btn { width: 100%; }

/* Bottom bar */
.oc-footer__bottom,
.oc-site-footer__bottom {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.10);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	font-size: 0.82rem;
	color: rgba(255,255,255,.58);
}
.oc-footer__bottom-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.oc-footer__bottom-links a {
	color: rgba(255,255,255,.65);
	text-decoration: none;
	font-size: 0.82rem;
	transition: color .15s;
}
.oc-footer__bottom-links a:hover { color: var(--oc-gold, #C9A961); }
.oc-footer__credit { font-size: 0.82rem; color: rgba(255,255,255,.55); }
@media (max-width: 540px) {
	.oc-footer__bottom,
	.oc-site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
}

/* ---------- 404 ---------- */
.oc-404 { text-align: center; padding: 80px 20px; }
.oc-404 h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.oc-404 .oc-btn { margin-top: 18px; display: inline-flex; }

/* ---------- Search form ---------- */
.oc-searchform { display: flex; gap: 8px; }
.oc-searchform input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--oc-border);
	border-radius: 6px;
	font: inherit;
}

/* =============================================================
   Enterprise additions — v1.1.0
   ============================================================= */

/* ---------- Button System ---------- */
.oc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
	white-space: nowrap;
}
.oc-btn:focus-visible { outline: 3px solid var(--oc-gold); outline-offset: 2px; }

.oc-btn--primary { background: var(--oc-burgundy); color: var(--oc-white); border-color: var(--oc-burgundy); }
.oc-btn--primary:hover { background: var(--oc-burgundy-dark); border-color: var(--oc-burgundy-dark); color: var(--oc-white); }

.oc-btn--outline { background: transparent; color: var(--oc-burgundy); border-color: var(--oc-burgundy); }
.oc-btn--outline:hover { background: var(--oc-burgundy); color: var(--oc-white); }

.oc-btn--ghost { background: transparent; color: var(--oc-stone); border-color: var(--oc-border); }
.oc-btn--ghost:hover { color: var(--oc-ink); border-color: var(--oc-stone); }

.oc-btn--gold { background: var(--oc-gold); color: var(--oc-ink); border-color: var(--oc-gold); }
.oc-btn--gold:hover { background: var(--oc-gold-dark); border-color: var(--oc-gold-dark); }

/* ---------- Header actions (CTA row) ---------- */
.oc-header-actions { display: flex; align-items: center; gap: 10px; }
.oc-action__icon { display: none; }

/* Desktop — show all actions, hide icon-only fallback */
@media (min-width: 900px) {
	.oc-action__label { display: inline; }
}

/* Mobile (<900px) — reorder header + show only the primary action */
@media (max-width: 899px) {
	.oc-nav-toggle { order: 0; margin-left: 0; }
	.oc-brand { order: 1; margin-right: auto; margin-left: 14px; }
	.oc-nav { order: 2; }
	.oc-header-actions { order: 3; gap: 6px; }

	/* Hide every action button except the one marked as mobile-primary */
	.oc-header-actions > *:not(.oc-action--mobile-primary) { display: none; }

	/* Mobile-primary = compact pill button with icon + label */
	.oc-header-actions .oc-action--mobile-primary {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 9px 14px;
		border-radius: 8px;
		min-height: 40px;
		font-size: 0.92rem;
		font-weight: 600;
		white-space: nowrap;
		line-height: 1;
	}
	.oc-header-actions .oc-action--mobile-primary .oc-action__icon { display: inline-flex; align-items: center; }
	.oc-header-actions .oc-action--mobile-primary .oc-action__icon svg { width: 16px; height: 16px; }
	.oc-header-actions .oc-action--mobile-primary .oc-action__label { display: inline; }
}

/* Very tight phones — keep button + icon but trim padding */
@media (max-width: 380px) {
	.oc-header-actions .oc-action--mobile-primary {
		padding: 8px 10px;
		font-size: 0.85rem;
		gap: 4px;
	}
}

/* Very tight phones — reduce logo size too */
@media (max-width: 420px) {
	.oc-brand__text-mark { font-size: 1.18rem; }
	.oc-brand__text-sub { font-size: 0.55rem; }
	.oc-site-header__inner { padding: 10px 12px; gap: 8px; }
}

/* ---------- Dropdown submenus ---------- */
.oc-nav .menu-item-has-children { position: relative; }

.oc-nav .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	background: var(--oc-white);
	border: 1px solid var(--oc-border);
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(0,0,0,.10);
	padding: 6px;
	z-index: 300;
	flex-direction: column;
	gap: 2px;
}

.oc-nav .menu-item-has-children:hover > .sub-menu,
.oc-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; }

.oc-nav .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 6px;
	white-space: nowrap;
	font-size: 0.9rem;
	color: var(--oc-ink);
}
.oc-nav .sub-menu a:hover { color: var(--oc-burgundy); background: var(--oc-cream); }

/* Dropdown chevron */
.oc-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	margin-left: 6px;
	vertical-align: middle;
	opacity: 0.55;
	transition: transform .15s ease;
}
.oc-nav .menu-item-has-children:hover > a::after,
.oc-nav .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }

/* Mobile: sub-menus stack inline */
.oc-nav--open .sub-menu {
	position: static;
	box-shadow: none;
	border: none;
	border-left: 3px solid var(--oc-border);
	border-radius: 0;
	padding: 0 0 4px 16px;
	margin-top: 2px;
	display: none;
}
.oc-nav--open .sub-menu.sub-menu-open { display: flex !important; }
.oc-nav--open .menu-item-has-children > a::after { display: none; }

/* Mobile submenu toggle button */
.oc-submenu-toggle {
	display: none;
	background: transparent;
	border: none;
	padding: 4px 8px;
	cursor: pointer;
	color: var(--oc-stone);
	font-size: 0.7rem;
	line-height: 1;
}
.oc-nav--open .oc-submenu-toggle { display: inline-flex; align-items: center; }
.oc-submenu-toggle:focus-visible { outline: 2px solid var(--oc-gold); border-radius: 4px; }

/* Force nav visible inside Elementor editor */
.elementor-editor-active .oc-site-header .oc-nav,
.elementor-editor-active .oc-nav { display: block !important; }

/* ---------- Footer logo wordmark ---------- */
.oc-footer-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 10px;
	font-family: 'Playfair Display', Georgia, serif;
	line-height: 1;
}
.oc-footer-logo__mark {
	color: var(--oc-white);
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: 0.05em;
}
.oc-footer-logo__sub {
	color: var(--oc-gold);
	font-family: 'Inter', sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
}

/* ---------- WooCommerce wrapper ---------- */
.oc-woo-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

/* ---------- Utility ---------- */
.oc-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Elementor container alignment ---------- */
/* Align Elementor boxed sections with the 1200px theme header */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-inner {
	max-width: 1200px !important;
}

/* Strip Elementor's default column side padding when wrapping OC full-bleed sections */
.elementor-widget-container:has(> .oc-hero),
.elementor-widget-container:has(> .oc-contact),
.elementor-widget-container:has(> .oc-testimonials),
.elementor-widget-container:has(> .oc-stats),
.elementor-widget-container:has(> .oc-vd),
.elementor-widget-container:has(> .oc-auth) {
	padding: 0 !important;
}
.elementor-column:has(.oc-hero) > .elementor-widget-wrap,
.elementor-column:has(.oc-contact) > .elementor-widget-wrap,
.elementor-column:has(.oc-vd) > .elementor-widget-wrap,
.elementor-column:has(.oc-auth) > .elementor-widget-wrap {
	padding: 0 !important;
}
/* Kill Elementor section default top/bottom padding around full-bleed shortcodes */
.elementor-section:has(.oc-vd),
.elementor-section:has(.oc-contact),
.elementor-section:has(.oc-auth) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Full-bleed background — extends section bg color edge-to-edge without touching layout.
   box-shadow paints a 100vmax spread of bg color; clip-path lets it bleed sideways only. */
.oc-contact {
	position: relative;
	box-shadow: 0 0 0 100vmax var(--oc-cream, #FAF7F2);
	clip-path: inset(0 -100vmax);
}
.oc-testimonials {
	position: relative;
	box-shadow: 0 0 0 100vmax var(--oc-cream, #FAF7F2);
	clip-path: inset(0 -100vmax);
}

/* Prevent horizontal scroll introduced by the hero viewport-width breakout */
body { overflow-x: hidden; }

/* ───────────────────────────────────────────────────────────
   How-It-Works widget
   ─────────────────────────────────────────────────────────── */
.oc-hiw { padding: 64px 0; }
.oc-hiw__list { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr; gap: 24px; counter-reset: oc-hiw; }
@media (min-width: 760px) { .oc-hiw__list { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.oc-hiw__item { position: relative; background: #fff; border: 1px solid var(--oc-border, #E4DDD2); border-radius: 14px; padding: 28px 24px 26px; text-align: left; transition: transform .2s, box-shadow .2s; }
.oc-hiw__item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(31,27,26,.08); }
.oc-hiw__num { position: absolute; top: 18px; right: 22px; font-family: Georgia, serif; font-size: 36px; line-height: 1; color: var(--oc-gold, #C9A961); opacity: .35; font-weight: 700; }
.oc-hiw__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: linear-gradient(135deg, var(--oc-burgundy, #6E0F2C), #8B1538); color: #fff; font-size: 24px; line-height: 1; border-radius: 12px; margin: 0 0 16px; padding: 0; flex-shrink: 0; }
/* Normalize inline SVGs so the three icons render at identical size and
   sit on the same baseline across all three cards. Inline SVGs default to
   inline-baseline alignment which leaves a 2-3px descent gap — forcing
   block + explicit 24×24 sizing keeps the visual centers in sync. */
.oc-hiw__icon svg { display: block; width: 24px; height: 24px; }
.oc-hiw__title { font-family: Georgia, serif; font-size: 1.25rem; color: var(--oc-burgundy, #6E0F2C); margin: 0 0 8px; }
.oc-hiw__desc { color: #4A4442; font-size: .95rem; line-height: 1.6; margin: 0; }

/* ───────────────────────────────────────────────────────────
   Testimonials widget
   ─────────────────────────────────────────────────────────── */
.oc-testimonials { padding: 64px 0; background: var(--oc-cream, #FAF7F2); }
.oc-testimonials__grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
@media (min-width: 760px) { .oc-testimonials__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (min-width: 1024px) { .oc-testimonials__grid { grid-template-columns: repeat(3, 1fr); } }
.oc-testimonial { background: #fff; border: 1px solid var(--oc-border, #E4DDD2); border-radius: 14px; padding: 28px 24px 22px; margin: 0; position: relative; transition: transform .2s, box-shadow .2s; }
.oc-testimonial:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(31,27,26,.08); }
.oc-testimonial__mark { color: var(--oc-gold, #C9A961); opacity: .55; margin-bottom: 10px; }
.oc-testimonial__quote { font-size: 1rem; line-height: 1.65; color: #2A2522; margin: 0 0 22px; font-style: italic; }
.oc-testimonial__person { display: flex; align-items: center; gap: 12px; }
.oc-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--oc-burgundy, #6E0F2C); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-family: Georgia, serif; font-size: 18px; flex-shrink: 0; }
.oc-testimonial__meta { display: flex; flex-direction: column; line-height: 1.3; }
.oc-testimonial__name { color: var(--oc-burgundy, #6E0F2C); font-weight: 600; font-size: .95rem; }
.oc-testimonial__role { color: #6B6361; font-size: .82rem; }

/* ───────────────────────────────────────────────────────────
   FAQ widget
   ─────────────────────────────────────────────────────────── */
.oc-faq { padding: 64px 0; }
.oc-faq__container { max-width: 820px; }
.oc-faq__list { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.oc-faq__item { background: #fff; border: 1px solid var(--oc-border, #E4DDD2); border-radius: 10px; overflow: hidden; transition: border-color .15s; }
.oc-faq__item[open] { border-color: var(--oc-gold, #C9A961); }
.oc-faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; font-weight: 600; color: var(--oc-burgundy, #6E0F2C); font-size: 1rem; user-select: none; }
.oc-faq__q::-webkit-details-marker { display: none; }
.oc-faq__chevron { transition: transform .2s; flex-shrink: 0; color: var(--oc-gold, #C9A961); }
.oc-faq__item[open] .oc-faq__chevron { transform: rotate(180deg); }
.oc-faq__a { padding: 0 20px 18px; color: #4A4442; line-height: 1.65; }
.oc-faq__a p { margin: 0 0 12px; }
.oc-faq__a p:last-child { margin-bottom: 0; }

/* ───────────────────────────────────────────────────────────
   Stats widget
   ─────────────────────────────────────────────────────────── */
.oc-stats { padding: 56px 0; }
.oc-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 760px) { .oc-stats__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.oc-stat { background: #fff; border: 1px solid var(--oc-border, #E4DDD2); border-radius: 12px; padding: 24px 16px; text-align: center; transition: transform .2s, box-shadow .2s; }
.oc-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31,27,26,.07); }
.oc-stat__value { display: block; font-family: Georgia, serif; font-size: 2.25rem; line-height: 1; color: var(--oc-burgundy, #6E0F2C); font-weight: 700; margin-bottom: 6px; }
.oc-stat__label { display: block; color: #6B6361; font-size: .88rem; line-height: 1.3; }

/* ───────────────────────────────────────────────────────────
   Contact page — 2-column layout (form + info card)
   ─────────────────────────────────────────────────────────── */
.oc-contact { background: var(--oc-cream, #FAF7F2); padding: 64px 24px 80px; }
.oc-contact__container { max-width: 1140px; margin: 0 auto; padding: 0; }
@media (max-width: 540px) { .oc-contact { padding: 40px 16px 56px; } }
.oc-contact__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.oc-contact__title { font-family: Georgia, serif; color: var(--oc-burgundy, #6E0F2C); font-size: clamp(2rem, 3.4vw, 2.6rem); margin: 0 0 12px; line-height: 1.15; }
.oc-contact__lead { color: #5A5350; margin: 0; font-size: 1.05rem; line-height: 1.55; }

.oc-contact__body { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 880px) {
	.oc-contact__body { grid-template-columns: 1.4fr 1fr; gap: 36px; }
}
.oc-contact__body--solo { max-width: 640px; margin: 0 auto; }

.oc-contact__form-wrap { background: #fff; border: 1px solid var(--oc-border, #E4DDD2); border-radius: 14px; padding: 32px 28px; box-shadow: 0 1px 2px rgba(31,27,26,.04); }
@media (max-width: 540px) { .oc-contact__form-wrap { padding: 22px 18px; } }
.oc-contact__form .oc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .oc-contact__form .oc-grid-2 { grid-template-columns: 1fr; } }
.oc-contact__form .oc-field { margin-bottom: 16px; }
.oc-contact__form .oc-field label { display: block; font-weight: 600; color: #2A2522; margin-bottom: 6px; font-size: .92rem; }
.oc-contact__form input,
.oc-contact__form textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--oc-border, #E4DDD2); border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff; color: #1F1B1A; transition: border-color .15s, box-shadow .15s; }
.oc-contact__form input:focus,
.oc-contact__form textarea:focus { outline: none; border-color: var(--oc-burgundy, #6E0F2C); box-shadow: 0 0 0 3px rgba(110,15,44,.12); }
.oc-contact__form .oc-form__actions { margin-top: 4px; }
.oc-contact__form .oc-form__actions .oc-btn { width: 100%; }
@media (min-width: 540px) { .oc-contact__form .oc-form__actions .oc-btn { width: auto; min-width: 200px; } }

.oc-contact__info { background: linear-gradient(155deg, var(--oc-burgundy, #6E0F2C) 0%, #5A0B23 100%); color: #fff; border-radius: 14px; padding: 32px 28px; position: relative; overflow: hidden; }
.oc-contact__info::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(201,169,97,0.12); pointer-events: none; }
.oc-contact__info::after { content: ''; position: absolute; bottom: -50px; left: -50px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,0.04); pointer-events: none; }
.oc-contact__info-title { font-family: Georgia, serif; font-size: 1.5rem; color: var(--oc-gold, #C9A961); margin: 0 0 8px; position: relative; }
.oc-contact__response { color: rgba(255,255,255,0.82); margin: 0 0 24px; font-size: .92rem; line-height: 1.5; position: relative; }
.oc-contact__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; position: relative; }
.oc-contact__row { display: flex; align-items: flex-start; gap: 14px; }
.oc-contact__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,0.08); color: var(--oc-gold, #C9A961); flex-shrink: 0; }
.oc-contact__icon--wa { background: rgba(37,211,102,0.18); color: #25D366; }
.oc-contact__detail { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc-contact__label { font-size: .75rem; color: rgba(255,255,255,0.60); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.oc-contact__info .oc-contact__detail a,
.oc-contact__info .oc-contact__detail span:not(.oc-contact__label) { color: #FFFFFF !important; font-size: .95rem; text-decoration: none; word-break: break-word; }
.oc-contact__info .oc-contact__detail a:hover { color: var(--oc-gold, #C9A961) !important; }

/* ───────────────────────────────────────────────────────────
   Auth pages (login + register) — same pattern as contact
   ─────────────────────────────────────────────────────────── */
.oc-auth {
	background: var(--oc-cream, #FAF7F2);
	padding: 64px 24px 80px;
	position: relative;
	box-shadow: 0 0 0 100vmax var(--oc-cream, #FAF7F2);
	clip-path: inset(0 -100vmax);
}
@media (max-width: 540px) { .oc-auth { padding: 40px 16px 56px; } }

.oc-auth__container { max-width: 1080px; margin: 0 auto; }
.oc-auth__head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.oc-auth__title { font-family: Georgia, serif; color: var(--oc-burgundy, #6E0F2C); font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin: 0 0 10px; line-height: 1.15; }
.oc-auth__lead { color: #5A5350; margin: 0; font-size: 1.02rem; line-height: 1.55; }

.oc-auth__body { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 880px) { .oc-auth__body { grid-template-columns: 1.05fr 1fr; gap: 32px; } }
/* Single-form auth layouts (forgot-password, reset-password) — there's no
   right-side info card, so the body should stay single-column and the form
   should center horizontally instead of being parked in the left col. */
.oc-auth__body--single { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
@media (min-width: 880px) { .oc-auth__body--single { grid-template-columns: 1fr; max-width: 480px; } }
.oc-auth__body--single .oc-auth__form-wrap { max-width: none; width: 100%; }

/* Minimal, borderless form panel. The dark "Why list with us" card on the
   right is the visual anchor; the form column is left clean so the eye
   goes straight to the fields. Width cap moved here from the child-theme
   migration so the inputs stay readable on wide screens. */
.oc-auth__form-wrap { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; max-width: 480px; }
@media (max-width: 540px) { .oc-auth__form-wrap { padding: 0; } }
.oc-auth__form .oc-field { margin-bottom: 16px; }
.oc-auth__form .oc-field label { display: block; font-weight: 600; color: #2A2522; margin-bottom: 6px; font-size: .92rem; }
.oc-auth__form input[type="email"],
.oc-auth__form input[type="password"],
.oc-auth__form input[type="text"] { width: 100%; padding: 12px 14px; border: 1px solid var(--oc-border, #E4DDD2); border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff; color: #1F1B1A; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
.oc-auth__form input:focus { outline: none; border-color: var(--oc-burgundy, #6E0F2C); box-shadow: 0 0 0 3px rgba(110,15,44,.12); }
/* Icon-in-input pattern for email / password fields. Lives in the parent
   theme so it works even if the child theme stylesheet hasn't loaded. */
.oc-auth__form .oc-field--with-icon .oc-field-inner { position: relative; display: block; }
.oc-auth__form .oc-field--with-icon .oc-field-inner input { padding-left: 40px; }
.oc-auth__form .oc-field__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; color: var(--oc-burgundy, #6E0F2C); opacity: .78; pointer-events: none; }
.oc-auth__form .oc-field__icon svg { width: 18px; height: 18px; display: block; }
.oc-auth__form .oc-field--pw .oc-field-inner input { padding-right: 44px; }
.oc-auth__form .oc-field__pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #6B6361; cursor: pointer; padding: 6px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.oc-auth__form .oc-field__pw-toggle:hover { color: var(--oc-burgundy, #6E0F2C); background: #FAF7F2; }
.oc-auth__form .oc-field__pw-toggle svg { width: 18px; height: 18px; display: block; }
.oc-auth__form .oc-help-micro { color: #6B6361; font-size: 12px; margin-top: 4px; display: block; }
.oc-auth__form small { color: #6B6361; font-size: 12px; margin-top: 4px; display: block; }
/* Reassurance pill */
/* Minimal reassurance line — sits as a green-tick row without a card. */
.oc-auth__reassure { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #3D3735; padding: 0; border-radius: 0; font-size: 13px; margin: 14px 0 6px; border: 0; }
.oc-auth__reassure svg { color: #2E7D5B; flex-shrink: 0; }
/* Inline terms consent — no card / no fill, just a tidy checkbox row. */
.oc-auth__terms { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 14px 0 0; }
.oc-auth__terms .oc-checkbox { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; font-size: .88rem; color: #3D3735; cursor: pointer; }
.oc-auth__terms .oc-checkbox input { margin-top: 3px; width: auto; }
.oc-auth__terms a { color: var(--oc-burgundy, #6E0F2C); font-weight: 600; text-decoration: underline; }
.oc-auth__terms a:hover { text-decoration: none; }
.oc-auth__form .oc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .oc-auth__form .oc-grid-2 { grid-template-columns: 1fr; gap: 0; } }
.oc-auth__form .oc-field--row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.oc-auth__form .oc-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; color: #2A2522; }
.oc-auth__form .oc-checkbox input { width: auto; }
.oc-auth__form .oc-link,
.oc-auth__form .oc-help a { color: var(--oc-burgundy, #6E0F2C); font-weight: 600; text-decoration: none; }
.oc-auth__form .oc-link:hover,
.oc-auth__form .oc-help a:hover { text-decoration: underline; }
.oc-auth__form .oc-form__actions { margin-top: 8px; }
.oc-auth__form .oc-btn-block { width: 100%; }
.oc-auth__form .oc-help--center { text-align: center; margin: 16px 0 0; color: #6B6361; font-size: .92rem; }

/* Info panel — branded card on the right */
.oc-auth__info {
	background: linear-gradient(155deg, var(--oc-burgundy, #6E0F2C) 0%, #5A0B23 100%);
	color: #fff;
	border-radius: 14px;
	padding: 36px 32px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.oc-auth__info::before { content: ''; position: absolute; top: -50px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(201,169,97,.12); pointer-events: none; }
.oc-auth__info::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.04); pointer-events: none; }
.oc-auth__info-title { font-family: Georgia, serif; font-size: 1.55rem; color: var(--oc-gold, #C9A961); margin: 0 0 10px; position: relative; line-height: 1.2; }
.oc-auth__info-lead { color: rgba(255,255,255,.82); margin: 0 0 26px; font-size: .98rem; line-height: 1.55; position: relative; }
.oc-auth__perks { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.oc-auth__perks li { display: flex; gap: 14px; align-items: flex-start; }
.oc-auth__perk-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(201,169,97,.18); color: var(--oc-gold, #C9A961); flex-shrink: 0; }
.oc-auth__perks li > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc-auth__perks li strong { color: #fff; font-size: .98rem; font-weight: 600; }
.oc-auth__perks li > span:last-child > span:last-child { color: rgba(255,255,255,.78); font-size: .88rem; line-height: 1.5; }
.oc-auth__info-foot { margin: 0; padding-top: 18px; color: rgba(255,255,255,.65); font-size: .82rem; line-height: 1.55; border-top: 1px solid rgba(255,255,255,.10); position: relative; }

/* ───────────────────────────────────────────────────────────
   About Page widget — story / mission / values / timeline / CTA
   ─────────────────────────────────────────────────────────── */
.oc-about { display: block; }
.oc-about__section { padding: 72px 0; }
@media (max-width: 720px) { .oc-about__section { padding: 48px 0; } }
.oc-about__container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.oc-about__eyebrow { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; color: var(--oc-gold, #C9A961); margin: 0 0 12px; }
.oc-about__title { font-family: Georgia, serif; color: var(--oc-burgundy, #6E0F2C); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.18; margin: 0 0 18px; }
.oc-about__body { color: #3D3735; font-size: 1.02rem; line-height: 1.75; }
.oc-about__body p { margin: 0 0 14px; }
.oc-about__body p:last-child { margin-bottom: 0; }

/* Story — 2-col text + image */
.oc-about__story-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .oc-about__story-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
.oc-about__story-grid--no-image { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
.oc-about__story-image img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 14px 40px rgba(31,27,26,.10); }

/* Mission & Vision */
.oc-about__mission { background: var(--oc-cream, #FAF7F2); position: relative; box-shadow: 0 0 0 100vmax var(--oc-cream, #FAF7F2); clip-path: inset(0 -100vmax); }
.oc-about__mv-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .oc-about__mv-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.oc-about__mv-card { background: #fff; border: 1px solid var(--oc-border, #E4DDD2); border-radius: 14px; padding: 32px 28px; position: relative; transition: transform .2s, box-shadow .2s; }
.oc-about__mv-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(31,27,26,.08); }
.oc-about__mv-card--alt { background: linear-gradient(155deg, var(--oc-burgundy, #6E0F2C), #5A0B23); color: #fff; }
.oc-about__mv-card--alt .oc-about__mv-title { color: var(--oc-gold, #C9A961); }
.oc-about__mv-card--alt .oc-about__mv-text { color: rgba(255,255,255,.88); }
.oc-about__mv-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(110,15,44,.08); color: var(--oc-burgundy, #6E0F2C); margin-bottom: 18px; }
.oc-about__mv-card--alt .oc-about__mv-icon { background: rgba(201,169,97,.18); color: var(--oc-gold, #C9A961); }
.oc-about__mv-title { font-family: Georgia, serif; font-size: 1.4rem; color: var(--oc-burgundy, #6E0F2C); margin: 0 0 10px; }
.oc-about__mv-text { font-size: 1rem; line-height: 1.65; color: #3D3735; margin: 0; }

/* Values grid */
.oc-about__values-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
@media (min-width: 600px) { .oc-about__values-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (min-width: 1024px) { .oc-about__values-grid { grid-template-columns: repeat(4, 1fr); } }
.oc-about__value { background: #fff; border: 1px solid var(--oc-border, #E4DDD2); border-radius: 14px; padding: 28px 24px; transition: transform .2s, box-shadow .2s; }
.oc-about__value:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(31,27,26,.08); border-color: var(--oc-gold, #C9A961); }
.oc-about__value-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, var(--oc-burgundy, #6E0F2C), #8B1538); color: #fff; font-size: 24px; margin-bottom: 16px; }
.oc-about__value-title { font-family: Georgia, serif; font-size: 1.15rem; color: var(--oc-burgundy, #6E0F2C); margin: 0 0 8px; line-height: 1.3; }
.oc-about__value-desc { font-size: .95rem; line-height: 1.6; color: #4A4442; margin: 0; }

/* Timeline */
.oc-about__timeline-wrap { background: var(--oc-cream, #FAF7F2); position: relative; box-shadow: 0 0 0 100vmax var(--oc-cream, #FAF7F2); clip-path: inset(0 -100vmax); }
.oc-about__timeline { list-style: none; padding: 0; margin: 36px 0 0; position: relative; }
.oc-about__timeline::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 14px; width: 2px; background: linear-gradient(to bottom, var(--oc-gold, #C9A961), transparent); }
@media (min-width: 760px) { .oc-about__timeline::before { left: 50%; transform: translateX(-50%); } }
.oc-about__timeline-item { position: relative; padding: 0 0 32px 44px; }
.oc-about__timeline-item:last-child { padding-bottom: 0; }
@media (min-width: 760px) { .oc-about__timeline-item { width: 50%; padding: 0 36px 36px 0; }
	.oc-about__timeline-item:nth-child(even) { margin-left: 50%; padding: 0 0 36px 36px; text-align: left; }
	.oc-about__timeline-item:nth-child(odd) { text-align: right; }
}
.oc-about__timeline-dot { position: absolute; top: 6px; left: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--oc-gold, #C9A961); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--oc-gold, #C9A961); }
@media (min-width: 760px) {
	.oc-about__timeline-item:nth-child(odd) .oc-about__timeline-dot { left: auto; right: -9px; top: 6px; }
	.oc-about__timeline-item:nth-child(even) .oc-about__timeline-dot { left: -9px; top: 6px; }
}
.oc-about__timeline-date { display: inline-block; font-size: .82rem; font-weight: 600; color: var(--oc-burgundy, #6E0F2C); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.oc-about__timeline-title { font-family: Georgia, serif; font-size: 1.2rem; color: var(--oc-burgundy, #6E0F2C); margin: 0 0 6px; }
.oc-about__timeline-desc { color: #4A4442; line-height: 1.6; margin: 0; font-size: .95rem; }

/* CTA */
.oc-about__cta { padding: 56px 0 80px; }
.oc-about__cta-card {
	background: linear-gradient(135deg, var(--oc-burgundy, #6E0F2C), #5A0B23);
	border-radius: 18px;
	padding: 56px 40px;
	text-align: center;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.oc-about__cta-card::before { content: ''; position: absolute; top: -80px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(201,169,97,.12); pointer-events: none; }
.oc-about__cta-card::after { content: ''; position: absolute; bottom: -90px; left: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.04); pointer-events: none; }
.oc-about__cta-heading { font-family: Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--oc-gold, #C9A961) !important; margin: 0 0 12px; position: relative; }
.oc-about__cta-card .oc-about__cta-text { color: rgba(255,255,255,.88) !important; font-size: 1.05rem; line-height: 1.6; margin: 0 0 28px; max-width: 580px; margin-left: auto; margin-right: auto; position: relative; }
.oc-about__cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }

/* Primary button on the dark CTA card → flip to gold for proper contrast */
.oc-about__cta-card .oc-btn-primary,
.oc-about__cta-card .oc-btn.oc-btn-primary {
	background: var(--oc-gold, #C9A961) !important;
	color: var(--oc-burgundy, #6E0F2C) !important;
	border-color: var(--oc-gold, #C9A961) !important;
}
.oc-about__cta-card .oc-btn-primary:hover,
.oc-about__cta-card .oc-btn.oc-btn-primary:hover {
	background: #D4B670 !important;
	border-color: #D4B670 !important;
	color: var(--oc-burgundy, #6E0F2C) !important;
}

/* Ghost-light button (secondary on dark) */
.oc-btn-ghost-light,
.oc-about__cta-card .oc-btn-ghost-light {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.42) !important;
}
.oc-btn-ghost-light:hover,
.oc-about__cta-card .oc-btn-ghost-light:hover {
	background: rgba(255,255,255,.12) !important;
	border-color: #fff !important;
	color: #fff !important;
}
@media (max-width: 540px) { .oc-about__cta-card { padding: 40px 24px; } }

/* Mission section title color match for cream bg */
.oc-about__mission .oc-section__title { color: var(--oc-burgundy, #6E0F2C); }

/* ───────────────────────────────────────────────────────────
   Mobile responsiveness fixes (from audit)
   ─────────────────────────────────────────────────────────── */
/* Hero quick-pills wrap on mobile */
.oc-hero__quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 480px) {
	.oc-hero__quick { gap: 6px; }
	.oc-hero__quick-label { width: 100%; margin-bottom: 4px; }
}

/* Directory filter row — desktop: inline; mobile: collapsible.
   The toggle button is hidden on desktop; on mobile it shows as the
   primary control and the field row collapses behind it. */
.oc-filters__toggle { display: none; }

@media (max-width: 720px) {
	.oc-filters { background: #fff; border: 1px solid #E4DDD2; border-radius: 10px; padding: 4px; }
	.oc-filters__toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 12px 14px;
		background: transparent;
		border: 0;
		font: inherit;
		font-weight: 600;
		color: #1F1B1A;
		cursor: pointer;
		border-radius: 8px;
		text-align: left;
	}
	.oc-filters__toggle:hover { background: #FAF7F2; }
	.oc-filters__toggle svg { flex-shrink: 0; color: var(--oc-burgundy, #6E0F2C); }
	.oc-filters__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		padding: 0 7px;
		background: var(--oc-burgundy, #6E0F2C);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		border-radius: 999px;
		margin-left: auto;
	}
	.oc-filters__chev { margin-left: 4px; transition: transform .2s ease; }
	.oc-filters.is-open .oc-filters__chev { transform: rotate(180deg); }
	.oc-filters__row {
		display: none;
		flex-direction: column;
		gap: 12px;
		padding: 10px 14px 14px;
	}
	.oc-filters.is-open .oc-filters__row { display: flex; }
	.oc-filters__actions { display: flex; gap: 8px; }
	.oc-filters__actions .oc-btn { flex: 1; }
}

/* Two-column form rows collapse on small mobile */
@media (max-width: 540px) {
	.oc-grid-2 { display: flex; flex-direction: column; gap: 12px; }
}

/* Larger touch targets on mobile inputs */
@media (max-width: 720px) {
	.oc-form input,
	.oc-form select,
	.oc-form textarea { min-height: 44px; font-size: 16px; /* prevents iOS zoom */ }
	.oc-btn { min-height: 44px; }
}

/* ════════════════════════════════════════════════════════════════════
   "Request a Vendor" floating-action-button + modal
   ════════════════════════════════════════════════════════════════════
   Promoted from the child theme to the parent so the FAB always
   renders as a fixed pill — without these rules it falls back to a
   regular inline button and stacks below the footer in normal flow.
   The `!important` flags are deliberate: the FAB is injected via
   wp_footer and must survive any Elementor / theme button resets. */
button.oc-vrq-fab,
.oc-vrq-fab {
	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	left: auto !important;
	top: auto !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--oc-burgundy, #6E0F2C) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 20px !important;
	margin: 0 !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(110, 15, 44, .28), 0 1px 3px rgba(0, 0, 0, .08);
	z-index: 9000;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	width: auto !important;
	height: auto !important;
}
.oc-vrq-fab svg { display: inline-block; flex-shrink: 0; }
button.oc-vrq-fab:hover,
.oc-vrq-fab:hover {
	background: var(--oc-burgundy-dark, #4A0A1E) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(110, 15, 44, .35), 0 2px 4px rgba(0, 0, 0, .1);
}
.oc-vrq-fab:focus-visible {
	outline: 3px solid var(--oc-gold, #C9A961) !important;
	outline-offset: 2px;
}
.oc-vrq-fab__label { display: inline-block; color: #fff !important; font-weight: 600; }
@media (max-width: 640px) {
	.oc-vrq-fab__label { display: none; }
	button.oc-vrq-fab,
	.oc-vrq-fab {
		padding: 14px !important;
		border-radius: 50% !important;
		right: 16px !important;
		bottom: 16px !important;
	}
}

.oc-vrq-modal { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .2s ease; }
.oc-vrq-modal.is-open { opacity: 1; }
/* CRITICAL: respect the `hidden` attribute on the modal. Without this rule
   the `display: flex` above overrides the browser's UA `[hidden] { display:
   none }`, leaving the closed modal sitting invisibly at z-index 9100 over
   the whole viewport and intercepting every click on the page. */
.oc-vrq-modal[hidden] { display: none !important; }
.oc-vrq-modal__backdrop { position: absolute; inset: 0; background: rgba(31, 27, 26, .55); backdrop-filter: blur(2px); }
.oc-vrq-modal__panel { position: relative; background: #fff; border-radius: 12px; max-width: 560px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; padding: 26px 28px 22px; box-shadow: 0 24px 48px rgba(0, 0, 0, .28); transform: translateY(8px); transition: transform .2s ease; }
.oc-vrq-modal.is-open .oc-vrq-modal__panel { transform: none; }
.oc-vrq-modal__close { position: absolute; right: 10px; top: 8px; background: transparent; border: 0; font-size: 26px; line-height: 1; color: #6B6361; cursor: pointer; padding: 6px 10px; border-radius: 6px; }
.oc-vrq-modal__close:hover { background: #FAF7F2; color: var(--oc-burgundy, #6E0F2C); }
.oc-vrq-modal__head h2 { margin: 0 0 4px; font-family: Georgia, serif; color: var(--oc-burgundy, #6E0F2C); font-size: 1.4rem; }
.oc-vrq-modal__head p { margin: 0 0 16px; color: #6B6361; font-size: 14px; }
.oc-vrq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.oc-vrq-field { display: flex; flex-direction: column; }
.oc-vrq-field--full { grid-column: 1 / -1; }
.oc-vrq-field label { font-size: 12px; font-weight: 600; color: #1F1B1A; margin-bottom: 4px; }
.oc-vrq-field input,
.oc-vrq-field select,
.oc-vrq-field textarea { border: 1px solid #ccd0d4; border-radius: 6px; padding: 9px 11px; font-size: 14px; background: #fff; font-family: inherit; }
.oc-vrq-field input:focus,
.oc-vrq-field select:focus,
.oc-vrq-field textarea:focus { border-color: var(--oc-burgundy, #6E0F2C); box-shadow: 0 0 0 3px rgba(110, 15, 44, .12); outline: none; }
.oc-vrq-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid #EFEAE2; }
@media (max-width: 520px) { .oc-vrq-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   Migrated from owambe-connect-child (May 2026)
   ════════════════════════════════════════════════════════════════════
   All client-feedback CSS has been folded into the parent so the
   child theme is no longer load-bearing. The child theme's style.css
   has been reduced to a thin shell and can be safely deactivated /
   deleted on the live site. Duplicate selectors are intentional:
   later rules win the cascade, so these refinements override the
   parent baselines defined above.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   Client Feedback v1 (May 2026) — UI refinements
   ════════════════════════════════════════════════════════════════════
   Grouped by feedback section so each rule is easy to find later.
   Burgundy = #6E0F2C / Gold = #C9A961 / Text-dark = #1F1B1A.
   Inherits CSS custom properties from the parent theme; we override
   nothing structural — only spacing, decoration, and small components.
   ════════════════════════════════════════════════════════════════════ */

/* §1.5 + §5.4 – Vendor register form polish ------------------------- */

.oc-auth__form-wrap { max-width: 480px; }

/* Icon adornments on email + password inputs */
.oc-field--with-icon .oc-field-inner {
	position: relative;
	display: flex;
	align-items: center;
}
.oc-field--with-icon .oc-field-inner input {
	padding-left: 40px;
	width: 100%;
}
.oc-field__icon {
	position: absolute;
	left: 12px;
	display: inline-flex;
	color: var(--oc-burgundy, #6E0F2C);
	opacity: .75;
	pointer-events: none;
}
.oc-field--pw .oc-field-inner input { padding-right: 40px; }
.oc-field__pw-toggle {
	position: absolute;
	right: 8px;
	background: transparent;
	border: 0;
	color: #6B6361;
	cursor: pointer;
	padding: 6px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.oc-field__pw-toggle:hover { color: var(--oc-burgundy, #6E0F2C); background: #FAF7F2; }
.oc-help-micro {
	color: #6B6361;
	font-size: 12px;
	margin-top: 4px;
	display: block;
}

/* Migrated card-style for these two blocks intentionally suppressed — the
   borderless versions live earlier in this stylesheet to keep the auth page
   minimal. Only the link colour from the old terms card is preserved here. */
.oc-auth__terms a { color: var(--oc-burgundy, #6E0F2C); text-decoration: underline; }
.oc-auth__terms a:hover { color: var(--oc-burgundy-dark, #4A0A1E); }

/* §5.6 – Vendor confirmation page link colour (was browser-default blue) */
.oc-vd__alert--success a,
.oc-auth__form-wrap a:not(.oc-btn),
.oc-vp__hero a:not(.oc-btn) { color: var(--oc-burgundy, #6E0F2C); }
.oc-vd__alert--success a:hover,
.oc-auth__form-wrap a:not(.oc-btn):hover { color: var(--oc-burgundy-dark, #4A0A1E); }

/* §2.2 – Field-level error highlight on dashboard form ------------- */

.oc-vd__field { position: relative; }
.oc-vd__field-error {
	display: none;
	color: #B0354F;
	font-size: 12px;
	margin-top: 6px;
	font-weight: 500;
}
.oc-vd__field.has-error .oc-vd__field-error { display: block; }
.oc-vd__field.has-error input,
.oc-vd__field.has-error select,
.oc-vd__field.has-error textarea {
	border-color: #B0354F !important;
	box-shadow: 0 0 0 3px rgba(176, 53, 79, .12);
}

/* §2.3 – Mobile checklist: collapsible + cross-out animation ------- */

.oc-vd__cmp-list-wrap { margin-top: 12px; }
.oc-vd__cmp-list-toggle {
	display: none; /* desktop hides the toggle; list is always open */
	width: 100%;
	background: transparent;
	border: 1px dashed #E4DDD2;
	color: #1F1B1A;
	padding: 10px 12px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
}
.oc-vd__cmp-list-toggle-chev { transition: transform .25s ease; }
.oc-vd__cmp-list-wrap.is-open .oc-vd__cmp-list-toggle-chev { transform: rotate(180deg); }
.oc-vd__cmp-list-wrap.is-open .oc-vd__cmp-list {
	max-height: 2000px;
	opacity: 1;
	margin-top: 8px;
	padding-top: 0;
}

@media (max-width: 700px) {
	.oc-vd__cmp-list-toggle { display: flex; }
	.oc-vd__cmp-list {
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition: max-height .35s ease, opacity .25s ease;
	}
}

/* Cross-out animation when an item completes */
.oc-vd__cmp-done-item {
	position: relative;
	color: #6B6361;
	animation: oc-strike-in .45s ease forwards;
}
.oc-vd__cmp-done-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: currentColor;
	opacity: .5;
	transform: scaleX(0);
	transform-origin: left center;
	animation: oc-strike-bar .45s .15s ease forwards;
}
@keyframes oc-strike-in   { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes oc-strike-bar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Pulse on the clicked checklist item (auto-advance feedback) */
.oc-vd__cmp-item.is-pulsing {
	background: rgba(110, 15, 44, .08);
	border-color: var(--oc-burgundy, #6E0F2C);
	transition: background .15s ease, border-color .15s ease;
}

/* §2.6 – Approval status pill prominence -------------------------- */

.oc-vd__status-card {
	background: #fff;
	border: 1px solid #E4DDD2;
	border-radius: 10px;
	padding: 18px 20px;
	margin: 18px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-left: 5px solid #6B6361;
}
.oc-vd__status-card--draft    { border-left-color: #6B6361;  background: #FAF7F2; }
.oc-vd__status-card--pending  { border-left-color: #B8860B;  background: #FFF8E6; }
.oc-vd__status-card--rejected { border-left-color: #B0354F;  background: #FBE5E6; }
.oc-vd__status-card--publish  { border-left-color: #2E7D5B;  background: #E9F5EF; }
.oc-vd__status-card small {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 11px;
	font-weight: 700;
	color: #6B6361;
}
.oc-vd__status-card strong {
	display: block;
	font-family: Georgia, serif;
	font-size: 1.5rem;
	margin: 4px 0;
}
.oc-vd__status-pill { font-weight: 700; padding: 6px 14px; }

/* §1.5 / §4.1-4.3 – Email-verify CTA + verified pill -------------- */

.oc-vd__verify-cta {
	background: linear-gradient(135deg, #FFF8E6 0%, #FAF1DE 100%);
	border: 1px solid #C9A961;
	border-radius: 10px;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}
.oc-vd__verify-cta h2 { margin: 0 0 4px; color: #6E0F2C; }
.oc-vd__verify-cta p  { margin: 0; font-size: 14px; color: #1F1B1A; }
@media (max-width: 600px) {
	.oc-vd__verify-cta { flex-direction: column; align-items: stretch; }
}

.oc-vd__verified-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #E9F5EF;
	color: #1F4D3A;
	border: 1px solid #2E7D5B;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	margin-left: 8px;
}

/* §9.1 – Vendor registration number ------------------------------- */

.oc-vd__card--vendor-id {
	background: linear-gradient(180deg, #FAF7F2 0%, #fff 100%);
	border-left: 4px solid var(--oc-gold, #C9A961);
}
.oc-vd__vendor-id {
	font-family: "Courier New", ui-monospace, Menlo, monospace;
	font-size: 1.6rem;
	letter-spacing: .08em;
	color: var(--oc-burgundy, #6E0F2C);
	background: #fff;
	border: 1px dashed #E4DDD2;
	padding: 12px 18px;
	border-radius: 6px;
	display: inline-block;
	margin: 8px 0 6px;
}

/* §1.10 – +44 prefix input -------------------------------------- */

.oc-vd__input-prefix {
	display: flex;
	align-items: stretch;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.oc-vd__input-prefix:focus-within {
	border-color: var(--oc-burgundy, #6E0F2C);
	box-shadow: 0 0 0 3px rgba(110, 15, 44, .12);
}
.oc-vd__input-prefix-tag {
	background: #F4EFE6;
	color: #1F1B1A;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-size: 14px;
	border-right: 1px solid #E4DDD2;
	user-select: none;
}
.oc-vd__input-prefix input {
	border: 0;
	flex: 1;
	padding: 9px 12px;
	font-size: 14px;
	outline: none;
}

/* §1.7 – Vendor tag accordion (14 narrow groups, live count badges) -- */

.oc-vd__tag-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
}
.oc-vd__tag-head label small {
	display: block;
	font-weight: 400;
	color: #6B6361;
	font-size: 12.5px;
	margin-top: 2px;
}
.oc-vd__tag-actions {
	margin-left: auto;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: #6B6361;
}
.oc-vd__tag-actions-sep { color: #C9A961; }
.oc-vd__tag-action {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--oc-burgundy, #6E0F2C);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.oc-vd__tag-action:hover { color: var(--oc-burgundy-dark, #4A0A1E); }

/* Flat (always-expanded) tag layout — every group is permanently
   visible. No toggle button, no chevron, just labelled cards with
   their chips below. Per client request: tags must be visible at a
   glance, no clicks required. */
.oc-vd__tag-flat {
	display: grid;
	gap: 10px;
}
@media (min-width: 900px) {
	/* Two-column layout on wider screens — 14 groups becomes a tidy 7×2. */
	.oc-vd__tag-flat {
		grid-template-columns: 1fr 1fr;
		gap: 10px 14px;
		align-items: start;
	}
}

.oc-vd__tag-group {
	border: 1px solid #E4DDD2;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.oc-vd__tag-group.has-selections {
	border-color: var(--oc-burgundy, #6E0F2C);
	box-shadow: 0 0 0 1px var(--oc-burgundy, #6E0F2C);
}

/* Static header — no longer a clickable button. Just title + count. */
.oc-vd__tag-group-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #FAF7F2;
	border-bottom: 1px solid #EFEAE2;
	color: #1F1B1A;
}
.oc-vd__tag-group.has-selections .oc-vd__tag-group-head {
	background: rgba(110, 15, 44, 0.06);
	border-bottom-color: rgba(110, 15, 44, 0.18);
}

.oc-vd__tag-group-title {
	font-weight: 600;
	flex: 1;
	color: #1F1B1A;
	font-size: 13.5px;
	letter-spacing: 0.01em;
}
.oc-vd__tag-group-count {
	background: #fff;
	color: #6B6361;
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 11.5px;
	min-width: 38px;
	text-align: center;
	border: 1px solid #E4DDD2;
}
.oc-vd__tag-group.has-selections .oc-vd__tag-group-count {
	background: var(--oc-burgundy, #6E0F2C);
	color: #fff;
	border-color: var(--oc-burgundy, #6E0F2C);
}

.oc-vd__tag-group-body {
	padding: 12px 14px 14px;
}
.oc-vd__tag-group-body .oc-vd__chips {
	gap: 6px;
}

/* §1.2 + §1.4 – Yes/No radio row -------------------------------- */

.oc-vd__radio-row {
	display: flex;
	gap: 6px;
	padding: 4px 0;
}
.oc-vd__radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid #E4DDD2;
	border-radius: 999px;
	cursor: pointer;
	background: #fff;
	font-size: 13px;
	font-weight: 500;
	color: #1F1B1A;
	transition: background .15s ease, border-color .15s ease;
}
.oc-vd__radio:has(input:checked) {
	background: var(--oc-burgundy, #6E0F2C);
	color: #fff;
	border-color: var(--oc-burgundy, #6E0F2C);
}
.oc-vd__radio input { accent-color: var(--oc-burgundy, #6E0F2C); }

/* §3.1-3.4 – Photos & gallery polish ---------------------------- */

.oc-vd__gallery-help {
	color: #6B6361;
	font-size: 13px;
	margin: 0 0 12px;
}
.oc-vd__gallery-item {
	position: relative;
	border: 1px solid #E4DDD2;
	border-radius: 8px;
	padding: 6px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.oc-vd__gallery-item.is-display {
	border-color: var(--oc-gold, #C9A961);
	box-shadow: 0 0 0 3px rgba(201, 169, 97, .25);
}
.oc-vd__gallery-badge {
	position: absolute;
	top: 4px;
	left: 4px;
	background: var(--oc-gold, #C9A961);
	color: #1F1B1A;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: .05em;
	z-index: 2;
}
.oc-vd__gallery-tools {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
	font-size: 11px;
	color: #6B6361;
}
.oc-vd__gallery-tools label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.oc-vd__gallery-tools input { margin: 0; }

/* Upload progress bar */
.oc-vd__upload-progress {
	margin-top: 10px;
	padding: 10px 12px;
	background: #FAF7F2;
	border: 1px solid #E4DDD2;
	border-radius: 6px;
}
.oc-vd__upload-bar {
	height: 6px;
	background: #EFEAE2;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 6px;
}
.oc-vd__upload-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--oc-burgundy, #6E0F2C), var(--oc-gold, #C9A961));
	width: 0%;
	transition: width .3s ease;
}
.oc-vd__upload-label { color: #6B6361; font-size: 12px; }

/* Password toggle for dashboard change-password row */
.oc-vd__field--pw { position: relative; }
.oc-vd__field--pw .oc-vd__pw-toggle {
	position: absolute;
	right: 6px;
	bottom: 4px;
	background: transparent;
	border: 0;
	color: #6B6361;
	cursor: pointer;
	padding: 6px;
	border-radius: 4px;
}
.oc-vd__field--pw input { padding-right: 40px; }
.oc-vd__field--pw .oc-vd__pw-toggle:hover { color: var(--oc-burgundy, #6E0F2C); background: #FAF7F2; }

/* §1.6 – "Report this vendor" subtle highlight ------------------ */

.oc-vp__report-trigger,
[data-oc-report] {
	position: relative;
	color: #B0354F !important;
	text-decoration: underline;
	text-decoration-color: rgba(176, 53, 79, .35);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color .15s ease, background .15s ease;
}
.oc-vp__report-trigger:hover,
[data-oc-report]:hover {
	background: rgba(176, 53, 79, .08);
	text-decoration-color: rgba(176, 53, 79, .85);
	border-radius: 4px;
}

/* §7.x – Section rhythm tokens (May 2026 follow-up) ------------------
   The original feedback asked for tighter sections; the round after that
   reported the opposite — section heads + section-to-section gaps felt
   cramped. We bake the rhythm into CSS variables here so every public
   section inherits the same spacing without per-widget tweaks.

   Override on a per-Elementor-section basis by setting
   --oc-section-py / --oc-section-head-gap on the section wrapper. */

:root {
	/* Vertical padding inside each section (top + bottom). Because two
	   adjacent sections both add this padding, the visible gap between
	   them is roughly 2× this value — sized accordingly. */
	--oc-section-py:        clamp(48px, 5vw,   72px);

	/* Gap between the section header block (title + lead) and the body
	   content underneath it. */
	--oc-section-head-gap:  clamp(24px, 2.5vw, 36px);

	/* Gap between the title and the lead paragraph inside the header. */
	--oc-section-title-gap: clamp(8px,  1vw,   12px);

	/* Gap between cards / rows inside a section's grid. */
	--oc-section-inner-gap: clamp(20px, 2vw,   28px);
}

/* Section padding — applies to both our shortcode templates (which wrap
   in <section class="oc-section">) and any Elementor section that opts
   in with data-oc-tight. */
.oc-section,
.elementor-section[data-oc-tight] {
	padding-top:    var(--oc-section-py) !important;
	padding-bottom: var(--oc-section-py) !important;
}

/* Section header rhythm — used by Featured Vendors, Categories, How it
   works, About blocks, and every other template that puts title + lead
   inside an .oc-section__head wrapper. */
.oc-section__head {
	margin: 0 0 var(--oc-section-head-gap);
	text-align: center;
}
.oc-section__title {
	line-height: 1.15;
	margin: 0 0 var(--oc-section-title-gap);
}
.oc-section__lead {
	margin: 0;
	line-height: 1.55;
}

/* Inner grid rhythm — every grid container inside a section. */
.oc-section .oc-grid,
.oc-section .oc-hiw__list,
.oc-section .oc-bav__features,
.oc-section .oc-bav__steps,
.oc-section .oc-vp__gallery,
.oc-section .oc-category-grid--scroll { gap: var(--oc-section-inner-gap); }

/* Explicit consistency for the landing-page sections the May feedback
   covered — defends against parent-theme overrides that would otherwise
   creep in (e.g. .oc-categories with its own padding). */
.oc-section.oc-categories,
.oc-section.oc-featured-vendors,
.oc-section.oc-hiw,
.oc-section.oc-bav {
	padding-top:    var(--oc-section-py);
	padding-bottom: var(--oc-section-py);
}

/* Make sure the hero search isn't sitting on top of the next section.
   The hero has its own internal layout so we only tame its bottom gap. */
.oc-hero { padding-bottom: var(--oc-section-py); }

/* Category-grid card minimum height + content alignment so all 6 cards
   in a row appear visually balanced (right now empty 0-vendor cards
   shrink below the populated ones, making the grid look ragged). */
.oc-section .oc-cat-card { min-height: 152px; justify-content: center; }

/* "How it works" / steps layout. The old connector hairline between cards
   was floating in empty space (positioned 30px from the top of each card,
   which didn't line up with the icon tile centre) and read as a visual
   bug rather than a flow indicator. Removed — the numbered chips and
   gold accent numerals already imply the sequence. */
.oc-how-it-works__steps {
	display: grid;
	gap: 18px;
	position: relative;
}
@media (min-width: 900px) {
	.oc-how-it-works__steps { grid-template-columns: repeat(3, 1fr); }
	.oc-how-it-works__steps > * { position: relative; }
}

/* §6.6 – Browse by Category horizontal scroll ------------------- */

.oc-category-grid--scroll,
.oc-cat-strip {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 6px 4px 14px;
	scrollbar-width: thin;
}
.oc-category-grid--scroll > *,
.oc-cat-strip > * {
	flex: 0 0 calc(50% - 7px);
	scroll-snap-align: start;
}
@media (min-width: 700px) {
	.oc-category-grid--scroll > *,
	.oc-cat-strip > * { flex-basis: 220px; }
}
.oc-category-grid--scroll::-webkit-scrollbar { height: 6px; }
.oc-category-grid--scroll::-webkit-scrollbar-thumb { background: #C9A961; border-radius: 999px; }

/* §6.2 + §6.3 – City dropdown + category icons in search -------- */

.oc-hero-search select,
.oc-hero-search__city {
	background: #fff;
	border: 1px solid #E4DDD2;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 15px;
	color: #1F1B1A;
	min-width: 0;
}
.oc-hero-search__cat-option { display: inline-flex; align-items: center; gap: 6px; }

/* Hero typeahead — custom autocomplete for the location field. The
   parent .oc-hero__form is a CSS grid where each direct child becomes a
   rounded pill, so we need to make sure our wrapper behaves like one
   cell. The clear (×) button and the suggestion list are absolutely
   positioned RELATIVE to the wrapper, never to the input. */
.oc-hero__field.oc-typeahead { position: relative; display: flex; align-items: stretch; }
.oc-typeahead__input { flex: 1 1 auto; min-width: 0; padding-right: 36px !important; }
.oc-typeahead__clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	font-size: 18px;
	line-height: 1;
	color: #6B6361;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 999px;
	z-index: 2;
}
.oc-typeahead__clear:hover { background: rgba(110,15,44,.08); color: var(--oc-burgundy, #6E0F2C); }
.oc-typeahead__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #E4DDD2;
	border-radius: 12px;
	box-shadow: 0 18px 36px rgba(31, 27, 26, .14), 0 4px 8px rgba(31, 27, 26, .05);
	margin: 0;
	padding: 8px;
	list-style: none;
	max-height: 320px;
	overflow-y: auto;
	z-index: 60;
	text-align: left;
}
.oc-typeahead__item {
	padding: 10px 14px;
	border-radius: 8px;
	cursor: pointer;
	color: #1F1B1A;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	transition: background .12s ease, color .12s ease;
}
.oc-typeahead__item:hover,
.oc-typeahead__item.is-active {
	background: rgba(110, 15, 44, .08);
	color: var(--oc-burgundy, #6E0F2C);
}
@media (max-width: 767px) {
	.oc-typeahead__list { max-height: 240px; }
}

/* §6.1 – Hero soft luxury background ---------------------------- */

.oc-hero,
.oc-section--hero {
	position: relative;
	background:
		linear-gradient(135deg, rgba(255,255,255,.85), rgba(250,247,242,.85)),
		radial-gradient(at top left, rgba(201, 169, 97, .18), transparent 50%),
		radial-gradient(at bottom right, rgba(110, 15, 44, .12), transparent 55%);
}
.oc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' opacity='0.05'><circle cx='30' cy='30' r='1.5' fill='%23C9A961'/><circle cx='90' cy='60' r='1' fill='%236E0F2C'/><circle cx='150' cy='30' r='1.2' fill='%23C9A961'/><circle cx='60' cy='120' r='1.5' fill='%236E0F2C'/><circle cx='120' cy='150' r='1' fill='%23C9A961'/></svg>");
	background-repeat: repeat;
	pointer-events: none;
	z-index: 0;
}
.oc-hero > * { position: relative; z-index: 1; }

/* §8.1-8.5 – Footer rebuild -------------------------------------
   This block USED to define footer typography for a light background
   (burgundy text on cream tiles, dark headings, grey body text). The
   parent theme however paints the footer burgundy — so those rules
   produced burgundy-on-burgundy headings, grey-on-burgundy body, and
   washed-out cream social pills on a dark surface. The parent's own
   .oc-footer rules (defined earlier in this file) already handle the
   dark-background palette correctly, so this section is intentionally
   left empty. The icon-bullet colour for column links is the one rule
   worth keeping — gold accent on hover, inherited link colour otherwise. */

.oc-footer__col-link-icon { color: var(--oc-gold, #C9A961); display: inline-flex; align-items: center; }
.oc-footer__col-list a:hover .oc-footer__col-link-icon { color: var(--oc-gold, #C9A961); }
.oc-footer__credit:empty { display: none; }

/* §1.0 – Verified / Founding badges on public profile ------------ */

/* Trust badges — Heroicons-style scalloped circle + glyph. Pure-icon
   design so they slot inline with H1 titles without breaking the line.
   .oc-badge sets size + vertical alignment; .oc-badge__bg picks up the
   colour from the modifier class via currentColor. */
.oc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: 10px;
	vertical-align: middle;
	line-height: 0;
	flex-shrink: 0;
	filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .14));
	transition: transform .15s ease;
}
.oc-badge:hover { transform: scale(1.08); }
.oc-badge__svg { display: block; }
.oc-badge--verified { color: var(--oc-burgundy, #6E0F2C); }
.oc-badge--founding { color: var(--oc-gold,    #C9A961); }

/* Slightly larger size when sitting next to a hero H1; admin-list pills
   shrink themselves below. */
.oc-vp__title .oc-badge { width: 26px; height: 26px; margin-left: 12px; }

.oc-vp__vendor-num {
	font-family: "Courier New", ui-monospace, Menlo, monospace;
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--oc-burgundy, #6E0F2C);
	background: rgba(255, 255, 255, .85);
	padding: 4px 10px;
	border-radius: 4px;
	display: inline-block;
	margin-top: 6px;
}

/* §FR.x – OC Feature Row widget · 2-col image + text section -----------
   Use [oc_feature_row image="..." heading="..." image_position="left|right"]
   or drop the matching Elementor widget. Section background is left
   transparent so Elementor section/widget background controls paint
   underneath. The ::before pseudo handles widget-controlled overlays. */

.oc-feature-row { position: relative; overflow: hidden; }
.oc-feature-row::before {
	content: "";
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: none;
	z-index: 0;
}
.oc-feature-row__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
}
@media (min-width: 800px) {
	.oc-feature-row__inner { grid-template-columns: 1fr 1fr; }
	.oc-feature-row--image-right .oc-feature-row__media   { order: 2; }
	.oc-feature-row--image-right .oc-feature-row__content { order: 1; }
}

.oc-feature-row__media { display: flex; justify-content: center; }
.oc-feature-row__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(31, 27, 26, .12), 0 4px 10px rgba(31, 27, 26, .05);
}

.oc-feature-row__content { max-width: 540px; }
.oc-feature-row__eyebrow {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--oc-gold, #C9A961);
	text-transform: uppercase;
	letter-spacing: .12em;
	margin: 0 0 14px;
}
.oc-feature-row__title {
	font-family: Georgia, serif;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	color: var(--oc-burgundy, #6E0F2C);
	line-height: 1.15;
	margin: 0 0 18px;
}
.oc-feature-row__body {
	color: #1F1B1A;
	font-size: 16.5px;
	line-height: 1.65;
	margin: 0 0 26px;
}
.oc-feature-row__body p { margin: 0 0 14px; }
.oc-feature-row__body p:last-child { margin-bottom: 0; }
.oc-feature-row__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--oc-burgundy, #6E0F2C);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 13px 26px;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(110, 15, 44, .18);
	transition: background .18s ease, transform .15s ease, box-shadow .15s ease;
}
.oc-feature-row__cta:hover {
	background: var(--oc-burgundy-dark, #4A0A1E);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(110, 15, 44, .25);
}
.oc-feature-row__cta svg { transition: transform .15s ease; }
.oc-feature-row__cta:hover svg { transform: translateX(3px); }

/* §VP-side – Quick info + Report this vendor (May 2026 polish) -------
   Replaces the dl/dt/dd block with a scannable icon list. Each row is
   a 28px gold-on-cream icon tile + uppercase label + bold value. Mobile
   stays single-column; desktop sidebar looks crisp without taking more
   vertical space than the old version did. */

.oc-vp__card--quick { padding: 18px 20px; }
.oc-vp__card-title {
	font-family: Georgia, serif;
	color: var(--oc-burgundy, #6E0F2C);
	font-size: 1rem;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #EFEAE2;
	letter-spacing: 0.01em;
}

.oc-vp__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.oc-vp__fact {
	display: grid;
	grid-template-columns: 30px 1fr;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed #EFEAE2;
}
.oc-vp__fact:last-child { border-bottom: 0; padding-bottom: 0; }
.oc-vp__fact:first-child { padding-top: 4px; }

.oc-vp__fact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: #FAF7F2;
	color: var(--oc-gold, #C9A961);
	flex-shrink: 0;
	margin-top: 1px;
}
.oc-vp__fact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.oc-vp__fact-label {
	font-size: 10.5px;
	font-weight: 700;
	color: #6B6361;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.2;
}
.oc-vp__fact-value {
	font-size: 14px;
	color: #1F1B1A;
	line-height: 1.45;
	font-weight: 500;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* Report this vendor — primary burgundy button. Same visual weight as
   the WhatsApp CTA at the top of the page but in brand colours, so the
   block reads as a real call-to-action, not a passive note. Uses
   !important on colours because the parent theme's anchor reset would
   otherwise reassert ink-grey on visited links. */
.oc-vp__report {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px 18px;
	background: var(--oc-burgundy, #6E0F2C) !important;
	color: #fff !important;
	text-decoration: none !important;
	border: 0;
	border-radius: 10px;
	margin-top: 14px;
	box-shadow: 0 6px 14px rgba(110, 15, 44, .20), 0 2px 4px rgba(110, 15, 44, .10);
	transition: background .18s ease, transform .15s ease, box-shadow .15s ease;
}
.oc-vp__report:hover,
.oc-vp__report:focus-visible {
	background: var(--oc-burgundy-dark, #4A0A1E) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(110, 15, 44, .28), 0 3px 6px rgba(110, 15, 44, .15);
}
.oc-vp__report:focus-visible {
	outline: 2px solid var(--oc-gold, #C9A961);
	outline-offset: 2px;
}

.oc-vp__report-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	flex-shrink: 0;
}
.oc-vp__report-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.oc-vp__report-text strong {
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
}
.oc-vp__report-text small {
	color: rgba(255, 255, 255, 0.85);
	font-size: 11.5px;
	line-height: 1.35;
}
.oc-vp__report-arrow {
	color: rgba(255, 255, 255, 0.7);
	flex-shrink: 0;
	transition: transform .15s ease, color .15s ease;
}
.oc-vp__report:hover .oc-vp__report-arrow {
	color: #fff;
	transform: translateX(4px);
}

/* §1.x – Vendor public profile · new sections (May 2026) -------------
   - Specialties & credentials row (cultural chips + Nigerian-specialist
     + Registered/sole-trader pill)
   - Vendor tags grouped by sub-category, rendered as soft chips */

.oc-vp__cultural-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.oc-vp__cultural-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	background: linear-gradient(135deg, #FAF7F2 0%, #fff 100%);
	border: 1px solid #E4DDD2;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: #1F1B1A;
	line-height: 1.2;
}
.oc-vp__cultural-chip-icon { color: var(--oc-gold, #C9A961); }
.oc-vp__cultural-chip--nigerian {
	background: linear-gradient(135deg, #FFF8E6 0%, #FAF1DE 100%);
	border-color: var(--oc-gold, #C9A961);
	color: #1F1B1A;
}
.oc-vp__cultural-chip--registered {
	background: #E9F5EF;
	color: #1F4D3A;
	border-color: #2E7D5B;
}
.oc-vp__cultural-chip--unregistered {
	background: #FAF7F2;
	color: #6B6361;
	border-color: #E4DDD2;
}
/* Cultural-specialty chip colour accents (the slug is the modifier suffix) */
.oc-vp__cultural-chip--african       .oc-vp__cultural-chip-icon { color: #B0354F; }
.oc-vp__cultural-chip--caribbean     .oc-vp__cultural-chip-icon { color: #2E7D5B; }
.oc-vp__cultural-chip--south-asian   .oc-vp__cultural-chip-icon { color: #A8893D; }
.oc-vp__cultural-chip--multicultural .oc-vp__cultural-chip-icon { color: #6E0F2C; }
.oc-vp__cultural-chip--luxury        .oc-vp__cultural-chip-icon { color: #C9A961; }
.oc-vp__cultural-chip--contemporary  .oc-vp__cultural-chip-icon { color: #1F1B1A; }

.oc-vp__tag-groups {
	display: grid;
	gap: 18px;
}
.oc-vp__tag-group { background: #FAF7F2; border: 1px solid #EFEAE2; border-radius: 8px; padding: 14px 16px; }
.oc-vp__tag-group-title {
	font-family: Inter, -apple-system, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--oc-burgundy, #6E0F2C);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 10px;
}
.oc-vp__tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.oc-vp__tag-chip {
	display: inline-flex;
	padding: 4px 11px;
	background: #fff;
	border: 1px solid #E4DDD2;
	border-radius: 6px;
	font-size: 12.5px;
	color: #1F1B1A;
	transition: border-color .12s ease, color .12s ease;
}
.oc-vp__tag-chip:hover { border-color: var(--oc-gold, #C9A961); color: var(--oc-burgundy, #6E0F2C); }

/* §7.x – Vendor card refresh ----------------------------------------
   - Stretched-link pattern: the whole card is clickable, not just the
     small "View profile →" text link.
   - "View profile" is now a proper burgundy button — clearly noticeable.
   - Card hover lift is more confident.
   - Every selector matches what the Elementor widget targets, so admin
     can re-skin via Elementor without these defaults fighting back. */

/* Stretched-link pattern (Bootstrap-style) ----------------------------
   The visible "View profile" anchor inside .oc-card__body extends an
   absolute ::after pseudo across the whole .oc-card. Click anywhere on
   the card → hits the pseudo → navigates via the parent anchor.

   The pseudo is `position: absolute` and its containing block is the
   nearest positioned ancestor — which is .oc-card (position:relative).
   With `inset: 0` the pseudo fills the entire card regardless of where
   the anchor itself sits inside it. One link in the DOM, one screen-
   reader announcement, nothing for parent-theme rules to fight with. */

.oc-card {
	position: relative;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.oc-card--clickable { cursor: pointer; }

/* The visible anchor needs its own z-index so its hover styles (button
   colour shift, arrow slide) render above the pseudo cover. */
.oc-card__cta {
	position: relative;
	z-index: 2;
}

/* The invisible stretched click area. */
.oc-card--clickable .oc-card__cta::after {
	content: "";
	position: absolute;
	inset: 0;            /* fills the nearest positioned ancestor = .oc-card */
	z-index: 1;
	cursor: pointer;
	/* No background — the pseudo is purely a hit area. Visible card
	   content underneath shows through normally. */
}

.oc-card__cta:focus-visible {
	outline: 2px solid var(--oc-gold, #C9A961);
	outline-offset: 2px;
}

/* View Profile — proper burgundy button, hover-fills darker + slides right */
.oc-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--oc-burgundy, #6E0F2C);
	color: #fff !important;
	font-weight: 600;
	font-size: 13px;
	padding: 10px 16px;
	border-radius: 6px;
	text-decoration: none;
	align-self: flex-start;
	margin-top: 6px;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
	box-shadow: 0 2px 6px rgba(110, 15, 44, .14);
}
.oc-card__cta-arrow { transition: transform .18s ease; }

.oc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .10), 0 3px 8px rgba(0, 0, 0, .04);
	border-color: var(--oc-burgundy, #6E0F2C);
}
.oc-card:hover .oc-card__cta {
	background: var(--oc-burgundy-dark, #4A0A1E);
	box-shadow: 0 4px 10px rgba(110, 15, 44, .25);
}
.oc-card:hover .oc-card__cta-arrow { transform: translateX(3px); }

/* Subtle media zoom on hover so the card feels alive */
.oc-card__media img { transition: transform .35s ease; }
.oc-card:hover .oc-card__media img { transform: scale(1.04); }

/* Title + badges line — keep the verified/founding badges aligned */
.oc-card__title { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* §6.5 – "Request a Vendor" floating action button + modal ------- */

/* Bulletproof rules — `!important` is used here deliberately because
   this element is injected via wp_footer and lives outside any normal
   theme container; we need to defend against Elementor / parent-theme
   button resets, container-style overrides, and any specificity wars
   that would otherwise re-flow it back into static layout. */
button.oc-vrq-fab,
.oc-vrq-fab {
	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	left: auto !important;
	top: auto !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--oc-burgundy, #6E0F2C) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 20px !important;
	margin: 0 !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(110, 15, 44, .28), 0 1px 3px rgba(0, 0, 0, .08);
	z-index: 9000;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	width: auto !important;
	height: auto !important;
}
.oc-vrq-fab svg { display: inline-block; flex-shrink: 0; }
button.oc-vrq-fab:hover,
.oc-vrq-fab:hover {
	background: var(--oc-burgundy-dark, #4A0A1E) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(110, 15, 44, .35), 0 2px 4px rgba(0, 0, 0, .1);
}
.oc-vrq-fab:focus-visible {
	outline: 3px solid var(--oc-gold, #C9A961) !important;
	outline-offset: 2px;
}
.oc-vrq-fab__label {
	display: inline-block;
	color: #fff !important;
	font-weight: 600;
}
@media (max-width: 640px) {
	.oc-vrq-fab__label { display: none; }
	button.oc-vrq-fab,
	.oc-vrq-fab {
		padding: 14px !important;
		border-radius: 50% !important;
	}
}

.oc-vrq-modal {
	position: fixed;
	inset: 0;
	z-index: 9100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .2s ease;
}
.oc-vrq-modal.is-open { opacity: 1; }
/* CRITICAL: respect the `hidden` attribute on the modal. Without this rule
   the `display: flex` above overrides the browser's UA `[hidden] { display:
   none }`, leaving the closed modal sitting invisibly at z-index 9100 over
   the whole viewport and intercepting every click on the page. */
.oc-vrq-modal[hidden] { display: none !important; }
.oc-vrq-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 27, 26, .55);
	backdrop-filter: blur(2px);
}
.oc-vrq-modal__panel {
	position: relative;
	background: #fff;
	border-radius: 12px;
	max-width: 560px;
	width: 100%;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 26px 28px 22px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, .28);
	transform: translateY(8px);
	transition: transform .2s ease;
}
.oc-vrq-modal.is-open .oc-vrq-modal__panel { transform: none; }

.oc-vrq-modal__close {
	position: absolute;
	right: 10px;
	top: 8px;
	background: transparent;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: #6B6361;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 6px;
}
.oc-vrq-modal__close:hover { background: #FAF7F2; color: var(--oc-burgundy, #6E0F2C); }

.oc-vrq-modal__head h2 {
	margin: 0 0 4px;
	font-family: Georgia, serif;
	color: var(--oc-burgundy, #6E0F2C);
	font-size: 1.4rem;
}
.oc-vrq-modal__head p {
	margin: 0 0 16px;
	color: #6B6361;
	font-size: 14px;
}

.oc-vrq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 14px;
}
.oc-vrq-field { display: flex; flex-direction: column; }
.oc-vrq-field--full { grid-column: 1 / -1; }
.oc-vrq-field label {
	font-size: 12px;
	font-weight: 600;
	color: #1F1B1A;
	margin-bottom: 4px;
}
.oc-req { color: #B0354F; }
.oc-vrq-field input,
.oc-vrq-field select,
.oc-vrq-field textarea {
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	padding: 9px 11px;
	font-size: 14px;
	background: #fff;
	font-family: inherit;
}
.oc-vrq-field input:focus,
.oc-vrq-field select:focus,
.oc-vrq-field textarea:focus {
	border-color: var(--oc-burgundy, #6E0F2C);
	box-shadow: 0 0 0 3px rgba(110, 15, 44, .12);
	outline: none;
}

.oc-vrq-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #EFEAE2;
}

@media (max-width: 520px) {
	.oc-vrq-grid { grid-template-columns: 1fr; }
}

/* Admin list — vendor pills underneath the name */
.oc-vl-vendor__pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 2px;
	align-items: center;
}
.oc-vl-vendor__num {
	font-family: "Courier New", ui-monospace, Menlo, monospace;
	font-size: 10.5px;
	letter-spacing: .06em;
	color: var(--oc-burgundy, #6E0F2C);
	background: #FAF7F2;
	border: 1px solid #E4DDD2;
	padding: 1px 6px;
	border-radius: 3px;
}
.oc-vl-vendor__verified {
	background: #E9F5EF;
	color: #1F4D3A;
	border: 1px solid #2E7D5B;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
}
.oc-vl-vendor__founding {
	background: linear-gradient(135deg, #FFF3D6, #FAF1DE);
	color: #6E0F2C;
	border: 1px solid var(--oc-gold, #C9A961);
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
}