/* =========================================================================
   OnlineComrade — Canopy & Market
   One stylesheet for the whole platform. Loaded on every page.
   ========================================================================= */

:root {
	/* Canopy — the anchor colour */
	--oc-canopy:        #0B5D3B;
	--oc-canopy-dark:   #073F28;
	--oc-canopy-soft:   #E7F0EA;

	/* Market gold — actions and highlights, used sparingly */
	--oc-gold:          #E8A317;
	--oc-gold-dark:     #A87209;
	--oc-gold-soft:     #FDF3DE;

	/* Ink and neutrals */
	--oc-ink:           #14261C;
	--oc-body:          #3F4B43;
	--oc-muted:         #6E7C72;
	--oc-line:          #DFE5DE;
	--oc-line-soft:     #EDF1EC;
	--oc-bg:            #F2F5F1;
	--oc-card:          #FFFFFF;

	/* States */
	--oc-danger:        #B42318;
	--oc-danger-soft:   #FEF0EE;
	--oc-success:       #0B5D3B;
	--oc-success-soft:  #E7F0EA;

	/* Tag colours — these encode where a post routes */
	--oc-tag-job:       #1F5FA9;
	--oc-tag-job-bg:    #E8F0FA;
	--oc-tag-house:     #6B4E9E;
	--oc-tag-house-bg:  #F0EBF9;
	--oc-tag-event:     #B03A6E;
	--oc-tag-event-bg:  #FBEBF2;
	--oc-tag-update:    #17756B;
	--oc-tag-update-bg: #E4F2F0;
	--oc-tag-offer:     #A87209;
	--oc-tag-offer-bg:  #FDF3DE;
	--oc-tag-product:   #C2410C;
	--oc-tag-product-bg:#FDEEE6;

	/* Type */
	--oc-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
	--oc-sans:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Shape and rhythm */
	--oc-r:       10px;
	--oc-r-sm:    8px;
	--oc-r-lg:    16px;
	--oc-gap:     16px;
	--oc-shadow:  0 1px 2px rgba(20,38,28,.05), 0 4px 16px rgba(20,38,28,.05);
	--oc-shadow-lift: 0 2px 4px rgba(20,38,28,.06), 0 12px 32px rgba(20,38,28,.10);
}

/* ---------------------------------------------------------------- base --- */

.oc, .oc * { box-sizing: border-box; }

.oc {
	font-family: var(--oc-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--oc-body);
	-webkit-font-smoothing: antialiased;
}

.oc h1, .oc h2, .oc h3, .oc h4 {
	font-family: var(--oc-display);
	color: var(--oc-ink);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.015em;
	margin: 0 0 .4em;
}

.oc h1 { font-size: 30px; }
.oc h2 { font-size: 22px; }
.oc h3 { font-size: 17px; }
.oc h4 { font-size: 15px; }
.oc p  { margin: 0 0 1em; }
.oc a  { color: var(--oc-canopy); text-decoration: none; }
.oc a:hover { color: var(--oc-canopy-dark); text-decoration: underline; }

.oc-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--oc-muted);
	margin: 0 0 6px;
}

.oc-muted { color: var(--oc-muted); }
.oc-small { font-size: 13px; }

/* -------------------------------------------------------------- buttons --- */

.oc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--oc-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 20px;
	border-radius: var(--oc-r-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
	text-decoration: none;
	white-space: nowrap;
}

.oc-btn:hover { text-decoration: none; }
.oc-btn:active { transform: translateY(1px); }
.oc-btn:focus-visible { outline: 2px solid var(--oc-canopy); outline-offset: 2px; }

.oc-btn--primary { background: var(--oc-canopy); color: #fff; }
.oc-btn--primary:hover { background: var(--oc-canopy-dark); color: #fff; }

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

.oc-btn--ghost {
	background: var(--oc-card);
	color: var(--oc-ink);
	border-color: var(--oc-line);
}
.oc-btn--ghost:hover { border-color: var(--oc-canopy); color: var(--oc-canopy); }

.oc-btn--danger { background: var(--oc-danger-soft); color: var(--oc-danger); }
.oc-btn--danger:hover { background: #FBDEDA; color: var(--oc-danger); }

.oc-btn--wa { background: #1FA855; color: #fff; }
.oc-btn--wa:hover { background: #17924A; color: #fff; }

.oc-btn--sm { padding: 8px 14px; font-size: 13px; }
.oc-btn--block { width: 100%; }
.oc-btn[disabled], .oc-btn--disabled {
	opacity: .5;
	pointer-events: none;
}

/* ---------------------------------------------------------------- cards --- */

.oc-card {
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	box-shadow: var(--oc-shadow);
}

.oc-card__body { padding: 20px; }

.oc-panel {
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 24px;
	box-shadow: var(--oc-shadow);
}

/* ----------------------------------------------------------- tag chips --- */

.oc-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--oc-line-soft);
	color: var(--oc-body);
	white-space: nowrap;
}

.oc-chip--job     { background: var(--oc-tag-job-bg);     color: var(--oc-tag-job); }
.oc-chip--house   { background: var(--oc-tag-house-bg);   color: var(--oc-tag-house); }
.oc-chip--event   { background: var(--oc-tag-event-bg);   color: var(--oc-tag-event); }
.oc-chip--update  { background: var(--oc-tag-update-bg);  color: var(--oc-tag-update); }
.oc-chip--offer   { background: var(--oc-tag-offer-bg);   color: var(--oc-tag-offer); }
.oc-chip--product { background: var(--oc-tag-product-bg); color: var(--oc-tag-product); }

.oc-chip--sold    { background: var(--oc-danger-soft);  color: var(--oc-danger); }
.oc-chip--live    { background: var(--oc-success-soft); color: var(--oc-success); }
.oc-chip--pending { background: var(--oc-gold-soft);    color: var(--oc-gold-dark); }

/* Verified checkmark */
.oc-verified {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--oc-canopy);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	vertical-align: 1px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------- forms --- */

.oc-field { margin-bottom: 18px; }

.oc-label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--oc-ink);
	margin-bottom: 6px;
}

.oc-label .oc-req { color: var(--oc-danger); margin-left: 2px; }

.oc-hint {
	font-size: 12.5px;
	color: var(--oc-muted);
	margin-top: 6px;
	line-height: 1.5;
}

.oc-input,
.oc-select,
.oc-textarea {
	width: 100%;
	font-family: var(--oc-sans);
	font-size: 15px;
	color: var(--oc-ink);
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r-sm);
	padding: 11px 13px;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.oc-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.oc-select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236E7C72' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 36px;
}

.oc-input:focus,
.oc-select:focus,
.oc-textarea:focus {
	outline: none;
	border-color: var(--oc-canopy);
	box-shadow: 0 0 0 3px rgba(11,93,59,.10);
}

.oc-input::placeholder, .oc-textarea::placeholder { color: #A3AEA6; }

.oc-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--oc-gap);
}

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

/* Tag picker — the heart of the post form */
.oc-tagpick {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}

.oc-tagpick input { position: absolute; opacity: 0; pointer-events: none; }

.oc-tagpick label {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 15px;
	border: 1.5px solid var(--oc-line);
	border-radius: var(--oc-r-sm);
	cursor: pointer;
	background: var(--oc-card);
	transition: border-color .15s ease, background .15s ease;
}

.oc-tagpick label:hover { border-color: var(--oc-muted); }

.oc-tagpick .oc-tagpick__name {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--oc-ink);
}

.oc-tagpick .oc-tagpick__where { font-size: 12px; color: var(--oc-muted); }

.oc-tagpick input:checked + label {
	border-color: var(--oc-canopy);
	background: var(--oc-canopy-soft);
}

.oc-tagpick input:focus-visible + label { outline: 2px solid var(--oc-canopy); outline-offset: 2px; }

.oc-tagpick input:disabled + label {
	opacity: .45;
	cursor: not-allowed;
	background: var(--oc-line-soft);
}

/* Conditional field groups */
.oc-cond { display: none; }
.oc-cond.is-on { display: block; }

.oc-fieldset {
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 20px;
	margin: 0 0 20px;
	background: #FBFCFA;
}

.oc-fieldset legend {
	font-family: var(--oc-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--oc-ink);
	padding: 0 8px;
}

/* -------------------------------------------------------------- uploads --- */

.oc-upload {
	border: 1.5px dashed var(--oc-line);
	border-radius: var(--oc-r);
	background: #FBFCFA;
	padding: 26px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.oc-upload:hover, .oc-upload.is-over {
	border-color: var(--oc-canopy);
	background: var(--oc-canopy-soft);
}

.oc-upload__title { font-weight: 600; color: var(--oc-ink); font-size: 14.5px; }
.oc-upload__hint { font-size: 12.5px; color: var(--oc-muted); margin-top: 3px; }

.oc-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.oc-thumb {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--oc-r-sm);
	overflow: hidden;
	border: 1px solid var(--oc-line);
	background: var(--oc-line-soft);
}

.oc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.oc-thumb__x {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: rgba(20,38,28,.75);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oc-thumb__x:hover { background: var(--oc-danger); }

.oc-thumb.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,.7) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%230B5D3B' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-dasharray='40 20'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat;
}

/* -------------------------------------------------------------- notices --- */

.oc-notice {
	display: flex;
	gap: 10px;
	padding: 13px 16px;
	border-radius: var(--oc-r-sm);
	font-size: 14px;
	margin-bottom: 18px;
	border: 1px solid transparent;
	line-height: 1.55;
}

.oc-notice--ok    { background: var(--oc-success-soft); color: var(--oc-canopy-dark); border-color: #C3DCCE; }
.oc-notice--warn  { background: var(--oc-gold-soft);    color: var(--oc-gold-dark);   border-color: #F2DDAC; }
.oc-notice--error { background: var(--oc-danger-soft);  color: var(--oc-danger);      border-color: #F6CFCA; }
.oc-notice--info  { background: var(--oc-line-soft);    color: var(--oc-body);        border-color: var(--oc-line); }

/* --------------------------------------------------------------- portal --- */

.oc-portal {
	display: grid;
	grid-template-columns: 232px 1fr;
	gap: 28px;
	align-items: start;
	max-width: 1120px;
	margin: 0 auto;
}

.oc-portal__nav {
	position: sticky;
	top: 24px;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 8px;
	box-shadow: var(--oc-shadow);
}

.oc-portal__who {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 12px 14px;
	border-bottom: 1px solid var(--oc-line-soft);
	margin-bottom: 8px;
}

.oc-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--oc-canopy-soft);
	flex: 0 0 auto;
	display: block;
}

.oc-avatar--lg { width: 76px; height: 76px; }

.oc-portal__name {
	font-weight: 600;
	color: var(--oc-ink);
	font-size: 14.5px;
	line-height: 1.3;
	word-break: break-word;
}

.oc-portal__plan { font-size: 12px; color: var(--oc-muted); }

.oc-portal__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-radius: var(--oc-r-sm);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--oc-body);
	transition: background .13s ease, color .13s ease;
}

.oc-portal__link:hover { background: var(--oc-line-soft); color: var(--oc-ink); text-decoration: none; }

.oc-portal__link.is-active {
	background: var(--oc-canopy);
	color: #fff;
	font-weight: 600;
}

.oc-portal__link.is-active:hover { background: var(--oc-canopy-dark); color: #fff; }

.oc-portal__count {
	font-size: 12px;
	font-weight: 600;
	background: rgba(0,0,0,.06);
	padding: 1px 7px;
	border-radius: 999px;
}

.oc-portal__link.is-active .oc-portal__count { background: rgba(255,255,255,.22); }

.oc-portal__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.oc-portal__head h1 { margin: 0; }

@media (max-width: 860px) {
	.oc-portal { grid-template-columns: 1fr; gap: 18px; }

	.oc-portal__nav {
		position: static;
		padding: 0;
		border: none;
		box-shadow: none;
		background: transparent;
	}

	.oc-portal__who {
		background: var(--oc-card);
		border: 1px solid var(--oc-line);
		border-radius: var(--oc-r);
		margin-bottom: 12px;
		padding: 14px;
	}

	.oc-portal__links {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.oc-portal__links::-webkit-scrollbar { display: none; }

	.oc-portal__link {
		background: var(--oc-card);
		border: 1px solid var(--oc-line);
		white-space: nowrap;
		flex: 0 0 auto;
	}
}

/* ---------------------------------------------------------------- stats --- */

.oc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
	margin-bottom: 22px;
}

.oc-stat {
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 16px 18px;
}

.oc-stat__n {
	font-family: var(--oc-display);
	font-size: 28px;
	font-weight: 600;
	color: var(--oc-ink);
	line-height: 1.1;
	letter-spacing: -.02em;
}

.oc-stat__l {
	font-size: 12.5px;
	color: var(--oc-muted);
	margin-top: 2px;
}

/* Usage meter for the product limit */
.oc-meter {
	height: 6px;
	border-radius: 999px;
	background: var(--oc-line-soft);
	overflow: hidden;
	margin-top: 10px;
}

.oc-meter__fill {
	height: 100%;
	background: var(--oc-canopy);
	border-radius: 999px;
	transition: width .3s ease;
}

.oc-meter__fill.is-warn { background: var(--oc-gold); }
.oc-meter__fill.is-full { background: var(--oc-danger); }

/* --------------------------------------------------------- item rows ----- */

.oc-list { display: flex; flex-direction: column; gap: 12px; }

.oc-item {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	gap: 16px;
	align-items: center;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.oc-item:hover { border-color: #C9D4CB; box-shadow: var(--oc-shadow); }

.oc-item__img {
	width: 84px;
	height: 84px;
	border-radius: var(--oc-r-sm);
	object-fit: cover;
	background: var(--oc-line-soft);
	display: block;
}

.oc-item__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 5px;
}

.oc-item__title {
	font-family: var(--oc-display);
	font-size: 16.5px;
	font-weight: 600;
	color: var(--oc-ink);
	margin: 0 0 3px;
	line-height: 1.3;
}

.oc-item__title a { color: inherit; }
.oc-item__title a:hover { color: var(--oc-canopy); text-decoration: none; }

.oc-item__sub { font-size: 13px; color: var(--oc-muted); }

.oc-item__price {
	font-family: var(--oc-display);
	font-weight: 600;
	color: var(--oc-ink);
	font-size: 15px;
}

.oc-item__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 620px) {
	.oc-item { grid-template-columns: 64px 1fr; }
	.oc-item__img { width: 64px; height: 64px; }
	.oc-item__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------------------------------------------------------------- empty --- */

.oc-empty {
	text-align: center;
	padding: 48px 24px;
	background: var(--oc-card);
	border: 1px dashed var(--oc-line);
	border-radius: var(--oc-r);
}

.oc-empty h3 { margin-bottom: 6px; }
.oc-empty p { color: var(--oc-muted); max-width: 380px; margin: 0 auto 18px; }

/* ----------------------------------------------------------------- auth --- */

.oc-auth {
	max-width: 420px;
	margin: 0 auto;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r-lg);
	padding: 32px;
	box-shadow: var(--oc-shadow-lift);
}

.oc-auth h1 { font-size: 25px; margin-bottom: 4px; }
.oc-auth__intro { color: var(--oc-muted); font-size: 14px; margin-bottom: 24px; }

.oc-auth__foot {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--oc-line-soft);
	font-size: 14px;
	text-align: center;
	color: var(--oc-muted);
}

.oc-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	cursor: pointer;
	padding: 13px 14px;
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r-sm);
	background: #FBFCFA;
}

.oc-check input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--oc-canopy); }
.oc-check strong { color: var(--oc-ink); display: block; }
.oc-check span { color: var(--oc-muted); font-size: 12.5px; }

/* --------------------------------------------------------------- misc ----- */

.oc-divider { height: 1px; background: var(--oc-line-soft); margin: 24px 0; border: 0; }

.oc-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--oc-line-soft);
}

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

@media (prefers-reduced-motion: reduce) {
	.oc *, .oc *::before, .oc *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ------------------------------------------------------- single post --- */

.oc-single { margin-top: 26px; }

.oc-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 26px;
}

.oc-gallery__item {
	display: block;
	border-radius: var(--oc-r-sm);
	overflow: hidden;
	background: var(--oc-line-soft);
	aspect-ratio: 1;
}

.oc-gallery__item.is-lead {
	grid-column: span 4;
	aspect-ratio: 16 / 10;
	border-radius: var(--oc-r);
}

.oc-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.oc-gallery__item:hover img { transform: scale(1.03); }

.oc-single__grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 28px;
	align-items: start;
}

.oc-single__side { position: sticky; top: 24px; }

@media (max-width: 860px) {
	.oc-single__grid { grid-template-columns: 1fr; }
	.oc-single__side { position: static; }
	.oc-gallery { grid-template-columns: repeat(3, 1fr); }
	.oc-gallery__item.is-lead { grid-column: span 3; }
}

.oc-details {
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	overflow: hidden;
	background: var(--oc-card);
}

.oc-details__row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 16px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--oc-line-soft);
}

.oc-details__row:last-child { border-bottom: 0; }
.oc-details__row:nth-child(odd) { background: #FBFCFA; }

.oc-details__k { font-size: 13.5px; color: var(--oc-muted); font-weight: 500; }
.oc-details__v { font-size: 14.5px; color: var(--oc-ink); }

@media (max-width: 560px) {
	.oc-details__row { grid-template-columns: 1fr; gap: 2px; }
}

.oc-contact { padding: 22px; }

.oc-price-big {
	font-family: var(--oc-display);
	font-size: 30px;
	font-weight: 600;
	color: var(--oc-ink);
	letter-spacing: -.02em;
	line-height: 1.1;
	margin-bottom: 4px;
}

.oc-contact__place {
	font-size: 14px;
	color: var(--oc-muted);
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--oc-line-soft);
}

.oc-contact__by {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--oc-line-soft);
}

/* ============================================================ grids ===== */

.oc-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, 1fr);
}

.oc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.oc-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
	.oc-grid, .oc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.oc-grid, .oc-grid--2, .oc-grid--4 { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================ card ====== */

.oc-card2 {
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.oc-card2:hover {
	border-color: #C9D4CB;
	box-shadow: var(--oc-shadow-lift);
	transform: translateY(-2px);
}

.oc-card2__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--oc-canopy-soft);
	overflow: hidden;
}

.oc-card2__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.oc-card2:hover .oc-card2__media img { transform: scale(1.04); }

.oc-card2__blank {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--oc-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--oc-canopy);
	opacity: .45;
	text-transform: uppercase;
}

.oc-card2__tag { position: absolute; top: 10px; left: 10px; }

.oc-card2__sold {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--oc-danger);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
}

.oc-card2__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.oc-card2__title {
	font-family: var(--oc-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.32;
	margin: 0 0 4px;
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.oc-card2__title a { color: var(--oc-ink); }
.oc-card2__title a:hover { color: var(--oc-canopy); text-decoration: none; }

.oc-card2__sub {
	font-size: 13px;
	color: var(--oc-muted);
	margin: 0 0 12px;
	line-height: 1.45;
}

.oc-card2__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--oc-line-soft);
}

.oc-card2__price {
	font-family: var(--oc-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--oc-ink);
}

.oc-card2__price small { font-size: 12px; font-weight: 400; color: var(--oc-muted); }
.oc-card2__date { font-size: 12.5px; color: var(--oc-muted); }

.oc-card2__wa {
	font-size: 12.5px;
	font-weight: 600;
	color: #1FA855;
	padding: 4px 10px;
	border-radius: 999px;
	background: #E9F7EF;
}

.oc-card2__wa:hover { background: #D7F0E2; color: #17924A; text-decoration: none; }

.oc-card2--biz .oc-card2__media { aspect-ratio: 16 / 9; }
.oc-card2--biz .oc-card2__blank { font-size: 34px; }

/* ============================================================ feed ====== */

.oc-feed { margin: 0 auto; }

.oc-filters {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

/*
 * Width only — never a flex shorthand here. This input now lives inside a
 * column-direction wrapper, where a flex-basis would be read as a height.
 */
.oc-filters__q { width: 100%; }
.oc-filters__sort { flex: 0 1 190px; }

.oc-feed__count {
	font-size: 13px;
	color: var(--oc-muted);
	margin: 0 0 14px;
}

.oc-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
}

.oc-pager__now { font-size: 13.5px; color: var(--oc-muted); }

/* ============================================================ rail ====== */

.oc-rail { margin: 0 0 40px; }

.oc-rail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.oc-rail__title {
	font-size: 22px;
	margin: 0;
	letter-spacing: -.02em;
}

.oc-rail__tools { display: flex; align-items: center; gap: 8px; }

.oc-rail__arrow {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--oc-line);
	background: var(--oc-card);
	color: var(--oc-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease, background .15s ease;
}

.oc-rail__arrow:hover { border-color: var(--oc-canopy); background: var(--oc-canopy-soft); }
.oc-rail__arrow[disabled] { opacity: .35; cursor: default; }

@media (max-width: 700px) { .oc-rail__arrow { display: none; } }

.oc-rail__more {
	font-size: 14px;
	font-weight: 600;
	color: var(--oc-canopy);
	white-space: nowrap;
}

.oc-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 1fr);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	scrollbar-width: thin;
}

.oc-rail__track::-webkit-scrollbar { height: 6px; }
.oc-rail__track::-webkit-scrollbar-thumb { background: var(--oc-line); border-radius: 999px; }

.oc-rail__cell { scroll-snap-align: start; }

@media (min-width: 1000px) { .oc-rail__track { grid-auto-columns: minmax(260px, 1fr); } }
@media (max-width: 560px)  { .oc-rail__track { grid-auto-columns: 78%; } }

/* ============================================================ header ==== */

.oc-head {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(255,255,255,.94);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--oc-line);
}

.oc-head__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	height: 64px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.oc-head__brand {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
}

.oc-head__brand:hover { text-decoration: none; }
.oc-head__brand img { max-height: 38px; width: auto; display: block; }

.oc-head__mark {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--oc-canopy);
	color: #fff;
	font-family: var(--oc-display);
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: -.02em;
}

.oc-head__name {
	font-family: var(--oc-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--oc-ink);
	letter-spacing: -.02em;
	white-space: nowrap;
}

.oc-head__nav { flex: 1 1 auto; min-width: 0; }

.oc-head__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.oc-head__list li { margin: 0; }

.oc-head__list a {
	display: block;
	padding: 8px 11px;
	border-radius: var(--oc-r-sm);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--oc-body);
	white-space: nowrap;
}

.oc-head__list a:hover { background: var(--oc-canopy-soft); color: var(--oc-canopy); text-decoration: none; }
.oc-head__list .current-menu-item > a { color: var(--oc-canopy); font-weight: 600; }

.oc-head__side {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: auto;
}

.oc-head__signin { font-size: 14.5px; font-weight: 500; color: var(--oc-body); white-space: nowrap; }
.oc-head__signin:hover { color: var(--oc-canopy); }
.oc-head__me { display: block; line-height: 0; }
.oc-head__me .oc-avatar { width: 34px; height: 34px; border: 1px solid var(--oc-line); }

.oc-head__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 38px;
	height: 38px;
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r-sm);
	background: var(--oc-card);
	cursor: pointer;
	padding: 0 9px;
}

.oc-head__burger span {
	display: block;
	height: 2px;
	background: var(--oc-ink);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.oc-head__panel {
	border-top: 1px solid var(--oc-line);
	background: var(--oc-card);
	padding: 8px 20px 16px;
}

.oc-head__panellist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.oc-head__panellist a {
	display: block;
	padding: 11px 12px;
	border-radius: var(--oc-r-sm);
	font-size: 15px;
	font-weight: 500;
	color: var(--oc-body);
}

.oc-head__panellist a:hover { background: var(--oc-canopy-soft); text-decoration: none; }

@media (max-width: 900px) {
	.oc-head__nav { display: none; }
	.oc-head__burger { display: flex; }
	.oc-head__signin { display: none; }
}

@media (max-width: 420px) {
	.oc-head__name { display: none; }
	.oc-head__inner { gap: 12px; padding: 0 14px; }
}

/* ============================================================ footer ==== */

.oc-foot {
	background: var(--oc-canopy-dark);
	color: #C8DACF;
	margin-top: 56px;
}

.oc-foot__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 20px 36px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
}

.oc-foot__brand {
	font-family: var(--oc-display);
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 8px;
	letter-spacing: -.02em;
}

.oc-foot__blurb {
	font-size: 14px;
	line-height: 1.65;
	color: #A9C2B4;
	max-width: 330px;
	margin-bottom: 18px;
}

.oc-foot__col h4 {
	font-family: var(--oc-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #7FA391;
	margin: 0 0 14px;
}

.oc-foot__col ul { list-style: none; margin: 0; padding: 0; }
.oc-foot__col li { margin-bottom: 9px; }

.oc-foot__col a { font-size: 14px; color: #C8DACF; }
.oc-foot__col a:hover { color: #fff; text-decoration: none; }

.oc-foot__bar {
	border-top: 1px solid rgba(255,255,255,.10);
	padding: 18px 20px;
	text-align: center;
	font-size: 13px;
	color: #7FA391;
}

@media (max-width: 860px) {
	.oc-foot__inner { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 20px 28px; }
	.oc-foot__col--wide { grid-column: 1 / -1; }
}

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

/* ========================================================= business ===== */

.oc-biz__top {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.oc-biz__logo {
	width: 96px;
	height: 96px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--oc-canopy-soft);
	border: 1px solid var(--oc-line);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oc-biz__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.oc-biz__logo span {
	font-family: var(--oc-display);
	font-size: 38px;
	font-weight: 600;
	color: var(--oc-canopy);
}

.oc-biz__id { flex: 1 1 260px; }

.oc-biz__name {
	font-size: 28px;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.oc-biz__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.oc-biz__place { font-size: 14px; color: var(--oc-muted); margin: 0; }

.oc-biz__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13.5px;
	color: var(--oc-muted);
}

.oc-biz__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--oc-line);
}

.oc-biz__h {
	font-size: 20px;
	margin: 32px 0 16px;
}

.oc-biz__h:first-child { margin-top: 0; }

.oc-biz__sh {
	font-family: var(--oc-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--oc-muted);
	margin: 18px 0 6px;
}

.oc-contact .oc-biz__sh:first-child { margin-top: 0; }

.oc-biz__socials { display: flex; flex-wrap: wrap; gap: 8px; }

.oc-biz__socials a {
	font-size: 13px;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--oc-canopy-soft);
	color: var(--oc-canopy);
}

.oc-biz__socials a:hover { background: #D7E7DD; text-decoration: none; }

.oc-ticks { list-style: none; margin: 0 0 20px; padding: 0; }

.oc-ticks li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 9px;
	font-size: 14.5px;
}

.oc-ticks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 1px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--oc-canopy);
	color: #fff;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------- category picker --- */

.oc-cats {
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 4px 16px 16px;
	max-height: 340px;
	overflow-y: auto;
	background: #FBFCFA;
}

.oc-cats__group { padding-top: 14px; }

.oc-cats__group h4 {
	font-family: var(--oc-sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--oc-muted);
	margin: 0 0 8px;
}

.oc-cats__items { display: flex; flex-wrap: wrap; gap: 7px; }

.oc-cats__item input { position: absolute; opacity: 0; pointer-events: none; }

.oc-cats__item span {
	display: inline-block;
	font-size: 13.5px;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1px solid var(--oc-line);
	background: var(--oc-card);
	cursor: pointer;
	transition: border-color .13s ease, background .13s ease, color .13s ease;
}

.oc-cats__item span:hover { border-color: var(--oc-muted); }

.oc-cats__item input:checked + span {
	background: var(--oc-canopy);
	border-color: var(--oc-canopy);
	color: #fff;
	font-weight: 500;
}

.oc-cats__item input:disabled + span { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------------------- reviews ----- */

.oc-stars { display: inline-flex; gap: 1px; line-height: 1; }
.oc-star { color: var(--oc-line); font-size: 15px; }
.oc-star.is-on { color: var(--oc-gold); }

.oc-reviews__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	margin-bottom: 20px;
}

.oc-reviews__score {
	font-family: var(--oc-display);
	font-size: 38px;
	font-weight: 600;
	color: var(--oc-ink);
	line-height: 1;
	letter-spacing: -.02em;
}

.oc-reviewform {
	background: #FBFCFA;
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 20px;
	margin-bottom: 24px;
}

.oc-rate {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 2px;
}

.oc-rate input { position: absolute; opacity: 0; pointer-events: none; }

.oc-rate label {
	font-size: 30px;
	line-height: 1;
	color: var(--oc-line);
	cursor: pointer;
	transition: color .12s ease;
}

.oc-rate input:checked ~ label,
.oc-rate label:hover,
.oc-rate label:hover ~ label { color: var(--oc-gold); }

.oc-rate input:focus-visible + label { outline: 2px solid var(--oc-canopy); outline-offset: 2px; }

.oc-reviews { display: flex; flex-direction: column; gap: 16px; }

.oc-review {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 14px;
	padding: 16px 18px;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
}

.oc-review__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 5px;
}

.oc-review__head strong { color: var(--oc-ink); font-size: 14.5px; }
.oc-review p { margin: 0; font-size: 14.5px; }

/* ======================================================= accordions ===== */

.oc-acc-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 32px;
}

.oc-acc {
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	overflow: hidden;
}

.oc-acc__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 18px;
	cursor: pointer;
	font-family: var(--oc-display);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--oc-ink);
	list-style: none;
	transition: background .13s ease;
	-webkit-tap-highlight-color: transparent;
}

.oc-acc__head::-webkit-details-marker { display: none; }
.oc-acc__head::marker { content: ""; }
.oc-acc__head:hover { background: #FBFCFA; }
.oc-acc__head:focus-visible { outline: 2px solid var(--oc-canopy); outline-offset: -2px; }

.oc-acc__n {
	font-family: var(--oc-sans);
	font-size: 11.5px;
	font-weight: 600;
	background: var(--oc-canopy-soft);
	color: var(--oc-canopy);
	padding: 2px 8px;
	border-radius: 999px;
}

.oc-acc__i {
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--oc-muted);
	border-bottom: 2px solid var(--oc-muted);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
	flex: 0 0 auto;
}

.oc-acc[open] > .oc-acc__head {
	background: var(--oc-canopy-soft);
	border-bottom: 1px solid var(--oc-line);
}

.oc-acc[open] > .oc-acc__head .oc-acc__i { transform: rotate(-135deg) translateY(-2px); }

.oc-acc__body { padding: 18px; }
.oc-acc__body > p:last-child { margin-bottom: 0; }
.oc-acc__body .oc-details { border: 0; border-radius: 0; }
.oc-acc__body .oc-details__row { padding-left: 0; padding-right: 0; }
.oc-acc__body .oc-details__row:nth-child(odd) { background: transparent; }
.oc-acc__body .oc-reviewform { margin-bottom: 20px; }

/* ================================================= responsive polish ==== */

/* Nothing should ever push the page sideways. */
.oc img, .oc video, .oc iframe { max-width: 100%; height: auto; }
.oc { overflow-wrap: break-word; word-wrap: break-word; }
.oc-portal__body, .oc-single__main { min-width: 0; }
.oc-rail, .oc-feed { max-width: 100%; }

/* Fluid headings so tablets are not stuck with desktop sizes. */
.oc h1 { font-size: clamp( 24px, 4.2vw, 30px ); }
.oc h2 { font-size: clamp( 19px, 3vw, 22px ); }
.oc-biz__name { font-size: clamp( 22px, 4.4vw, 28px ); }
.oc-rail__title { font-size: clamp( 18px, 3vw, 22px ); }
.oc-price-big { font-size: clamp( 25px, 4vw, 30px ); }
.oc-reviews__score { font-size: clamp( 30px, 5vw, 38px ); }

/* --- tablet, roughly 700 to 1024 ------------------------------------- */
@media (max-width: 1024px) {
	.oc-gallery { grid-template-columns: repeat(3, 1fr); }
	.oc-gallery__item.is-lead { grid-column: span 3; }
	.oc-details__row { grid-template-columns: 170px 1fr; }
	.oc-head__list a { padding: 8px 9px; font-size: 14px; }
}

@media (max-width: 820px) {
	.oc-biz__logo { width: 76px; height: 76px; border-radius: 12px; }
	.oc-biz__logo span { font-size: 30px; }
	.oc-biz__top { gap: 16px; margin-bottom: 16px; }
	.oc-biz__actions { padding-bottom: 18px; margin-bottom: 20px; }
	.oc-biz__h { margin: 26px 0 14px; }
}

/* --- phone ----------------------------------------------------------- */
@media (max-width: 640px) {

	/* 16px stops iOS zooming in when a field is tapped. */
	.oc-input, .oc-select, .oc-textarea { font-size: 16px; }

	.oc-acc__head { padding: 14px 15px; font-size: 15px; }
	.oc-acc__body { padding: 15px; }

	.oc-biz__actions { gap: 8px; }
	.oc-biz__actions .oc-btn { flex: 1 1 calc(50% - 4px); }

	.oc-gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; }
	.oc-gallery__item.is-lead { grid-column: span 2; aspect-ratio: 4 / 3; }

	.oc-reviews__summary { padding: 15px 16px; gap: 12px; }
	.oc-review { grid-template-columns: 34px 1fr; gap: 11px; padding: 14px 15px; }
	.oc-review .oc-avatar { width: 34px; height: 34px; }

	.oc-cats { max-height: 260px; padding: 2px 12px 12px; }
	.oc-fieldset { padding: 15px; }
	.oc-panel { padding: 18px; }
	.oc-auth { padding: 24px 20px; border-radius: var(--oc-r); }

	.oc-portal__head { gap: 12px; margin-bottom: 16px; }
	.oc-portal__head .oc-btn { width: 100%; }

	.oc-stats { gap: 10px; }
	.oc-stat { padding: 13px 15px; }
	.oc-stat__n { font-size: 24px; }

	.oc-pager { flex-wrap: wrap; }
	.oc-tagpick { grid-template-columns: 1fr 1fr; gap: 8px; }
	.oc-tagpick label { padding: 11px 12px; }
}

@media (max-width: 380px) {
	.oc-tagpick { grid-template-columns: 1fr; }
	.oc-biz__actions .oc-btn { flex: 1 1 100%; }
}

/* Landscape phones and small tablets keep the rail usable. */
@media (min-width: 641px) and (max-width: 900px) {
	.oc-rail__track { grid-auto-columns: minmax(210px, 1fr); }
}

/* ============================================================= social === */

.oc-like {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--oc-line);
	background: var(--oc-card);
	border-radius: 999px;
	padding: 5px 11px;
	font-family: var(--oc-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--oc-muted);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
	line-height: 1;
}

.oc-like:hover { border-color: #E0A0A0; color: #C8375D; text-decoration: none; }
.oc-like__heart { font-size: 14px; line-height: 1; }

.oc-like.is-on {
	border-color: #F0C3CE;
	background: #FDF0F3;
	color: #C8375D;
}

.oc-like.is-pop .oc-like__heart { animation: oc-pop .3s ease; }

@keyframes oc-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.4); }
	100% { transform: scale(1); }
}

.oc-like--sm { padding: 4px 9px; font-size: 12.5px; }

.oc-follow__n {
	font-size: 11.5px;
	font-weight: 600;
	opacity: .75;
	margin-left: 2px;
}

.oc-metrics {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: var(--oc-muted);
	margin-top: 8px;
}

.oc-metrics strong { color: var(--oc-ink); font-weight: 600; }

.oc-card2__acts { display: inline-flex; align-items: center; gap: 7px; }

.oc-contact__follow {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--oc-line-soft);
}

.oc-contact__biz {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--oc-line-soft);
	font-size: 14.5px;
	font-weight: 600;
}

.oc-portal__count.is-alert { background: var(--oc-gold); color: var(--oc-ink); }
.oc-portal__link.is-active .oc-portal__count.is-alert { background: var(--oc-gold); color: var(--oc-ink); }

/* ---------------------------------------------------------- messages --- */

.oc-thread {
	display: grid;
	grid-template-columns: 42px 1fr auto;
	gap: 13px;
	align-items: center;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 13px 15px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.oc-thread:hover { border-color: #C9D4CB; box-shadow: var(--oc-shadow); text-decoration: none; }
.oc-thread__mid { min-width: 0; }

.oc-thread__top {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
}

.oc-thread__top strong { color: var(--oc-ink); font-size: 14.5px; }

.oc-thread__last {
	margin: 2px 0 0;
	font-size: 13.5px;
	color: var(--oc-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oc-thread__badge {
	background: var(--oc-canopy);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}

.oc-chat {
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	overflow: hidden;
}

.oc-chat__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--oc-line);
	background: #FBFCFA;
}

.oc-chat__head strong { color: var(--oc-ink); font-size: 15px; }

.oc-chat__about {
	padding: 10px 18px;
	background: var(--oc-canopy-soft);
	font-size: 13.5px;
	border-bottom: 1px solid var(--oc-line);
}

.oc-chat__log {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 480px;
	overflow-y: auto;
}

.oc-bubble {
	max-width: 78%;
	background: var(--oc-line-soft);
	border-radius: 14px 14px 14px 4px;
	padding: 10px 14px;
	align-self: flex-start;
}

.oc-bubble.is-mine {
	align-self: flex-end;
	background: var(--oc-canopy);
	border-radius: 14px 14px 4px 14px;
}

.oc-bubble p { margin: 0; font-size: 14.5px; color: var(--oc-ink); }
.oc-bubble.is-mine p { color: #fff; }

.oc-bubble__t { font-size: 11px; color: var(--oc-muted); display: block; margin-top: 4px; }
.oc-bubble.is-mine .oc-bubble__t { color: rgba(255,255,255,.7); }

.oc-chat__form {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	padding: 14px 18px;
	border-top: 1px solid var(--oc-line);
	background: #FBFCFA;
}

.oc-chat__form .oc-textarea { min-height: 46px; }

@media (max-width: 560px) {
	.oc-bubble { max-width: 88%; }
	.oc-chat__log { padding: 14px; max-height: 60vh; }
	.oc-chat__form { padding: 12px 14px; flex-direction: column; align-items: stretch; }
	.oc-chat__form .oc-btn { width: 100%; }
	.oc-thread { grid-template-columns: 36px 1fr auto; gap: 11px; padding: 12px; }
	.oc-thread .oc-avatar { width: 36px; height: 36px; }
}

.oc-chat__form .oc-textarea { flex: 1 1 auto; min-width: 0; }
.oc-acc__body .oc-talk { margin-top: 0; }
.oc-talk .oc-biz__h:first-child { margin-top: 0; }

/* ══════════════════════════════════════════ overflow hard guard ═══════ */
/*
   A scrolling strip inside a CSS grid can force its grid track wider than
   the screen, which makes the whole page scroll sideways on a phone. Grid
   and flex children default to min-width:auto, so they must be told they
   are allowed to shrink. This block does that everywhere it matters.
*/

.oc-portal,
.oc-portal__nav,
.oc-portal__links,
.oc-portal__body,
.oc-portal__head,
.oc-rail,
.oc-rail__track,
.oc-feed,
.oc-grid,
.oc-stats,
.oc-list,
.oc-single__grid,
.oc-single__main,
.oc-single__side,
.oc-acc,
.oc-acc__body,
.oc-chat,
.oc-chat__log,
.oc-biz,
.oc-biz__id {
	min-width: 0;
	max-width: 100%;
}

/* minmax(0, ...) instead of a bare 1fr, for the same reason. */
.oc-portal    { grid-template-columns: 232px minmax(0, 1fr); }
.oc-grid      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-grid--2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-grid--4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oc-item      { grid-template-columns: 84px minmax(0, 1fr) auto; }
.oc-thread    { grid-template-columns: 42px minmax(0, 1fr) auto; }
.oc-review    { grid-template-columns: 40px minmax(0, 1fr); }
.oc-details__row { grid-template-columns: 200px minmax(0, 1fr); }

@media (max-width: 1024px) {
	.oc-details__row { grid-template-columns: 170px minmax(0, 1fr); }
}

@media (max-width: 1000px) {
	.oc-grid, .oc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.oc-portal { grid-template-columns: minmax(0, 1fr); }
	.oc-single__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	/* Two stat cards per row reads better than five squeezed ones. */
	.oc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.oc-portal__head { flex-direction: column; align-items: stretch; }
	.oc-portal__head .oc-btn { width: 100%; }
	.oc-review { grid-template-columns: 34px minmax(0, 1fr); }
}

@media (max-width: 620px) {
	.oc-item { grid-template-columns: 64px minmax(0, 1fr); }
}

@media (max-width: 560px) {
	.oc-grid, .oc-grid--2, .oc-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.oc-details__row { grid-template-columns: minmax(0, 1fr); }
	.oc-thread { grid-template-columns: 36px minmax(0, 1fr) auto; }
}

/* The pill strip may scroll, but only inside itself. */
.oc-portal__links { overflow-x: auto; }

/* Long unbroken strings — URLs, pasted numbers — must never widen a card. */
.oc-card2__title, .oc-item__title, .oc-biz__name, .oc-thread__last,
.oc-bubble p, .oc-details__v, .oc-review p {
	overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════ chat, rebuilt ═════════════ */

.oc-chat__head { gap: 12px; }
.oc-chat__who { flex: 1 1 auto; min-width: 0; }
.oc-chat__who strong { display: block; }

.oc-chat__about {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.oc-chat__log {
	background:
		linear-gradient(#FBFCFA, #FBFCFA) 0 0/100% 100%,
		radial-gradient(rgba(11,93,59,.045) 1px, transparent 1px) 0 0/22px 22px;
	scroll-behavior: smooth;
}

.oc-chat__blank { text-align: center; padding: 26px 12px; }
.oc-chat__blank p { margin: 0 0 3px; }

.oc-chat__day {
	text-align: center;
	margin: 6px 0;
	position: relative;
}

.oc-chat__day span {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--oc-muted);
	background: var(--oc-line-soft);
	padding: 4px 12px;
	border-radius: 999px;
}

/* ---------------------------------------------------------- bubbles --- */

.oc-bubble {
	position: relative;
	max-width: 76%;
	padding: 9px 13px 6px;
	box-shadow: 0 1px 2px rgba(20,38,28,.06);
}

.oc-bubble p { font-size: 14.5px; line-height: 1.5; }

.oc-bubble__t {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	font-size: 10.5px;
	margin-top: 2px;
}

.oc-bubble__reply {
	position: absolute;
	top: 4px;
	right: 100%;
	margin-right: 6px;
	border: 1px solid var(--oc-line);
	background: var(--oc-card);
	color: var(--oc-muted);
	font-family: var(--oc-sans);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .14s ease, color .14s ease, border-color .14s ease;
	white-space: nowrap;
}

.oc-bubble.is-mine .oc-bubble__reply { right: auto; left: 100%; margin: 0 0 0 6px; }

.oc-bubble:hover .oc-bubble__reply,
.oc-bubble__reply:focus-visible { opacity: 1; }

.oc-bubble__reply:hover { color: var(--oc-canopy); border-color: var(--oc-canopy); }

/* Touch screens have no hover, so keep it visible but quiet. */
@media (hover: none) {
	.oc-bubble__reply { opacity: .55; }
}

/* Quoted message inside a bubble */
.oc-bubble__quote {
	display: block;
	border-left: 3px solid var(--oc-canopy);
	background: rgba(11,93,59,.07);
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 6px;
	text-decoration: none;
}

.oc-bubble.is-mine .oc-bubble__quote {
	border-left-color: rgba(255,255,255,.75);
	background: rgba(255,255,255,.14);
}

.oc-bubble__qwho {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--oc-canopy);
}

.oc-bubble.is-mine .oc-bubble__qwho { color: #fff; }

.oc-bubble__qtext {
	display: block;
	font-size: 12.5px;
	color: var(--oc-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oc-bubble.is-mine .oc-bubble__qtext { color: rgba(255,255,255,.8); }
.oc-bubble__quote:hover { text-decoration: none; opacity: .85; }

/* Image in a bubble */
.oc-bubble__img {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 6px;
	max-width: 240px;
}

.oc-bubble__img img { width: 100%; height: auto; display: block; }

/* Briefly highlight a message when you jump to it from a quote */
.oc-bubble:target { animation: oc-flash 1.4s ease; }

@keyframes oc-flash {
	0%, 40% { box-shadow: 0 0 0 3px var(--oc-gold); }
	100%    { box-shadow: 0 1px 2px rgba(20,38,28,.06); }
}

/* ---------------------------------------------------------- composer --- */

.oc-comp {
	border-top: 1px solid var(--oc-line);
	background: var(--oc-card);
	padding: 10px 12px 12px;
}

.oc-comp__row {
	display: flex;
	align-items: flex-end;
	gap: 7px;
}

.oc-comp__ico {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: 1px solid var(--oc-line);
	border-radius: 10px;
	background: var(--oc-card);
	color: var(--oc-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color .14s ease, color .14s ease, background .14s ease;
	padding: 0;
}

.oc-comp__ico svg { width: 19px; height: 19px; }

.oc-comp__ico:hover,
.oc-comp__ico.is-on {
	border-color: var(--oc-canopy);
	color: var(--oc-canopy);
	background: var(--oc-canopy-soft);
}

.oc-comp__in {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--oc-sans);
	font-size: 15px;
	line-height: 1.45;
	color: var(--oc-ink);
	background: #FBFCFA;
	border: 1px solid var(--oc-line);
	border-radius: 10px;
	padding: 9px 13px;
	resize: none;
	max-height: 140px;
	overflow-y: auto;
}

.oc-comp__in:focus {
	outline: none;
	border-color: var(--oc-canopy);
	background: var(--oc-card);
	box-shadow: 0 0 0 3px rgba(11,93,59,.09);
}

.oc-comp__send {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 10px;
	background: var(--oc-canopy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .14s ease;
}

.oc-comp__send svg { width: 19px; height: 19px; }
.oc-comp__send:hover { background: var(--oc-canopy-dark); }

/* Reply preview above the input */
.oc-comp__reply {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--oc-canopy-soft);
	border-left: 3px solid var(--oc-canopy);
	border-radius: 8px;
	padding: 7px 10px;
	margin-bottom: 8px;
}

.oc-comp__replytext { flex: 1 1 auto; min-width: 0; }

.oc-comp__replywho {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--oc-canopy);
}

.oc-comp__replysnip {
	display: block;
	font-size: 12.5px;
	color: var(--oc-body);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oc-comp__x {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 50%;
	background: rgba(11,93,59,.12);
	color: var(--oc-canopy);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.oc-comp__x:hover { background: rgba(11,93,59,.22); }

.oc-comp__thumbs { margin-bottom: 8px; }
.oc-comp__thumbs:empty { display: none; }
.oc-comp__thumbs .oc-thumb { max-width: 84px; }

/* ------------------------------------------------------------ emoji --- */

.oc-emoji {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
	gap: 2px;
	margin-top: 9px;
	padding: 8px;
	border: 1px solid var(--oc-line);
	border-radius: 10px;
	background: #FBFCFA;
	max-height: 168px;
	overflow-y: auto;
}

.oc-emoji__b {
	border: none;
	background: transparent;
	font-size: 21px;
	line-height: 1;
	padding: 6px 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .12s ease, transform .12s ease;
}

.oc-emoji__b:hover { background: var(--oc-canopy-soft); transform: scale(1.15); }

@media (max-width: 560px) {
	.oc-bubble { max-width: 86%; }
	.oc-bubble__reply { font-size: 10.5px; padding: 2px 7px; }
	.oc-comp { padding: 8px 10px 10px; }
	.oc-comp__ico { width: 36px; height: 36px; }
	.oc-comp__in { font-size: 16px; }
	.oc-emoji { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
}

/* ═════════════════════════════ hidden attribute must always win ═══════ */
/*
   A class that sets display beats the browser's [hidden] rule, which left
   panels stuck open. These put that right.
*/

.oc-comp__reply[hidden],
.oc-emoji[hidden],
.oc-head__panel[hidden],
.oc [hidden] { display: none !important; }

/* Nothing in the chat log may cause sideways scroll. */
.oc-chat__log { overflow-x: hidden; }

.oc-chat__hint {
	font-size: 12px;
	color: var(--oc-muted);
	text-align: center;
	margin: 0;
	padding: 8px 12px 0;
}

/* ═══════════════════════════════════════════════ long press menu ══════ */

.oc-msgmenu {
	position: absolute;
	z-index: 9999;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: 14px;
	box-shadow: 0 6px 12px rgba(20,38,28,.10), 0 20px 48px rgba(20,38,28,.18);
	padding: 8px;
	min-width: 190px;
	animation: oc-rise .14s ease;
}

@keyframes oc-rise {
	from { opacity: 0; transform: translateY(6px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

.oc-msgmenu__reacts {
	display: flex;
	gap: 2px;
	padding-bottom: 7px;
	margin-bottom: 5px;
	border-bottom: 1px solid var(--oc-line-soft);
}

.oc-msgmenu__r {
	flex: 1 1 auto;
	border: none;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	padding: 6px 0;
	border-radius: 9px;
	cursor: pointer;
	transition: background .12s ease, transform .12s ease;
}

.oc-msgmenu__r:hover { background: var(--oc-canopy-soft); transform: scale(1.18); }
.oc-msgmenu__r.is-mine { background: var(--oc-canopy-soft); }

.oc-msgmenu__a {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	border: none;
	background: transparent;
	font-family: var(--oc-sans);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--oc-ink);
	text-align: left;
	padding: 9px 11px;
	border-radius: 8px;
	cursor: pointer;
}

.oc-msgmenu__a:hover { background: var(--oc-line-soft); }
.oc-msgmenu__a svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--oc-muted); }

.oc-msgmenu__veil {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(20,38,28,.12);
}

/* A bubble being held gets a subtle lift. */
.oc-bubble.is-held { box-shadow: 0 0 0 2px var(--oc-canopy); }
.oc-bubble { user-select: none; -webkit-user-select: none; }
.oc-bubble p { user-select: text; -webkit-user-select: text; }

/* ═════════════════════════════════════════════════════ reactions ══════ */

.oc-reacts {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.oc-reacts:empty { display: none; }

.oc-react {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: 999px;
	padding: 1px 7px;
	font-size: 12px;
	line-height: 1.5;
}

.oc-react.is-mine { border-color: var(--oc-canopy); background: var(--oc-canopy-soft); }
.oc-react__e { font-size: 13px; }
.oc-react__n { font-weight: 600; color: var(--oc-muted); font-size: 11px; }
.oc-bubble.is-mine .oc-react { color: var(--oc-ink); }

/* ═══════════════════════════════════════════════════════ tips ═════════ */

.oc-tip {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	background: var(--oc-canopy-soft);
	border: 1px solid #C3DCCE;
	border-radius: var(--oc-r);
	padding: 15px 16px;
	margin-bottom: 18px;
}

.oc-tip__ico {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--oc-canopy);
	color: #fff;
	font-family: var(--oc-display);
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oc-tip__body { flex: 1 1 auto; min-width: 0; }

.oc-tip__body h3 {
	font-family: var(--oc-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--oc-canopy-dark);
	margin: 0 0 3px;
}

.oc-tip__body div { font-size: 14px; color: var(--oc-body); line-height: 1.55; }
.oc-tip__body strong { color: var(--oc-ink); }

.oc-tip__x {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(11,93,59,.1);
	color: var(--oc-canopy);
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.oc-tip__x:hover { background: rgba(11,93,59,.2); color: var(--oc-canopy-dark); text-decoration: none; }

/* ══════════════════════════════════════════ getting started ═══════════ */

.oc-start {
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 20px;
	margin-bottom: 22px;
	box-shadow: var(--oc-shadow);
}

.oc-start__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.oc-start__head > div:first-child { flex: 1 1 auto; min-width: 0; }

.oc-start__count {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--oc-canopy);
	background: var(--oc-canopy-soft);
	padding: 4px 11px;
	border-radius: 999px;
	white-space: nowrap;
}

.oc-start__list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	counter-reset: none;
}

.oc-start__item {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 13px;
	border-radius: var(--oc-r-sm);
	background: #FBFCFA;
	border: 1px solid var(--oc-line-soft);
}

.oc-start__item.is-done { background: transparent; border-color: transparent; }

.oc-start__mark {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--oc-line-soft);
	color: var(--oc-muted);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.oc-start__item.is-done .oc-start__mark { background: var(--oc-canopy); color: #fff; }

.oc-start__text { flex: 1 1 auto; min-width: 0; }

.oc-start__text h3 {
	font-family: var(--oc-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--oc-ink);
	margin: 0 0 2px;
}

.oc-start__item.is-done .oc-start__text h3 { color: var(--oc-muted); text-decoration: line-through; }
.oc-start__text p { font-size: 13.5px; color: var(--oc-muted); margin: 0; line-height: 1.5; }
.oc-start__item.is-done .oc-start__text p { display: none; }

@media (max-width: 600px) {
	.oc-start { padding: 16px; }
	.oc-start__item { flex-wrap: wrap; }
	.oc-start__item .oc-btn { width: 100%; margin-top: 4px; }
	.oc-tip { padding: 13px 14px; gap: 11px; }
}

/* ══════════════════════ composer fixes and theme-proofing ═════════════ */
/*
   Themes style every <button> on the page. Without explicit resets the
   theme's padding inflates our icon buttons and squashes the SVG inside
   them — which is why the send button looked like an empty green block.
*/

.oc-comp__send,
.oc-comp__ico,
.oc-emoji__b,
.oc-msgmenu__r,
.oc-msgmenu__a,
.oc-like,
.oc-thumb__x,
.oc-comp__x {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-width: 0;
	min-height: 0;
}

.oc-comp__send {
	width: 42px;
	height: 42px;
	min-width: 42px;
	padding: 0;
	line-height: 0;
	border: none;
	flex: 0 0 42px;
}

.oc-comp__send svg {
	width: 20px;
	height: 20px;
	display: block;
	stroke: #fff;
	fill: none;
}

.oc-comp__send:hover svg,
.oc-comp__send:focus svg { stroke: #fff; }

.oc-comp__ico {
	width: 40px;
	height: 40px;
	min-width: 40px;
	padding: 0;
	line-height: 0;
	flex: 0 0 40px;
}

.oc-comp__ico svg { display: block; }

/* The attach button is a span, so it needs the pointer cursor spelled out. */
.oc-comp__ico[data-oc-upload] { cursor: pointer; }
.oc-comp__ico[data-oc-upload] input[type="file"] { position: absolute; }

/* Attachment preview above the text box */
.oc-comp__thumbs {
	grid-template-columns: repeat(auto-fill, 84px);
	gap: 8px;
}

.oc-comp__thumbs .oc-thumb {
	width: 84px;
	max-width: 84px;
	aspect-ratio: 1;
}

/* The long press menu is fixed to the viewport. */
.oc-msgmenu { position: fixed; }

/* Emoji buttons must not inherit a theme font that lacks emoji glyphs. */
.oc-emoji__b,
.oc-msgmenu__r,
.oc-react__e,
.oc-bubble p {
	font-family: var(--oc-sans), "Apple Color Emoji", "Segoe UI Emoji",
		"Noto Color Emoji", sans-serif;
}

/* ═══════════════════════ button text must always be readable ══════════ */
/*
   Themes set a link colour globally, and on this site that colour is green —
   which made white-on-green button labels vanish. These rules pin the text
   colour on our own buttons so no theme can wash them out.
*/

.oc .oc-btn,
.oc-head .oc-btn,
.oc-foot .oc-btn,
.ocx .ocx-btn,
.ocg .ocg-btn {
	text-decoration: none !important;
	-webkit-text-fill-color: currentColor;
}

.oc .oc-btn--primary,
.oc .oc-btn--primary:link,
.oc .oc-btn--primary:visited,
.oc .oc-btn--primary:hover,
.oc-head .oc-btn--primary,
.oc-head .oc-btn--primary:link,
.oc-head .oc-btn--primary:visited,
.oc-head .oc-btn--primary:hover {
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

.oc .oc-btn--wa,
.oc .oc-btn--wa:link,
.oc .oc-btn--wa:visited,
.oc .oc-btn--wa:hover {
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

.oc .oc-btn--gold,
.oc .oc-btn--gold:link,
.oc .oc-btn--gold:visited,
.oc .oc-btn--gold:hover,
.oc-head .oc-btn--gold,
.oc-head .oc-btn--gold:link,
.oc-head .oc-btn--gold:visited,
.oc-head .oc-btn--gold:hover {
	color: var(--oc-ink) !important;
	-webkit-text-fill-color: var(--oc-ink);
}

.oc .oc-btn--ghost,
.oc .oc-btn--ghost:link,
.oc .oc-btn--ghost:visited,
.oc-head .oc-btn--ghost {
	color: var(--oc-ink) !important;
	-webkit-text-fill-color: var(--oc-ink);
}

.oc .oc-btn--ghost:hover { color: var(--oc-canopy) !important; -webkit-text-fill-color: var(--oc-canopy); }
.oc .oc-btn--danger, .oc .oc-btn--danger:link, .oc .oc-btn--danger:visited {
	color: var(--oc-danger) !important;
	-webkit-text-fill-color: var(--oc-danger);
}

/* Same protection for the pasted page markup. */
.ocx-btn--gold, .ocx-btn--gold:link, .ocx-btn--gold:visited,
.ocg-btn--gold, .ocg-btn--gold:link, .ocg-btn--gold:visited {
	color: #14261C !important;
	-webkit-text-fill-color: #14261C;
	text-decoration: none !important;
}

.ocx-btn--clear, .ocx-btn--clear:link, .ocx-btn--clear:visited,
.ocx-btn--dark,  .ocx-btn--dark:link,  .ocx-btn--dark:visited,
.ocg-btn--clear, .ocg-btn--clear:link, .ocg-btn--clear:visited,
.ocg-btn--solid, .ocg-btn--solid:link, .ocg-btn--solid:visited {
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	text-decoration: none !important;
}

.ocx-btn--line, .ocx-btn--line:link, .ocx-btn--line:visited,
.ocg-btn--line, .ocg-btn--line:link, .ocg-btn--line:visited {
	color: #14261C !important;
	-webkit-text-fill-color: #14261C;
	text-decoration: none !important;
}

/* Hero and footer text sits on dark green, so links there stay light. */
.ocx-hero a, .ocg-hero a, .ocx-end a, .ocg-end a, .oc-foot a { text-decoration: none !important; }

/* Sign in link in the header */
.oc-head__signin,
.oc-head__signin:link,
.oc-head__signin:visited {
	color: var(--oc-body) !important;
	-webkit-text-fill-color: var(--oc-body);
	text-decoration: none !important;
}

/* Account links added to the mobile menu panel */
.oc-head__acct {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--oc-line);
}

.oc-head__acct .oc-btn { flex: 1 1 0; }

/* Photos sit above the description on a single post. */
.oc-single--top { margin: 0 0 22px; }
.oc-single--top .oc-gallery { margin-bottom: 0; }

/* ═══════════════════════════ account item in the menu ═════════════════ */

.oc-head__list .oc-menu-account > a,
.oc-head__panellist .oc-menu-account > a {
	color: var(--oc-canopy) !important;
	-webkit-text-fill-color: var(--oc-canopy);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.oc-head__list .oc-menu-account > a { border: 1px solid var(--oc-line); }

.oc-head__list .oc-menu-account > a:hover,
.oc-head__panellist .oc-menu-account > a:hover {
	background: var(--oc-canopy-soft);
	border-color: var(--oc-canopy);
}

.oc-head__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--oc-gold);
	color: var(--oc-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 900px) {
	.oc-head__panellist .oc-menu-account > a {
		background: var(--oc-canopy-soft);
		border: 1px solid var(--oc-canopy);
	}
}

/* ═══════════════════════════ header, made to fit ══════════════════════ */
/*
   Nine navigation items plus a long site name plus the buttons was more than
   the bar could hold, so the menu ran underneath the Post button. The nav is
   now allowed to shrink and scroll, the site name truncates, and the whole
   thing collapses to a hamburger earlier.
*/

.oc-head__inner { gap: 14px; }

.oc-head__brand { min-width: 0; max-width: 46%; }

.oc-head__name {
	max-width: 210px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oc-head__nav {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.oc-head__list {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 0;
}

.oc-head__list::-webkit-scrollbar { display: none; }

.oc-head__side {
	flex: 0 0 auto;
	margin-left: 0;
	padding-left: 4px;
}

.oc-head__list a { padding: 8px 10px; }

/* Collapse to the hamburger sooner, so nothing ever collides. */
@media (max-width: 1150px) {
	.oc-head__nav { display: none; }
	.oc-head__burger { display: flex; }
	.oc-head__signin { display: none; }
	.oc-head__brand { max-width: none; }
}

@media (min-width: 1151px) and (max-width: 1320px) {
	.oc-head__name { max-width: 130px; }
	.oc-head__list a { padding: 8px 8px; font-size: 13.5px; }
}

/* Unread badge on the avatar, visible from any page. */
.oc-head__me { position: relative; }

.oc-head__me-dot {
	position: absolute;
	top: -4px;
	right: -5px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--oc-gold);
	color: var(--oc-ink);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	border: 2px solid var(--oc-card);
	box-sizing: content-box;
}

/* ═════════════════════════════ active filter chips ═══════════════════ */

.oc-active {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 14px;
}

.oc-active__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--oc-canopy-soft);
	border: 1px solid #C3DCCE;
	color: var(--oc-canopy-dark) !important;
	text-decoration: none !important;
}

.oc-active__chip span { font-size: 15px; line-height: 1; opacity: .6; }
.oc-active__chip:hover { background: #D7E7DD; }
.oc-active__chip:hover span { opacity: 1; }

.oc-active__clear {
	font-size: 13px;
	font-weight: 600;
	color: var(--oc-muted) !important;
	text-decoration: underline !important;
}

.oc-active__clear:hover { color: var(--oc-canopy) !important; }

/* Filter bar: keep the search wide and the controls from wrapping oddly. */
.oc-filters { align-items: flex-start; }

.oc-filters__searchgroup {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/*
 * The search box sits inside a column-direction wrapper now, so an older
 * `flex: 1 1 240px` written for the row layout was being read as a 240px
 * HEIGHT. Pin it back to its natural height and let width do the work.
 */
.oc-filters__searchgroup .oc-filters__q {
	flex: 0 0 auto;
	width: 100%;
	height: auto;
	min-height: 0;
}

.oc-filters__hint {
	font-size: 11.5px;
	color: var(--oc-muted);
	padding-left: 2px;
}

/* One shared control height so the box, dropdowns and button line up. */
.oc-filters__searchgroup .oc-filters__q,
.oc-filters__sort,
.oc-filters .oc-btn {
	height: 44px;
	line-height: normal;
}

.oc-filters__sort { flex: 0 0 190px; align-self: flex-start; }
.oc-filters .oc-btn { flex: 0 0 auto; align-self: flex-start; }

/* Tablet: search takes the full first row, controls share the next. */
@media (max-width: 900px) {
	.oc-filters__searchgroup { flex: 1 1 100%; }
	.oc-filters__sort { flex: 1 1 calc(50% - 34px); }
	.oc-filters .oc-btn { flex: 0 0 auto; }
}

/* Phone: everything stacks full width. */
@media (max-width: 560px) {
	.oc-filters { gap: 8px; }
	.oc-filters__searchgroup { flex: 1 1 100%; }
	.oc-filters__sort { flex: 1 1 100%; }
	.oc-filters .oc-btn { flex: 1 1 100%; }

	.oc-filters__searchgroup .oc-filters__q,
	.oc-filters__sort,
	.oc-filters .oc-btn { height: 46px; }
}

@media (max-width: 700px) {
	.oc-filters__searchgroup { flex: 1 1 100%; }
	.oc-filters__sort { flex: 1 1 60%; }
	.oc-filters .oc-btn { flex: 1 1 30%; }
}

/* ═════════════════════════ photos shown whole, not cropped ════════════ */
/*
   object-fit: cover fills the frame by cutting the edges off, which on a
   portrait phone photo means most of the item disappears and what is left
   looks zoomed in. Every listing image now uses contain, so the whole
   picture is visible, sitting on a soft background where it does not fill
   the frame exactly.
*/

/* The main photo on a single post keeps its own shape entirely. */
.oc-gallery__item.is-lead {
	aspect-ratio: auto;
	background: var(--oc-canopy-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 62vh;
}

.oc-gallery__item.is-lead img {
	width: auto;
	max-width: 100%;
	max-height: 62vh;
	object-fit: contain;
	margin: 0 auto;
}

/* Smaller gallery thumbnails stay square for a tidy row. */
.oc-gallery__item:not(.is-lead) img { object-fit: contain; padding: 4px; }
.oc-gallery__item:not(.is-lead) { background: var(--oc-canopy-soft); }

/* Cards keep a consistent frame, but show the whole photo inside it. */
.oc-card2__media { background: var(--oc-canopy-soft); }
.oc-card2__media img { object-fit: contain; }
.oc-card2--biz .oc-card2__media img { object-fit: contain; padding: 8px; }

/* No hover zoom anywhere — it was the other thing that read as "zoomed". */
.oc-card2:hover .oc-card2__media img,
.oc-gallery__item:hover img { transform: none; }

/* Row thumbnails in the portal and business logos. */
.oc-item__img { object-fit: contain; background: var(--oc-canopy-soft); }
.oc-biz__logo img { object-fit: contain; padding: 6px; }

/* Avatars stay cropped — a face should fill a circle. */
.oc-avatar { object-fit: cover; }

@media (max-width: 700px) {
	.oc-gallery__item.is-lead,
	.oc-gallery__item.is-lead img { max-height: 52vh; }
}

/* ═══════════════════════════ who you follow ═══════════════════════════ */

.oc-follows {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}

.oc-follows__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.oc-follows__head h2 { margin: 0; font-size: 18px; }

.oc-follows__n {
	font-size: 12px;
	font-weight: 600;
	color: var(--oc-canopy);
	background: var(--oc-canopy-soft);
	padding: 3px 10px;
	border-radius: 999px;
}

.oc-follows__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 12px;
}

.oc-follows__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	text-decoration: none !important;
}

.oc-follows__item .oc-avatar {
	width: 48px;
	height: 48px;
	border: 1px solid var(--oc-line);
	transition: border-color .14s ease, transform .14s ease;
}

.oc-follows__item:hover .oc-avatar {
	border-color: var(--oc-canopy);
	transform: translateY(-2px);
}

.oc-avatar--sq { border-radius: 12px; }

.oc-follows__letter {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--oc-canopy-soft);
	color: var(--oc-canopy);
	font-family: var(--oc-display);
	font-size: 20px;
	font-weight: 600;
}

.oc-follows__name {
	font-size: 12px;
	font-weight: 500;
	color: var(--oc-body);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.oc-follows__item:hover .oc-follows__name { color: var(--oc-canopy); }
.oc-follows__name .oc-verified { width: 13px; height: 13px; font-size: 8px; vertical-align: 0; }

/* Category selects wait politely until a tag is chosen. */
[data-oc-catwrap] { transition: opacity .18s ease; }
[data-oc-catwrap] select:disabled { background: var(--oc-line-soft); cursor: not-allowed; }

@media (max-width: 560px) {
	.oc-follows { grid-template-columns: 1fr; }
	.oc-follows__grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
	.oc-follows__item .oc-avatar { width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════ reporting ════════ */

.oc-report {
	margin-top: 30px;
	border-top: 1px solid var(--oc-line-soft);
	padding-top: 16px;
}

.oc-report__open {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--oc-muted);
	cursor: pointer;
	list-style: none;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--oc-line);
	transition: color .14s ease, border-color .14s ease, background .14s ease;
	-webkit-tap-highlight-color: transparent;
}

.oc-report__open::-webkit-details-marker { display: none; }
.oc-report__open::marker { content: ""; }

.oc-report__open:hover {
	color: var(--oc-danger);
	border-color: #F0BDB6;
	background: var(--oc-danger-soft);
}

.oc-report__flag { font-size: 13px; }

.oc-report__body {
	margin-top: 14px;
	padding: 18px;
	background: #FBFCFA;
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	max-width: 520px;
}

.oc-report__body > p:first-child { margin-bottom: 14px; }

.oc-report__done {
	margin-top: 30px;
	padding-top: 16px;
	border-top: 1px solid var(--oc-line-soft);
}

/* Typing your own subcategory */
.oc-subown {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--oc-muted);
	margin-top: 7px;
	cursor: pointer;
}

.oc-subown input { accent-color: var(--oc-canopy); }
[data-oc-subnew] { margin-top: 8px; }
[data-oc-subnew][hidden] { display: none !important; }

/* ═══════════════════════════════ quick filter pills ═══════════════════ */

.oc-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 18px;
}

.oc-pills__lbl {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--oc-muted);
	margin-right: 2px;
}

.oc-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 500;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	color: var(--oc-body) !important;
	text-decoration: none !important;
	transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.oc-pill:hover {
	border-color: var(--oc-canopy);
	background: var(--oc-canopy-soft);
	color: var(--oc-canopy) !important;
}

.oc-pill.is-on {
	background: var(--oc-canopy);
	border-color: var(--oc-canopy);
	color: #fff !important;
	font-weight: 600;
}

.oc-pill__n {
	font-size: 11px;
	font-weight: 600;
	opacity: .6;
	background: rgba(0,0,0,.07);
	padding: 1px 6px;
	border-radius: 999px;
}

.oc-pill.is-on .oc-pill__n { background: rgba(255,255,255,.22); opacity: .9; }

@media (max-width: 560px) {
	.oc-pills { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
	.oc-pills::-webkit-scrollbar { display: none; }
	.oc-pill { flex: 0 0 auto; }
	.oc-pills__lbl { display: none; }
}

/* Loading state while results are fetched */
.oc-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px;
	font-size: 13.5px;
	color: var(--oc-muted);
}

.oc-loading[hidden] { display: none !important; }

.oc-loading span {
	width: 15px;
	height: 15px;
	border: 2px solid var(--oc-line);
	border-top-color: var(--oc-canopy);
	border-radius: 50%;
	animation: oc-spin .7s linear infinite;
}

@keyframes oc-spin { to { transform: rotate(360deg); } }

[data-oc-results] { transition: opacity .15s ease; }

/* Warning shown only to administrators when a shortcode is unavailable */
.oc-badshortcode {
	display: block;
	background: #FFFBEB;
	border: 1px solid #F2DDAC;
	border-left: 4px solid #E8A317;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 10px 0;
	font-size: 13.5px;
	color: #7A5305;
	font-family: var(--oc-sans, sans-serif);
}

/* ═══════════════════════════════ message someone new ═══════════════════ */

.oc-newmsg {
	position: relative;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	padding: 16px;
	margin-bottom: 18px;
}

.oc-newmsg__row { margin-top: 6px; }

.oc-newmsg__results {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 100%;
	margin-top: 6px;
	background: var(--oc-card);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-r);
	box-shadow: var(--oc-shadow-lift);
	max-height: 320px;
	overflow-y: auto;
	z-index: 40;
	padding: 6px;
}

.oc-newmsg__results[hidden] { display: none !important; }

.oc-newmsg__empty {
	margin: 0;
	padding: 14px;
	font-size: 13.5px;
	color: var(--oc-muted);
	text-align: center;
}

.oc-newmsg__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: var(--oc-r-sm);
	text-decoration: none !important;
}

.oc-newmsg__item:hover { background: var(--oc-canopy-soft); }
.oc-newmsg__item .oc-avatar { width: 34px; height: 34px; flex: 0 0 auto; }

.oc-newmsg__who {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.oc-newmsg__who strong { font-size: 14px; color: var(--oc-ink); }
.oc-newmsg__who span { font-size: 12px; color: var(--oc-muted); }
.oc-newmsg__item .oc-btn { pointer-events: none; flex: 0 0 auto; }

@media (max-width: 560px) {
	.oc-newmsg__results { left: 10px; right: 10px; }
}