/* AskHole — request feed / cards (Step 3) */

/* Always reserve the scrollbar gutter so the centred header/nav/footer don't jump ~7px sideways
   when moving between a page that scrolls (e.g. Browse) and one that doesn't (e.g. Login). This
   stylesheet loads site-wide, so the rule applies to every front-end page. */
html { scrollbar-gutter: stable; }

.askhole-feed *, .askhole-archive * { box-sizing: border-box; }

/* Center the feed like the detail page, whether it's the archive template
   or the [askhole_requests] shortcode dropped on a page. */
.askhole-feed {
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px 20px 60px;
	font-family: 'Inter', system-ui, sans-serif;
	color: #0D1117;
}

/* ---- Branded hero band (hero="1") ---- */
.ah-hero {
	/* Neutral warm band (was a purple→cream gradient). Cream #F3EDE4 → off-white #F7F7F9. */
	background: linear-gradient(135deg, #f3ede4 0%, #f7f7f9 100%);
	border: 1px solid #ece7dd;
	border-radius: 22px;
	padding: 30px 32px;
	margin-bottom: 30px;
}
.ah-hero-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.ah-hero-copy { flex: 1 1 320px; min-width: 0; }
.ah-hero-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800;
	font-size: 38px;
	line-height: 1.08;
	letter-spacing: -.8px;
	margin: 0 0 6px;
	color: #0D1117;
}
.ah-hero-sub {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #4b4157;
	margin: 0;
	max-width: 46ch;
}
.ah-hero-side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}
.ah-hero-pill {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .2px;
	color: #1B9C5B;
	background: #fff;
	border: 1px solid #d7f0e2;
	border-radius: 999px;
	padding: 7px 14px;
	white-space: nowrap;
}
.ah-hero-cta {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	background: #783FF2;
	border-radius: 12px;
	padding: 12px 22px;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .15s ease, transform .15s ease;
}
.ah-hero-cta:hover, .ah-hero-cta:focus { background: #6a2fe0; transform: translateY(-1px); color: #fff; text-decoration: none !important; }

@media (max-width: 640px) {
	.ah-hero { padding: 24px 22px; border-radius: 18px; }
	.ah-hero-title { font-size: 30px; }
	.ah-hero-side { align-items: flex-start; width: 100%; }
}

/* ---- Wordmark logo ([askhole_logo]) ---- */
.askhole-logo {
	font-family: 'Kalam', 'Comic Sans MS', cursive;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: baseline;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	font-size: 34px; /* default; override with the shortcode size="" */
}
.askhole-logo .ah-ask { color: #0D1117; }
.askhole-logo .ah-hole { color: #783FF2; position: relative; padding-bottom: .12em; margin-left: .13em; }
.askhole-logo .ah-hole svg {
	position: absolute; left: -.11em; bottom: -.17em;
	width: calc(100% + .3em); height: .46em; fill: #783FF2; display: block;
}
.askhole-logo.is-dark .ah-ask { color: #fff; }
.askhole-logo.is-dark .ah-hole { color: #FFD100; }
.askhole-logo.is-dark .ah-hole svg { fill: #FFD100; }

/* Sparkle accent after the wordmark. Monochrome SVG used as a CSS mask so its colour
   is driven from here — it matches the logo automatically (purple normally, yellow on
   the dark variant, and it greys out with the footer logo's greyscale filter). Sized
   in em so it scales with the logo at every size. */
.askhole-logo::after {
	content: "";
	flex: 0 0 auto;
	align-self: flex-start;
	width: .42em;
	height: .43em;
	margin-left: -.02em;
	margin-top: -.13em;
	background-color: #783FF2;
	-webkit-mask: url('askhole-accent.svg') center / contain no-repeat;
	        mask: url('askhole-accent.svg') center / contain no-repeat;
}
.askhole-logo.is-dark::after { background-color: #FFD100; }

/* ---- Browse filter / search bar ---- */
.ah-filters {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin: 0 0 24px; font-family: 'Inter', system-ui, sans-serif;
}
.ah-filter-search, .ah-filter-select {
	font-family: 'Inter', system-ui, sans-serif; font-size: 15px; color: #0D1117;
	background: #fff; border: 1.5px solid #e0e2e8; border-radius: 12px; padding: 11px 14px;
	box-sizing: border-box;
	/* Astra forces width:100% + margins on content form fields — keep them inline. */
	width: auto !important; max-width: none !important; margin: 0 !important;
}
.ah-filter-search { flex: 1 1 240px; min-width: 180px; }
.ah-filter-select { flex: 0 1 auto; min-width: 160px; cursor: pointer; }
.ah-filter-btn { margin: 0 !important; }
.ah-filter-search:focus, .ah-filter-select:focus {
	outline: none; border-color: #783FF2; box-shadow: 0 0 0 3px rgba(120,63,242,.12);
}
.ah-filter-btn {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 15px;
	color: #fff; background: #783FF2; border: none; border-radius: 12px;
	padding: 11px 22px; cursor: pointer; flex: 0 0 auto;
}
.ah-filter-btn:hover { background: #6a2fe0; }
.ah-filter-clear {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px;
	color: #6a6f7b; text-decoration: none !important; padding: 6px 4px; flex: 0 0 auto;
}
.ah-filter-clear:hover { color: #783FF2; }

/* Collapsible filters + mobile category dropdown — desktop shows everything inline,
   so these controls are inert here and only come alive in the mobile media query below. */
.ah-filters-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ah-filters-toggle-btn { display: none; }
.ah-filters-rest { display: contents; }
.ah-home-cat-select { display: none; }

.ah-empty-filtered { text-align: center; padding: 30px 0; }
.ah-empty-filtered p { margin: 0 0 14px; color: #6a6f7b; font-family: 'Inter', system-ui, sans-serif; }

/* AJAX results loader (browse page) */
.ah-feed-results { position: relative; min-height: 80px; transition: opacity .15s ease; }
.askhole-feed.is-loading .ah-feed-results { opacity: .45; pointer-events: none; }
.askhole-feed.is-loading .ah-feed-results::after {
	content: ''; position: absolute; top: 50px; left: 50%; width: 36px; height: 36px; margin-left: -18px;
	border: 3px solid #e2e4ea; border-top-color: #783FF2; border-radius: 50%;
	animation: ah-spin .7s linear infinite;
}

@media (max-width: 560px) {
	.ah-filter-select, .ah-filter-btn { flex: 1 1 100%; }
}

.ah-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}

.ah-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececf1;
	border-radius: 16px;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	box-shadow: 0 1px 2px rgba(13, 17, 23, .04);
}
.ah-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(13, 17, 23, .10);
	border-color: #dcdce4;
}
/* Same anatomy as .ah-rcard-link: the whole body is one link, the save button
   (.ah-rcard-save, reused verbatim) sits beside it as its own control. */
.ah-card-link { display: flex; flex-direction: column; flex: 1; min-height: 0; color: inherit !important; text-decoration: none !important; }

.ah-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #f2f2f7;
	overflow: hidden;
}
.ah-card-media img {
	/* !important beats the theme's `img { height:auto }`, which otherwise lets the image
	   render at its intrinsic height and overflow the fixed-ratio media box unevenly. */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}
.ah-card-noimg {
	width: 100%;
	height: 100%;
	/* Neutral placeholder (was a purple tint). Brand grays: mist #EEF0F3 / #F7F7F9. */
	background: linear-gradient(135deg, #eef0f3, #f7f7f9);
}

.ah-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .3px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: #0D1117;
	color: #fff;
}
/* Green is reserved for budgets — status badges stay out of that colour.
   OPEN: calm neutral pill (not competing with the budget). NEW: brand-purple
   accent pill (the attention colour). Both meet ≥4.5:1 text contrast. */
.ah-badge.is-open { background: #eef0f4; color: #0D1117; }
.ah-badge.is-new { background: #783FF2; color: #fff; }
.ah-badge.is-paused { background: #b45309; }
.ah-badge.is-in_progress { background: #0F7A45; }
.ah-badge.is-submitted { background: #783FF2; }
.ah-badge.is-completed { background: #6b7280; }
.ah-badge.is-cancelled, .ah-badge.is-expired, .ah-badge.is-on_hold { background: #9098a4; }
.ah-badge.is-disputed { background: #EF4444; }
/* "In review" — a request still held for admin approval. Amber (distinct from the neutral OPEN
   pill and from the green reserved for budgets); dark amber text for ≥4.5:1 contrast. */
.ah-badge.is-in_review { background: #FEF3C7; color: #92400E; }

/* Owner/admin "awaiting approval" preview banner on the single-request page. */
.askhole-detail .ah-review-banner {
	display: flex; align-items: flex-start; gap: 10px;
	background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 12px;
	padding: 14px 16px; margin: 0 0 18px; color: #92400E;
	font-size: 14.5px; line-height: 1.45;
}
.askhole-detail .ah-review-banner-ico { font-size: 18px; line-height: 1.4; flex: 0 0 auto; }
.askhole-detail .ah-review-banner-txt strong { display: block; color: #78350F; margin: 0 0 2px; }

/* Paused card: visually distinct (dimmed until hover). */
.ah-card.is-paused { opacity: .68; }
.ah-card.is-paused:hover { opacity: 1; }

/* Paused note (claim CTA + detail) + "Show paused" filter toggle. */
.ah-paused-note {
	font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5; font-weight: 600;
	color: #92400e; background: #fff7ed; border: 1px solid #fed7aa;
	border-radius: 12px; padding: 12px 14px;
}
.ah-filter-paused {
	display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
	font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; font-weight: 600; color: #6a6f7b;
	cursor: pointer; white-space: nowrap;
}
.ah-filter-paused input { width: 16px; height: 16px; margin: 0 !important; }

.ah-card-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.ah-cat {
	align-self: flex-start;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .4px;
	text-transform: uppercase;
	/* Subtle neutral pill — purple is reserved for the logo + CTAs. */
	color: #5c6270;
	background: #eef0f3;
	padding: 3px 10px;
	border-radius: 999px;
}

.ah-card-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -.3px;
	margin: 2px 0 0;
	color: #0D1117;
	/* #8 — match the Browse card (.ah-rcard-title): clamp long titles to two lines and
	   reserve that height so cards in the homepage strip/grid line up instead of some
	   wrapping to three or four lines. 2 × line-height 1.25 = 2.5em. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}

.ah-reward {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	color: #1B9C5B;
}

/* Location line — matches the browse card's .ah-rcard-loc. The card body is a flex column with an
   8px gap, so no own margin is needed. */
.ah-card-loc { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 13px; line-height: 1.3; color: #6a6f7b; }
.ah-card-loc svg { width: 14px; height: 14px; flex: 0 0 auto; color: #9aa0ac; }
.ah-card-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Footer: time-ago on the left, pro-avatars (or "No pros yet") on the right —
   same anatomy as the browse card's .ah-rcard-foot. */
.ah-card-foot {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	color: #6a6f7b;
}
.ah-card-time { color: #9aa0ac; flex: 0 0 auto; }
.ah-card-proav { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ah-card-proav .ah-card-stack, .ah-card-proav .ah-card-more { width: 22px; height: 22px; }
.ah-card-proav .ah-card-more { font-size: 9px; }

/* Poster's avatar — a small circle sitting over the cover image (who's behind it).
   Same ring treatment as the detail-page "Askholes on it" stack.

   The CONTAINER is the circle (fixed size + overflow:hidden), NOT the inner image.
   Ultimate Member serves the *default* avatar (users with no photo) in varying markup
   — a bare <img>, an <svg>, or a wrapper <div> — and strips custom classes. Clipping
   at the container means every one of those renders as the same round avatar. */
.ah-card-poster {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: #f0ecfd;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #ececf1, 0 2px 6px rgba(13, 17, 23, .28);
	line-height: 0;
	display: block;
}
.ah-card-poster img,
.ah-card-poster svg,
.ah-card-poster > * {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	border-radius: 50%;
}

/* Overlapping stack of the on-it Askholes, to the right of the count.
   Mirrors the detail page's avatar stack, smaller. Sized by container (UM-proof). */
.ah-card-avatars { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ah-card-stack {
	display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
	overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0 1px #ececf1;
	margin-left: -8px; background: #f0ecfd;
}
.ah-card-stack:first-child { margin-left: 0; }
.ah-card-stack img,
.ah-card-stack svg,
.ah-card-stack > * {
	width: 100% !important; height: 100% !important; max-width: 100%;
	object-fit: cover; display: block; border: 0; border-radius: 50%;
}
.ah-card-more {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: #f0ecfd; color: #783FF2;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 10px;
	border: 2px solid #fff; margin-left: -8px;
}

/* Astra (and other themes) underline content-area links via `.entry-content a`,
   which out-specifies a plain `.ah-card-link` rule — so force it off with !important. */
.ah-card-link,
.ah-card-link:link,
.ah-card-link:visited,
.ah-card-link:hover,
.ah-card-link:focus,
.ah-card-link:active,
.ah-card *,
.ah-card *:hover { text-decoration: none !important; }

.ah-empty {
	font-family: 'Inter', system-ui, sans-serif;
	color: #6a6f7b;
}

/* Archive page wrapper */
.askhole-archive .ah-archive-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -.5px;
	font-size: 34px;
	margin: 0 0 4px;
	color: #0D1117;
}
.askhole-archive .ah-archive-sub {
	font-family: 'Inter', system-ui, sans-serif;
	color: #6a6f7b;
	margin: 0 0 24px;
}

/* ---- Single request detail page ---- */
/* Match the Browse page (.ah-browse): same 1140px content box + white page background, so the
   detail page lines up with the logo / Browse and doesn't read narrower or greyer. */
body.single-request { background-color: #fff !important; }
.askhole-detail {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px 60px;
	font-family: 'Inter', system-ui, sans-serif;
	color: #0D1117;
}
/* On wide screens the content spans the full 1140 edge-to-edge, exactly like Browse. */
@media (min-width: 1181px) { .askhole-detail { padding-left: 0; padding-right: 0; } }
.ah-back {
	display: inline-block;
	margin-bottom: 18px;
	color: #783FF2;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
}
.ah-back:hover { text-decoration: underline; }

/* Written validation message under a required post-wizard field — pairs with the red .ah-invalid outline so
   the request form gives worded feedback like the Pro form. */
.ah-f-err { display: block; margin-top: 6px; color: #c0392b; font-size: 13px; font-weight: 600; line-height: 1.4; }

/* "We drafted this from your title" note under the post-wizard description — shown only while the field holds
   AI-drafted text, cleared as soon as the poster edits. Calm and secondary, with a purple sparkle. */
.ah-ai-note { display: flex; align-items: center; gap: 7px; margin: 7px 0 0; font-size: 13px; line-height: 1.4; color: #6a6f7b; }
.ah-ai-note-ic { flex: 0 0 auto; color: var(--ah-purple, #783FF2); }

.ah-detail-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 32px;
	align-items: start;
}
.ah-detail-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.ah-detail-head .ah-badge { position: static; }

.ah-detail-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 4vw, 34px);
	line-height: 1.15;
	/* #14 — match the Browse H1's tightening ratio (-.02em) so all branded page titles are consistent. */
	letter-spacing: -.02em;
	margin: 0 0 8px;
}
.ah-detail-meta { color: #6a6f7b; font-size: 14px; margin-bottom: 14px; }
/* Listing action bar: save bookmark (logged-in) + a fixed row of share buttons. */
.ah-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.ah-detail-actions-sep { width: 1px; height: 22px; background: #e2e2ea; margin: 0 4px; }
.ah-detail-share-label { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #9aa0ac; margin-right: 2px; }
.ah-share-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px !important; height: 38px !important; min-height: 0 !important; padding: 0 !important; flex: 0 0 auto; -webkit-appearance: none; appearance: none; box-sizing: border-box; border-radius: 50% !important; border: 1px solid #e4e4ec; background: #fff; color: #4b5563; cursor: pointer; text-decoration: none !important; box-shadow: none !important; transition: color .12s, border-color .12s, background .12s; }
.ah-share-btn .ah-ic { width: 18px; height: 18px; }
.ah-share-btn:hover { color: var(--ah-purple) !important; border-color: var(--ah-purple) !important; background: #fff !important; }
/* Kill the theme's (Astra) blue button:focus fill on the <button> controls (copy + save). */
.ah-share-btn:focus:not(:hover), .ah-share-btn:focus-visible:not(:hover), .ah-share-btn:active:not(:hover) { color: #4b5563 !important; background: #fff !important; box-shadow: none !important; }
/* Saved bookmark → filled CTA purple, matching the card control. */
.ah-detail-save.is-saved, .ah-detail-save.is-saved:hover, .ah-detail-save.is-saved:focus, .ah-detail-save.is-saved:focus-visible, .ah-detail-save.is-saved:active { background: var(--ah-purple, #783FF2) !important; border-color: var(--ah-purple, #783FF2) !important; color: #fff !important; }
/* "Link copied" confirmation bubble on the copy button. */
.ah-share-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0D1117; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 5; }
.ah-share-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0D1117; }
.ah-share-btn.is-copied { color: var(--ah-purple); border-color: var(--ah-purple); }
.ah-detail-media { border-radius: 16px; overflow: hidden; margin-bottom: 22px; }
.ah-detail-media img { width: 100%; height: auto; display: block; }
/* Category-default fallback artwork (no user photo) — rendered subtly. */
.ah-cat-default { opacity: .35; }
.ah-detail-desc { font-size: 16px; line-height: 1.7; color: #2b2f38; }
.ah-detail-desc p { margin: 0 0 1em; }
.ah-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 20px; }
.ah-gallery-item { display: block; border-radius: 12px; overflow: hidden; border: 1px solid #ececf1; aspect-ratio: 1; }
.ah-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ah-detail-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 20px; }
.ah-side-card {
	background: #fff;
	border: 1px solid #ececf1;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 1px 2px rgba(13, 17, 23, .04);
}
.ah-reward-lg { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 30px; line-height: 1.1; color: #1B9C5B; }
.ah-count-lg { color: #6a6f7b; font-weight: 600; font-size: 14px; margin: 8px 0 16px; }
.ah-cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	background: #783FF2;
	border: none;
	border-radius: 12px;
	padding: 14px;
	cursor: pointer;
	text-align: center;
	text-decoration: none !important; /* anchor-based CTAs (login / Update listing): kill Astra underline */
}
.ah-cta:hover, .ah-cta:focus, .ah-cta:active { background: #6a2fe0; color: #fff; text-decoration: none !important; }
.ah-cta-note { font-size: 12px; color: #5C6270; text-align: center; margin: 8px 0 0; }
/* Secondary "Prefer to pitch as a business? Join as a Pro" line under the open-request respond CTA. */
.ah-cta-alt { font-size: 13px; color: #5C6270; text-align: center; margin: 12px 0 0; }
.ah-cta-alt a { color: #783FF2; font-weight: 700; text-decoration: none; }
.ah-cta-alt a:hover { text-decoration: underline; }
/* Intro that frames the "I'm on it" form as sending an offer. */
.ah-offer-intro { margin: 0 0 14px; }
.ah-offer-intro-h { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--ah-ink, #0D1117); }
.ah-offer-intro-sub { margin: 0; font-size: 13px; line-height: 1.45; color: #6a6f7b; }
.ah-claim-anon {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0;
	font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: #6a6f7b; cursor: pointer;
}
.ah-claim-anon input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }

/* ---- Claim CTA (Step 6) ---- */
.ah-claim, .ah-claim * { box-sizing: border-box; }
.ah-claim { display: block; }
.ah-claim form { margin: 0; }

/* Progressive disclosure: "I'm on it!" is the summary; note + Save reveal below it. */
.ah-join-details { margin: 0; }
.ah-join-details > summary {
	list-style: none; display: block; text-align: center;
	width: 100%; max-width: 100%;
}
.ah-join-details > summary::-webkit-details-marker { display: none; }
.ah-cta-summary { user-select: none; }
.ah-join-body { margin-top: 12px; }
.ah-join-note-label {
	display: block; font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700; font-size: 13px; color: #3d424e; margin-bottom: 6px;
}
.ah-cta-save { margin-top: 10px; }

/* Owner view (own listing): manage instead of claim. Left-aligned, even vertical rhythm. */
.ah-owner { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ah-owner-label {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 800;
	font-size: 15px; color: #0D1117; margin: 0 0 2px;
}
.ah-owner-count {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
	font-size: 13px; color: #6a6f7b; margin: 0 0 14px;
}
.ah-claim-flash {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px; font-weight: 600; line-height: 1.4;
	border-radius: 10px; padding: 10px 12px; margin: 0 0 12px;
	background: #eef0f3; color: #4b5563;
}
.ah-claim-flash.is-good { background: #eafaf1; color: #1B9C5B; }
.ah-claim-flash.is-warn { background: #fdecec; color: #c0392b; }
.ah-onit {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800; font-size: 17px; color: #1B9C5B;
	background: #eafaf1; border: 1px solid #d7f0e2;
	border-radius: 12px; padding: 13px 14px; text-align: center;
}
.ah-onit-status {
	display: flex; align-items: center; gap: 8px; justify-content: center;
	margin-top: 10px; font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px; font-weight: 600; color: #6a6f7b;
}
.ah-onit-status .ah-claim-chip { flex: 0 0 auto; }
.ah-note-details { margin-top: 10px; }
.ah-note-details > summary {
	list-style: none; cursor: pointer;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700;
	font-size: 13px; color: #783FF2; padding: 4px 0;
}
.ah-note-details > summary::-webkit-details-marker { display: none; }
.ah-note-details > summary::before { content: '＋ '; font-weight: 700; }
.ah-note-details[open] > summary::before { content: '－ '; }
.ah-note-input {
	width: 100%; box-sizing: border-box; margin-top: 8px;
	font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5;
	border: 1px solid #e0e2e8; border-radius: 10px; padding: 10px 12px; resize: vertical;
	color: #0D1117;
}
.ah-note-input:focus { outline: none; border-color: #783FF2; box-shadow: 0 0 0 3px rgba(120,63,242,.12); }
.ah-cta-sm { font-size: 15px; padding: 10px 14px; margin-top: 10px; }

/* ---- Offer fields on the "I'm on it" form (Phase 1a: the Pro's quote) ---- */
.ah-offer-fields { margin: 4px 0 4px; text-align: left; }
.ah-offer-fields .ah-join-note-label { display: block; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 13px; color: #0D1117; margin-top: 12px; }
.ah-offer-fields .ah-optional { font-weight: 500; color: #9aa0ac; }
.ah-offer-fields .ah-required { color: #d64545; font-weight: 700; }

/* Offer attachments — file input + the rendered file list (Pro-side and Poster-side). */
.ah-offer-file-input { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; font-size: 13px; color: #4b5563; }
.ah-offer-file-input::file-selector-button { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 13px; color: #783FF2; background: #f1ecfe; border: 1px solid #d9ccfb; border-radius: 8px; padding: 7px 12px; margin-right: 10px; cursor: pointer; }
.ah-offer-file-hint { font-size: 12px; color: #9aa0ac; margin: 6px 0 0; }

.ah-offer-files { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ah-offer-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; text-decoration: none !important; background: #f6f5fb; border: 1px solid #e7e4f2; border-radius: 10px; padding: 6px 11px 6px 6px; font-size: 13px; font-weight: 600; color: #3d424e; }
.ah-offer-file:hover { background: #efeafe; border-color: #d9ccfb; }
.ah-offer-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-offer-file-thumb { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; display: block; }
.ah-offer-file-ic { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: #783FF2; flex: 0 0 auto; }
.ah-offer-file-ic svg { width: 20px; height: 20px; }

/* ---- Reviews & ratings (Connect / reputation) ---- */
.ah-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.ah-star { color: #d8d5e4; font-size: 15px; line-height: 1; }
.ah-star.is-on { color: #f5a623; }
.ah-stars-meta { margin-left: 6px; font-size: 12.5px; color: #6a6f7b; }

.ah-rating-inline { display: inline-flex; align-items: center; gap: 4px; }
.ah-rating-inline .ah-star { font-size: 13px; }
.ah-rating-num { font-weight: 700; font-size: 12.5px; color: #3d424e; }
.ah-rating-count { font-size: 12px; color: #9aa0ac; }

/* Interactive star picker — pure CSS, reversed so hover/checked light up the star and all before it. */
.ah-star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin: 8px 0; }
.ah-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.ah-star-input label { font-size: 30px; line-height: 1; color: #d8d5e4; cursor: pointer; transition: color .1s; }
.ah-star-input label:hover, .ah-star-input label:hover ~ label, .ah-star-input input:checked ~ label { color: #f5a623; }
.ah-star-input input:focus-visible + label { outline: 2px solid #783FF2; outline-offset: 2px; border-radius: 4px; }

.ah-reviews { margin-top: 28px; }
.ah-reviews-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -.3px; color: #1E293B; margin: 0 0 14px; }
.ah-review-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ah-review { background: #fff; border: 1px solid var(--ah-line, #e7e4f2); border-radius: 14px; padding: 14px 16px; }
.ah-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.ah-review-name { font-weight: 700; color: #0D1117; font-size: 15px; }
.ah-review-text { margin: 2px 0 0; color: #4b5563; font-size: 14.5px; }
.ah-review-form { background: #faf9fe; border: 1px solid var(--ah-line, #e7e4f2); border-radius: 14px; padding: 16px 18px; }
.ah-review-prompt { margin: 0; font-size: 15px; color: #0D1117; }
.ah-review-form textarea { margin-top: 8px; }
.ah-offer-row { display: flex; gap: 8px; margin-top: 8px; }
.ah-offer-price-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.ah-offer-cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6a6f7b; font-weight: 700; font-size: 15px; pointer-events: none; }
.ah-offer-price { margin-top: 0 !important; padding-left: 26px !important; font-weight: 700; border-radius: 10px !important; /* match the basis select + other rounded fields (a theme rule squares number inputs) */ }
.ah-offer-basis { margin-top: 0 !important; flex: 0 0 auto; width: auto; max-width: 46%; }
.ah-offer-fields textarea.ah-note-input { margin-top: 8px; }

/* Quote displays — the Pro's price shown to the poster (manage list) and back to the Pro. */
.ah-manage-quote { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 16px; color: #1B9C5B; margin: 2px 0 6px; }
.ah-onit-quote { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-top: 8px; font-size: 14px; color: #6a6f7b; }
.ah-onit-quote strong { color: #1B9C5B; font-size: 16px; }

/* Message thread — the private Poster ↔ Pro back-and-forth on a claim (Connect / Phase 1b). */
.ah-thread { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ah-line, #e7e4f2); text-align: left; }
.ah-thread-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ah-thread-title { font-weight: 700; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; color: #6a6f7b; }
.ah-thread-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ah-purple, #783FF2); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.ah-thread-list { list-style: none; margin: 0 0 14px; padding: 8px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.ah-msg { max-width: 88%; align-self: flex-start; background: #f4f2fb; border: 1px solid var(--ah-line, #e7e4f2); border-radius: 12px; border-top-left-radius: 4px; padding: 8px 12px; }
.ah-msg.is-mine { align-self: flex-end; background: #eee7ff; border-color: #d9ccff; border-radius: 12px; border-top-right-radius: 4px; }
.ah-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.ah-msg-who { font-weight: 700; font-size: 13px; color: #0D1117; }
.ah-msg-time { font-size: 11px; color: #9096a1; }
.ah-msg-body { font-size: 14.5px; line-height: 1.45; color: #2c313b; word-wrap: break-word; overflow-wrap: anywhere; }
.ah-thread-empty { margin: 0 0 10px; font-size: 14px; color: #6a6f7b; }
/* Native, texting-style composer: [paperclip] [message field] [round send]. */
.ah-thread-form { display: flex; align-items: flex-end; gap: 8px; }
.ah-thread-clip { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #6a6f7b; background: #f4f2fb; cursor: pointer; transition: color .12s, background .12s; }
.ah-thread-clip:hover { color: var(--ah-purple, #783FF2); background: #ece7fb; }
.ah-thread-clip .ah-ic { width: 19px; height: 19px; }
.ah-thread-clip .ah-thread-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ah-thread-input { flex: 1 1 auto; min-width: 0; resize: none; min-height: 40px; max-height: 140px; padding: 9px 15px; border: 1px solid var(--ah-line, #e7e4f2); border-radius: 20px; font: inherit; font-size: 14.5px; line-height: 1.4; color: #2c313b; background: #fff; box-sizing: border-box; }
.ah-thread-input:focus { outline: none; border-color: var(--ah-purple, #783FF2); box-shadow: 0 0 0 3px rgba(120,63,242,.12); }
.ah-thread-send { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ah-purple, #783FF2); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s; }
.ah-thread-send:hover { background: var(--ah-purple-hover, #6a2fe0); }
.ah-thread-send .ah-ic { width: 18px; height: 18px; }
/* Collapsible chat card (responder's "Your offer" panel) — the thread sits inside its own bordered card so
   it reads as a self-contained control; folds away to save vertical space. The whole summary row toggles it. */
.ah-thread-acc { margin-top: 14px; border: 1px solid var(--ah-line, #e7e4f2); border-radius: 14px; background: #fbfbfd; }
.ah-thread-acc > .ah-thread-acc-sum {
	list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
	padding: 13px 14px; margin: 0; user-select: none;
}
.ah-thread-acc > .ah-thread-acc-sum::-webkit-details-marker { display: none; }
.ah-thread-acc[open] > .ah-thread-acc-sum { padding-bottom: 6px; }
.ah-thread-acc-lbl { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; color: #6a6f7b; }
.ah-thread-acc-ic { display: inline-flex; color: #8a90a0; }
.ah-thread-acc-ic .ah-ic { width: 17px; height: 17px; }
.ah-thread-acc-unread { padding: 2px 8px; border-radius: 999px; background: var(--ah-purple, #783FF2); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.ah-thread-acc-chev { margin-left: auto; flex: 0 0 auto; color: #9096a1; display: inline-flex; transition: transform .18s ease; }
.ah-thread-acc-chev .ah-ic { width: 20px; height: 20px; }
.ah-thread-acc[open] > .ah-thread-acc-sum > .ah-thread-acc-chev { transform: rotate(180deg); }
/* Inside the card the thread carries no border/margin of its own — the card provides the frame; the body
   sits under the summary with matching side padding. */
.ah-thread-acc > .ah-thread { margin: 0; padding: 0 14px 14px; border-top: 0; }
/* Mobile: keep the chat card's inner padding to a minimum so the conversation gets the maximum width. */
@media (max-width: 600px) {
	.ah-thread-acc > .ah-thread-acc-sum { padding: 11px 9px; }
	.ah-thread-acc[open] > .ah-thread-acc-sum { padding-bottom: 5px; }
	.ah-thread-acc > .ah-thread { padding: 0 9px 10px; }
}
/* In the narrow sidebar (a Pro's "You're on it" panel), the single-row composer is too cramped — give
   it the same stacked treatment as mobile at any width: full-width, taller message field on top, with
   the paperclip + send on their own line below. */
.ah-detail-side .ah-thread-form { flex-wrap: wrap; }
.ah-detail-side .ah-thread-input { order: -1; flex: 1 1 100%; border-radius: 10px; min-height: 76px; }
.ah-detail-side .ah-thread-send { margin-left: auto; }

/* Message attachments inside a bubble. */
.ah-msg-files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ah-msg-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px 4px 4px; background: #fff; border: 1px solid var(--ah-line, #e7e4f2); border-radius: 10px; text-decoration: none !important; color: #2c313b; font-size: 12.5px; }
.ah-msg-file:hover { border-color: var(--ah-purple, #783FF2); }
.ah-msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.ah-msg-file-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 7px; flex: 0 0 auto; }
.ah-msg-file-ic { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: #6a6f7b; flex: 0 0 auto; }
.ah-msg-file-ic .ah-ic { width: 18px; height: 18px; }

/* Dashboard-card message badge — gray when read, purple with a chat glyph when there's something new. */
.ah-msgpill { display: inline-flex; align-items: center; gap: 4px; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px; background: #eceaf1; color: #3d424e; font-size: 12px; font-weight: 700; line-height: 1; box-sizing: border-box; }
.ah-msgpill.is-unread { background: var(--ah-purple, #783FF2); color: #fff; }
.ah-msgpill-ic { display: inline-flex; align-items: center; }
.ah-msgpill-ic .ah-ic { width: 13px; height: 13px; }
.ah-db-row-pros .ah-msgpill, .ah-dash-meta .ah-msgpill { margin-left: 2px; }

/* Nav "Messages" alert — the soon item lights up when unread messages are waiting. */
.ah-mnav-badge-alert, .ah-bnav-badge-alert { background: var(--ah-purple, #783FF2); color: #fff; }
.ah-mnav-item.has-alert .ah-mnav-ico, .ah-bnav-item.has-alert .ah-bnav-ico { color: var(--ah-purple, #783FF2); }

.ah-side-line { font-size: 14px; color: #3d424e; margin-top: 12px; }
/* font-weight !important: the side titles are <h2>, and Astra styles headings with a weight that
   otherwise wins over this single class. "Posted by" is a <div>, which is why it was already bold. */
.ah-side-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 700 !important; font-size: 16px; letter-spacing: -.2px; margin: 0 0 12px; color: #0D1117; }

.ah-askholes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ah-askhole-row { display: flex; align-items: center; gap: 10px; }

/* Public "Askholes on it" list — avatar + name (+ "(You)"). Container-clipped (UM-proof). */
.ah-askhole-av {
	flex: 0 0 auto; display: inline-flex; width: 36px; height: 36px; border-radius: 50%;
	overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0 1px #ececf1; background: #f0ecfd;
}
.ah-askhole-av img, .ah-askhole-av svg, .ah-askhole-av > * {
	width: 100% !important; height: 100% !important; max-width: 100%;
	object-fit: cover; display: block; border: 0; border-radius: 50%;
}
.ah-you-tag { color: #783FF2; font-weight: 800; font-size: 12px; }
.ah-askholes-more { font-size: 13px; color: #6a6f7b; font-weight: 600; margin: 12px 0 0; }
.ah-avatar {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
	background: #f0ecfd; color: #783FF2; font-weight: 800; font-size: 14px;
	display: flex; align-items: center; justify-content: center;
}
.ah-askhole-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ah-askhole-name { font-weight: 700; font-size: 14px; }
.ah-askhole-note { font-size: 13px; color: #6a6f7b; }
.ah-claim-chip {
	flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; background: #eef0f3; color: #4b5563;
}
.ah-claim-chip.is-on_it { background: #eafaf1; color: #1B9C5B; }
.ah-claim-chip.is-working { background: #f0ecfd; color: #783FF2; }
.ah-claim-chip.is-submitted { background: #fff4d6; color: #9a6b00; }
.ah-claim-chip.is-won { background: #1B9C5B; color: #fff; }
.ah-claim-chip.is-lost, .ah-claim-chip.is-withdrawn { background: #eef0f3; color: #9098a4; }

/* Askholes-on-it avatar stack (public detail view) */
.ah-avatars { display: flex; align-items: center; flex-wrap: wrap; }
.ah-avatar-stack {
	display: inline-flex; width: 46px; height: 46px; border-radius: 50%;
	overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 0 1px #ececf1;
	margin-left: -10px; background: #f0ecfd;
}
.ah-avatar-stack:first-child { margin-left: 0; }
.ah-avatar-stack img, .ah-avatar-stack svg, .ah-avatar-stack > * {
	width: 100% !important; height: 100% !important; max-width: 100%;
	object-fit: cover; display: block; border: 0; border-radius: 50%;
}
.ah-avatar-more {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background: #f0ecfd; color: #783FF2;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 13px;
	border: 2px solid #fff; margin-left: -10px;
}

@media (max-width: 820px) {
	/* Excessive bottom padding removed on mobile — the footer spacing covers it. Top padding removed too. */
	.askhole-detail { padding-top: 0; padding-bottom: 0; }

	/* Surface the action: budget + claim/Join sit under the title, above the description;
	   pros + poster profile drop below. display:contents flattens the two columns so all
	   blocks reorder together in one flex column. Desktop is untouched (order is scoped here). */
	.ah-detail-grid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
	.ah-detail-main, .ah-detail-side { display: contents; }
	.ah-detail-top     { order: 1; }
	.ah-detail-budget  { order: 2; }
	.ah-detail-body    { order: 3; } /* description before the Pro promo */
	.ah-join-pro       { order: 4; }
	.ah-poster-card    { order: 5; }
	.ah-detail-pros    { order: 6; }
	.ah-timeline-card  { order: 7; }
	.ah-share-card     { order: 8; }

	/* Slim the Join card on mobile: drop the description line, shrink the mascot. */
	.ah-join-pro .ah-join-sub { display: none; }
	.ah-join-mascot { width: 64px; }
}

/* ---- Lifecycle (Step 8): claim self-controls + owner manage panel ---- */

/* Resolved outcome badges (reuse .ah-onit base). */
.ah-onit.ah-won { background: #1B9C5B; color: #fff; border-color: #1B9C5B; }
.ah-onit.ah-lost { background: #eef0f3; color: #6a6f7b; border-color: #e4e6ea; }

/* Buttons (feed CSS loads site-wide; the form CSS doesn't, so define them here). */
.ah-btn, .ah-btn-accept, .ah-btn-ghost {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 15px;
	border-radius: 12px; padding: 11px 20px; cursor: pointer; border: none;
	text-decoration: none !important; display: inline-block;
}
.ah-btn { background: #783FF2; color: #fff; }
.ah-btn:hover { background: #6a2fe0; color: #fff; }
.ah-btn-accept { background: #1B9C5B; color: #fff; width: 100%; box-sizing: border-box; }
.ah-btn-accept:hover { background: #15834c; color: #fff; }
.ah-btn-ghost { background: #fff; color: #0D1117; border: 1.5px solid #dcdce4; }
.ah-btn-ghost:hover { border-color: #b9b9c6; }
.ah-btn-textdanger {
	background: none; border: none; padding: 4px 0; cursor: pointer;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px;
	color: #d92d20; text-decoration: none;
}
.ah-btn-textdanger:hover { color: #b42318; text-decoration: underline; }

/* ============================================================================
   CANONICAL FORM CONTROLS — the AskHole form-field standard. One height (50px)
   and shape for every field so inputs line up with the primary CTA button.
   Use these on ALL forms going forward:
     .ah-input     text / email / password / number inputs
     .ah-select    <select> dropdowns
     .ah-textarea  multi-line inputs
     .ah-btn .ah-btn-block   full-width primary button at the same 50px height
   Control height: 50px · radius: 12px · border #e2dff0 · focus ring #783FF2.
   ============================================================================ */
.ah-input, .ah-select {
	width: 100%; height: 50px; padding: 0 14px;
	border: 1px solid #e2dff0; border-radius: 12px; background: #fff;
	font-family: 'Inter', system-ui, sans-serif; font-size: 15px; color: #0D1117;
	box-sizing: border-box; -webkit-appearance: none; appearance: none;
}
.ah-input:focus, .ah-select:focus {
	outline: none; border-color: #783FF2; box-shadow: 0 0 0 3px rgba(120, 63, 242, .14);
}
.ah-input::placeholder { color: #6B7280; opacity: 1; }
.ah-textarea {
	width: 100%; min-height: 112px; padding: 13px 14px; line-height: 1.5;
	border: 1px solid #e2dff0; border-radius: 12px; background: #fff;
	font-family: 'Inter', system-ui, sans-serif; font-size: 15px; color: #0D1117;
	box-sizing: border-box;
}
.ah-textarea:focus { outline: none; border-color: #783FF2; box-shadow: 0 0 0 3px rgba(120, 63, 242, .14); }
/* Full-width primary button pinned to the same 50px control height (pair with .ah-btn). */
.ah-btn-block {
	display: block; width: 100%; height: 50px; padding: 0 20px;
	line-height: normal; text-align: center; box-sizing: border-box;
}

/* Compact price input for the Askhole's progress form (sidebar). */
.ah-reward-input { display: flex; align-items: center; }
.ah-reward-input > span { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 18px; color: #1B9C5B; padding: 0 8px 0 2px; }
.ah-reward-input-sm input { max-width: 140px; font-weight: 700; }
.ah-note-details .ah-cta-note.ah-left { text-align: left; }
.ah-withdraw-details > summary { color: #d92d20; }

/* Owner manage panel (main column). */
.ah-manage {
	margin-top: 28px; padding: 22px 24px;
	background: #fff; border: 1px solid #ececf1; border-radius: 16px;
	box-shadow: 0 1px 2px rgba(13, 17, 23, .04);
}
/* Mobile: strip the responder's "Your offer" panel down to a bare section — no card padding, border,
   background or shadow — so the conversation gets the full column width. The heading/quote align to the
   page gutter and the chat card spans edge-to-edge within it. Scoped to .ah-claim-manage so the owner's
   manage-offers card is untouched. */
@media (max-width: 600px) {
	.ah-manage.ah-claim-manage {
		margin-top: 20px; padding: 0;
		background: transparent; border: 0; border-radius: 0; box-shadow: none;
	}
}
.ah-manage-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -.3px; margin: 0 0 4px; }
.ah-manage-status { color: #1B9C5B; font-weight: 700; font-size: 14px; margin: 0 0 14px; }
.ah-manage-status.is-progress { color: #0F7A45; background: #eaf6ef; border: 1px solid #cdeadb; border-radius: 10px; padding: 10px 12px; font-weight: 600; }
/* In-progress lead line: plain text (no green ribbon) — the winner + Finished row carry the emphasis. */
.ah-manage-lead { color: #3d424e; font-weight: 500; font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.ah-manage-lead strong { font-weight: 700; color: #0D1117; }
.ah-manage-finish { margin: 0; }
.ah-manage-finish .ah-btn-accept { width: 100%; }
.ah-manage-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ah-manage-row {
	display: block;
	padding: 14px; border: 1px solid #ececf1; border-radius: 14px; background: #fcfcfd;
}
.ah-manage-row.is-winner { border-color: #c8ccd4; background: #fff; }
.ah-manage-row.is-dim { opacity: .6; }
/* Accordion: each Pro is a collapsible row. The summary (avatar + identity + quote left, message badge
   + Accept + chevron right) is always visible; the body (attachments + the full-width thread) expands.
   Rows with unread messages render open; the rest collapsed. */
.ah-manage-summary { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; list-style: none; }
.ah-manage-summary::-webkit-details-marker { display: none; }
.ah-manage-summary::marker { content: ''; }
.ah-manage-row .ah-avatar-stack { width: 44px; height: 44px; margin: 0; flex: 0 0 auto; }
.ah-manage-id { flex: 1 1 auto; min-width: 0; }
.ah-manage-subline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.ah-manage-quote-sm { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px; color: #3d424e; }
/* Messages indicator on the meta line (moved off the accepted chip): a straight divider, then a
   chat glyph + "N messages" text. Purple when there's something unread. */
.ah-manage-sep { display: inline-block; width: 1px; height: 13px; background: #d7d9e2; }
.ah-manage-msgs { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #6a6f7b; }
.ah-manage-msgs .ah-ic { width: 15px; height: 15px; }
.ah-manage-msgs.is-unread { color: var(--ah-purple, #783FF2); }
.ah-manage-summary-right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ah-manage-action { flex: 0 0 auto; }
.ah-manage-action .ah-accept-form { margin: 0; max-width: none; }
.ah-manage-action .ah-btn-accept { width: auto; }
.ah-manage-chevron { flex: 0 0 auto; color: #9096a1; display: inline-flex; transition: transform .18s ease; }
.ah-manage-chevron .ah-ic { width: 20px; height: 20px; }
.ah-manage-row[open] .ah-manage-chevron { transform: rotate(180deg); }
.ah-manage-body { margin-top: 12px; }
.ah-manage-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
.ah-manage-name { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 15px; color: #0D1117; overflow-wrap: anywhere; }
@media (max-width: 600px) {
	.ah-manage-summary { flex-wrap: wrap; }
	.ah-manage-summary-right { flex-basis: 100%; margin-left: 0; margin-top: 10px; }
	.ah-manage-chevron { margin-left: auto; }

	/* Un-nest the Pro rows on phones: drop the inner-card chrome so each row is a flush, full-width
	   part of the Manage card — gives the messaging every pixel it can get. Rows separated by a hairline. */
	.ah-manage { padding: 16px 14px; }
	.ah-manage-list { gap: 0; }
	.ah-manage-row { padding: 16px 0; border: 0; border-bottom: 1px solid #ececf1; border-radius: 0; background: transparent; }
	.ah-manage-row:first-child { padding-top: 0; }
	.ah-manage-row:last-child { padding-bottom: 0; border-bottom: 0; }
	.ah-manage-row.is-winner { background: transparent; }

	/* Native composer stacks on phones: full-width, squarer message field on top; paperclip + send drop
	   to their own line so they aren't fighting the tiny screen width. */
	.ah-thread-form { flex-wrap: wrap; }
	.ah-thread-input { order: -1; flex: 1 1 100%; border-radius: 10px; min-height: 76px; }
	.ah-thread-send { margin-left: auto; }
}
.ah-manage-note { font-size: 14px; color: #4b5563; margin: 2px 0 8px; }
.ah-manage-result {
	font-size: 14px; color: #2b2f38; background: #fff; border: 1px solid #ececf1;
	border-radius: 10px; padding: 8px 10px; margin: 6px 0 10px;
}
.ah-manage-price { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 16px; color: #1B9C5B; }
.ah-accept-form { margin-top: 8px; max-width: 260px; }
.ah-winner-tag { display: inline-block; font-weight: 800; font-size: 13px; color: #1B9C5B; }
.ah-reveal-note {
	font-size: 13px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0;
	border-radius: 10px; padding: 6px 10px; margin: 4px 0 8px; display: inline-block;
}
.ah-manage-hint, .ah-manage-actions .ah-cta-note { font-size: 12.5px; color: #5C6270; }
.ah-manage-hint { margin: 14px 0 0; }
.ah-manage-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0f0f4; }

/* ---- Dashboards (Step 9) ---- */
.askhole-dash { font-family: 'Inter', system-ui, sans-serif; color: #0D1117; }
.ah-dash { max-width: 860px; margin: 0 auto; padding: 8px 4px 40px; }
.ah-dash-hello {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 30px;
	letter-spacing: -.6px; margin: 0 0 20px; color: #0D1117;
}
.ah-dash-section { margin: 0 0 34px; }
.ah-dash-h {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 18px;
	letter-spacing: -.2px; margin: 0 0 14px; color: #0D1117;
}
.ah-dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ah-dash-row {
	display: flex; align-items: center; gap: 14px; justify-content: space-between;
	background: #fff; border: 1px solid #ececf1; border-radius: 14px;
	padding: 14px 18px; box-shadow: 0 1px 2px rgba(13, 17, 23, .04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ah-dash-row:hover { border-color: #dcdce4; box-shadow: 0 6px 18px rgba(13, 17, 23, .09); }
.ah-dash-main { min-width: 0; }
.ah-dash-title {
	display: inline-block; font-weight: 600; font-size: 16px; letter-spacing: -.2px;
	color: #0D1117; text-decoration: none !important; line-height: 1.25;
}
.ah-dash-title:hover { color: #783FF2; }
.ah-dash-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 7px; font-size: 13px; color: #6a6f7b; font-weight: 600; }
.ah-dash-meta .ah-badge.ah-dash-pill { position: static; top: auto; left: auto; }
.ah-dash-reward { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 16px; color: #1B9C5B; }
.ah-dash-count { font-weight: 600; }
.ah-dash-pending { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #7a5b12; background: #fff4d6; border: 1px solid #f2e2b3; border-radius: 999px; padding: 2px 9px; }
.ah-dash-action {
	flex: 0 0 auto; font-family: 'Inter', system-ui, sans-serif; font-weight: 700;
	font-size: 14px; color: #783FF2; text-decoration: none !important; white-space: nowrap;
}
.ah-dash-action:hover { color: #6a2fe0; }
.ah-dash-empty {
	background: #fff; border: 1px dashed #dcdce4; border-radius: 14px;
	padding: 26px; text-align: center; color: #6a6f7b;
}
.ah-dash-empty p { margin: 0 0 14px; font-size: 15px; }
.ah-dash-gate { text-align: center; padding: 40px 0; }
.ah-dash-gate p { font-size: 16px; color: #3d424e; margin: 0 0 16px; }
.ah-dash-gate .ah-cta { margin: 0 auto; }

@media (max-width: 560px) {
	.ah-dash-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- Homepage browse strip (Step 11) ---- */
/* Same content box as .askhole-feed (max-width + side padding) so the homepage strip
   and the browse page share an identical left edge + heading inset. Keep these in sync. */
.ah-home { font-family: 'Inter', system-ui, sans-serif; color: #0D1117; max-width: 1120px; margin: 0 auto; padding: 28px 20px 60px; }
.ah-home-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.ah-home-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 26px; letter-spacing: -.5px; margin: 0; }
.ah-home-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #6a6f7b; }
.ah-home-sort-select {
	font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; color: #0D1117;
	background: #fff; border: 1.5px solid #e0e2e8; border-radius: 10px; padding: 7px 10px; cursor: pointer;
	width: auto !important; margin: 0 !important; max-width: none !important;
}

/* Category filter: collapses to a single row with a "More" pill at the end;
   clicking More reveals the full wrapped list. JS decides how many pills fit and
   only shows the More pill when the list actually overflows one line. The More
   pill is a normal .ah-chip, so it inherits the standard pill + hover styling. */
.ah-home-chips {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px;
}
.ah-home-chips.is-collapsed { flex-wrap: nowrap; overflow: hidden; }
.ah-chips-more[hidden] { display: none !important; }
.ah-chip {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 13.5px;
	color: #3d424e; background: #f4f5f7; border: 1.5px solid #e4e6ec; border-radius: 999px;
	padding: 8px 16px; cursor: pointer; flex: 0 0 auto;
	transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
	white-space: nowrap;
}
/* Hover: subtle light-purple tint (no solid fill — that's reserved for the selected state). */
.ah-chip:hover { background: #f2eefe; border-color: #d9ccfa; color: #5b2fd0; }
.ah-chip:focus-visible { outline: none; border-color: #783FF2; box-shadow: 0 0 0 3px rgba(120, 63, 242, .30); }
/* Selected: solid brand purple (was black). */
.ah-chip.is-active,
.ah-chip.is-active:hover { background: #783FF2; border-color: #783FF2; color: #fff; }
.ah-chip.is-chip-hidden { display: none !important; }
.ah-chip-more { color: #783FF2; }

/* one responsive row of compact cards; reuses .ah-card */
.ah-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.ah-home-body { position: relative; min-height: 60px; transition: opacity .15s ease; }
.askhole-home.is-loading .ah-home-body { opacity: .45; pointer-events: none; }
.askhole-home.is-loading .ah-home-body::after {
	content: ''; position: absolute; top: 40px; left: 50%; width: 34px; height: 34px; margin-left: -17px;
	border: 3px solid #e2e4ea; border-top-color: #783FF2; border-radius: 50%;
	animation: ah-spin .7s linear infinite;
}
@keyframes ah-spin { to { transform: rotate(360deg); } }

.ah-home-viewall { text-align: center; margin: 26px 0 0; }
/* Simple brand-coloured text link — no underline, no pill; colour + hover for emphasis. */
.ah-home-viewall-link {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 15px;
	color: #783FF2; text-decoration: none !important; border: none; background: none;
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px;
	transition: color .14s ease;
}
.ah-home-viewall-link:hover { color: #6a2fe0; }
.ah-home-viewall-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(120, 63, 242, .32); border-radius: 6px; }

/* ---- Mobile browse experience (≤640px): dropdown categories, collapsible
   filters, and a denser two-up card grid so more listings fit on screen. ---- */
@media (max-width: 640px) {
	/* Browse page: keep Search on screen; tuck Category / Sort / Filter behind a toggle. */
	.ah-filters { gap: 10px; }
	.ah-filter-search { flex: 1 1 100%; width: 100% !important; }
	.ah-filters-toggle-btn {
		display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
		font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px; color: #3d424e;
		background: #f4f5f7; border: 1.5px solid #e4e6ec; border-radius: 12px; padding: 11px 18px; cursor: pointer;
	}
	.ah-filters-toggle:checked ~ .ah-filters-toggle-btn { background: #f2eefe; border-color: #d9ccfa; color: #5b2fd0; }
	.ah-filters-rest { display: none; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
	.ah-filters-toggle:checked ~ .ah-filters-rest { display: flex; }
	.ah-filters-rest .ah-filter-select,
	.ah-filters-rest .ah-filter-btn { width: 100% !important; flex: 0 0 auto; }
	.ah-filter-clear { align-self: flex-start; }

	/* Homepage strip: swap the horizontal chip row for a scalable category dropdown. */
	.ah-home-chips { display: none; }
	.ah-home-cat-select {
		display: block; width: 100% !important; margin: 0 0 16px !important; box-sizing: border-box;
		font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: #0D1117;
		background: #fff; border: 1.5px solid #e0e2e8; border-radius: 12px; padding: 12px 14px;
		cursor: pointer; max-width: none !important;
	}
	.ah-home-cat-select:focus { outline: none; border-color: #783FF2; box-shadow: 0 0 0 3px rgba(120, 63, 242, .12); }
	.ah-home-head { align-items: flex-start; }

	/* Denser cards — two per row, tighter spacing. */
	.ah-grid, .ah-home-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.ah-card-body { padding: 10px 11px 13px; gap: 6px; }
	.ah-card-media { aspect-ratio: 3 / 2; }
	.ah-card-title { font-size: 15px; letter-spacing: -.2px; }
	.ah-reward { font-size: 16px; }
	.ah-cat { font-size: 10px; padding: 2px 8px; }
	.ah-card-foot { font-size: 12px; padding-top: 4px; }
	.ah-card-poster { width: 32px; height: 32px; left: 9px; bottom: 9px; }
	.ah-badge { font-size: 10px; padding: 3px 8px; }
}

/* ---- Header nav "Sign up" menu item → primary purple CTA ----
   Applied only on non-mobile views (Astra's desktop menu). On the mobile
   hamburger menu it stays a normal link. Set the menu item's CSS class to
   "sign-up-btn" (Appearance → Menus → item → CSS Classes). */
@media (min-width: 922px) {
	/* Center the button in the header row so it doesn't stretch to full height. */
	li.sign-up-btn { display: flex !important; align-items: center !important; }
	li.sign-up-btn > a,
	li.menu-item.sign-up-btn > a,
	.main-header-menu li.sign-up-btn > a {
		display: inline-block !important;
		background-color: #783FF2 !important;
		color: #fff !important;
		/* Match the plugin's .ah-btn (login/post buttons) so all primary CTAs are identical. */
		border-radius: 12px !important;
		padding: 12px 26px !important;
		margin-left: 10px !important;
		height: auto !important;
		min-height: 0 !important;
		font-weight: 700 !important;
		font-size: 16px !important;
		line-height: 1.2 !important;
		transition: background-color .14s ease, transform .08s ease !important;
	}
	li.sign-up-btn > a:hover,
	li.sign-up-btn > a:focus { background-color: #6a2fe0 !important; color: #fff !important; }
	li.sign-up-btn > a:active { transform: translateY(1px); }
	li.sign-up-btn > a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(120, 63, 242, .32) !important; }
	/* Kill Astra's default underline/hover-line so only the pill shows. */
	li.sign-up-btn > a::before,
	li.sign-up-btn > a::after { display: none !important; }
}

/* ---- Primary header nav links: brand-purple hover + black current page ----
   Astra's default link hover is a blue; override the primary menu links to the
   brand CTA purple (#783FF2) on hover/focus, and paint the current page black.
   The "Sign up" pill (.sign-up-btn) is excluded — it keeps its button styling. */
.ast-primary-header-bar .main-header-menu .menu-item:not(.sign-up-btn) > a,
.main-header-menu .menu-item:not(.sign-up-btn) > .menu-link {
	transition: color .14s ease !important;
}
.ast-primary-header-bar .main-header-menu .menu-item:not(.sign-up-btn) > a:hover,
.ast-primary-header-bar .main-header-menu .menu-item:not(.sign-up-btn) > a:focus,
.main-header-menu .menu-item:not(.sign-up-btn) > .menu-link:hover,
.main-header-menu .menu-item:not(.sign-up-btn) > .menu-link:focus {
	color: #783FF2 !important;
}
/* Current / active page → brand CTA purple + bold. Bold is what sets "you are here" apart from a plain
   purple hover; it stays purple+bold on hover so the active state never flickers. */
.main-header-menu .current-menu-item:not(.sign-up-btn) > a,
.main-header-menu .current-menu-item:not(.sign-up-btn) > a:hover,
.main-header-menu .current-menu-item:not(.sign-up-btn) > a:focus,
.main-header-menu .current_page_item:not(.sign-up-btn) > a,
.main-header-menu .current-menu-ancestor:not(.sign-up-btn) > a,
.ast-primary-header-bar .main-header-menu .current-menu-item:not(.sign-up-btn) > a {
	color: #783FF2 !important;
	font-weight: 700 !important;
}

/* ---- Mobile menu (Astra): hamburger + close (X) = brand purple; current page = light purple ---- */
/* Astra draws the toggle as an SVG that defaults to the theme's blue link colour. */
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill,
.main-header-menu-toggle,
.ast-header-break-point .menu-toggle,
.ast-mobile-header-content .menu-toggle-close {
	color: #783FF2 !important;
}
.ast-mobile-menu-trigger-minimal svg,
.ast-mobile-menu-trigger-fill svg,
.main-header-menu-toggle svg,
.ast-header-break-point .menu-toggle svg,
.ast-mobile-menu-buttons svg,
.ast-mobile-header-content .menu-toggle-close svg,
.ast-close-menu svg {
	fill: #783FF2 !important;
	color: #783FF2 !important;
}
/* Selected page highlight in the mobile dropdown → soft brand purple (was Astra blue). */
.ast-header-break-point .main-header-menu .current-menu-item > .menu-link,
.ast-header-break-point .main-header-menu .current-menu-item > a,
.ast-header-break-point .main-header-menu .current_page_item > a,
.ast-header-break-point .main-header-menu .current-menu-ancestor > a,
.ast-header-break-point .main-navigation .current-menu-item > .menu-link {
	background-color: #f1ecfe !important;
}

/* ---- Reusable CTA buttons + hero copy helpers (class-based, site-wide) ----
   Attach these classes in Elementor instead of hand-styling each widget:
     .ah-btn          primary purple CTA (matches the plugin's .ah-btn)
     .ah-btn-outline  secondary / neutral outline button
     .ah-hero-btns    flex row wrapper so buttons sit side by side
     .ah-hero-h1      the hero headline (use <span class="g"> for the purple word)
     .ah-hero-lead    the hero sub-line
   Works on a plain <a> (HTML widget) or an Elementor widget wrapper. */
.ah-btn,
a.ah-btn,
.elementor-widget-button .elementor-button.ah-btn {
	display: inline-block;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	color: #fff !important;
	background-color: #783FF2 !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 12px 26px !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .14s ease, transform .08s ease;
}
.ah-btn:hover, a.ah-btn:hover { background-color: #6a2fe0 !important; color: #fff !important; }
.ah-btn:active, a.ah-btn:active { transform: translateY(1px); }

.ah-btn-outline,
a.ah-btn-outline {
	display: inline-block;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	color: #0D1117 !important;
	background-color: #fff !important;
	border: 1.5px solid #e0e2e8 !important;
	border-radius: 12px !important;
	padding: 12px 26px !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color .14s ease, color .14s ease;
}
.ah-btn-outline:hover, a.ah-btn-outline:hover { border-color: #c7cbd4 !important; color: #0D1117 !important; }

.ah-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }

.ah-hero-h1,
.ah-hero-h1 .elementor-heading-title {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 800 !important;
	font-size: clamp(32px, 4.4vw, 52px) !important;
	line-height: 1.06 !important;
	letter-spacing: -1px !important;
	color: #0D1117 !important;
	margin: 0 !important;
}
.ah-hero-h1 .g,
.ah-hero-h1 .elementor-heading-title .g {
	color: #783FF2 !important;
	position: relative;
	display: inline-block;
	padding-bottom: .16em; /* room for the swoosh + gap matching the logo */
}
/* Brand brush underline — matches the logo's swoosh shape + gap from the text. */
.ah-hero-h1 .g::after {
	content: "";
	position: absolute;
	left: -.11em;
	bottom: -.22em;
	width: calc(100% + .3em);
	height: .46em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 40' preserveAspectRatio='none'%3E%3Cpath d='M9 28 C 34 11, 95 6, 152 9 C 180 10, 202 13, 214 17 C 203 21, 178 19, 150 19 C 92 19, 40 25, 9 28 Z' fill='%23783FF2'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	pointer-events: none;
}

.ah-hero-lead,
.ah-hero-lead .elementor-widget-container {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 17px !important;
	line-height: 1.55 !important;
	color: #333 !important;
	max-width: 46ch;
	margin: 18px 0 26px !important;
}

/* ---- Hero collage layout (class-based; images come from the Media Library) ----
   The collage is ONE HTML widget of empty <div>s. Each picture div sets its own
   background-image INLINE in the markup (a Media Library URL), e.g.
     <div class="ah-polaroid" style="background-image:url('/wp-content/uploads/…/polaroid.png')"></div>
   This stylesheet only handles POSITION + size — no images are bundled in the plugin.
   Everything is TOP-anchored so the layout stays put even if the column stretches.
   In Elementor: give the right column (or the HTML widget) the class
   "ah-hero-collage" and paste the collage markup. Nudge any value to taste. */
.ah-hero-collage { position: relative; min-height: 520px; }
.ah-hero-collage .ah-postit,
.ah-hero-collage .ah-polaroid,
.ah-hero-collage .ah-arrowtop,
.ah-hero-collage .ah-arrowup,
.ah-hero-collage .ah-arrowdown,
.ah-hero-collage .ah-label,
.ah-hero-collage .ah-avatars { position: absolute !important; margin: 0 !important; }
.ah-hero-collage .ah-polaroid,
.ah-hero-collage .ah-arrowtop,
.ah-hero-collage .ah-arrowup,
.ah-hero-collage .ah-arrowdown,
.ah-hero-collage .ah-label { background-position: center; background-size: contain; background-repeat: no-repeat; }

.ah-hero-collage .ah-postit    { left: 75px;  top: 2px;    z-index: 3; }
.ah-hero-collage .ah-arrowtop  { right: 85px; top: 2px;    width: 96px;  aspect-ratio: 135 / 128; z-index: 6; }
/* Polaroid: tilted RIGHT, ~20% bigger, and z-index 2 so it always sits UNDER the post-it (z-index 3).
   The source PNG has a small +2deg bake; this transform adds to it — raise/lower the angle to taste. */
.ah-hero-collage .ah-polaroid  { right: 0;    top: 40px;   width: 392px; aspect-ratio: 765 / 585; transform: rotate(4deg); z-index: 2; }
/* Avatars: the site's card avatar-stack component (ringed, overlapping circles),
   sized between the card (26px) and the old strip — a touch smaller than before. */
.ah-hero-collage .ah-avatars   { right: 48px; top: 290px; z-index: 5; display: flex; align-items: center; flex-wrap: nowrap; transform: rotate(4deg); }
.ah-hero-collage .ah-avatar-stack { width: 45px; height: 45px; margin-left: -11px; }
.ah-hero-collage .ah-label     { left: 180px; top: 340px;  width: 152px; aspect-ratio: 304 / 154; transform: rotate(-3deg); z-index: 4; }
.ah-hero-collage .ah-arrowup   { left: 90px;  top: 280px;  width: 64px;  aspect-ratio: 131 / 98;  z-index: 6; }
.ah-hero-collage .ah-arrowdown { left: 335px; top: 350px;  width: 64px;  aspect-ratio: 128 / 74;  transform: rotate(-50deg); z-index: 6; }

/* Smaller screens: drop the arrows/label overlap, keep post-it + polaroid + avatars. */
@media (max-width: 880px) {
	.ah-hero-collage { min-height: 400px; margin-top: 8px; }
	.ah-hero-collage .ah-arrowtop,
	.ah-hero-collage .ah-arrowup,
	.ah-hero-collage .ah-arrowdown,
	.ah-hero-collage .ah-label { display: none !important; }
	.ah-hero-collage .ah-polaroid { top: 96px;  width: 250px; }
	.ah-hero-collage .ah-avatars  { top: 228px; right: 30px; }
	.ah-hero-collage .ah-avatar-stack { width: 38px; height: 38px; margin-left: -10px; }
}

/* Phones: rework the hero for a single column. (1) Logo lines up with the H1's
   20px gutter. (2) Reorder so the post-it/car "post" sits ABOVE the Post-a-request
   button — the left column's children are promoted into the hero row (display:
   contents) so the heading, lead, collage and buttons can all be ordered together.
   (3) Abandon the absolute desktop collage — stack note → car → avatars centred.
   Verified against the live DOM at mobile width. */
@media (max-width: 767px) {
	/* (1) logo aligns with the hero H1 (header has no gutter by default); leave the footer logo alone */
	.askhole-logo { margin-left: 20px; }
	.ah-footer .askhole-logo { margin-left: 0; }
	/* smaller header logo on mobile */
	.site-branding .askhole-logo, .ast-primary-header-bar .askhole-logo { font-size: 35px !important; }
	/* bigger hamburger, sitting at the same 20px gutter as the logo/sections */
	.ast-mobile-menu-trigger-minimal { font-size: 28px !important; padding-right: 20px !important; }
	.ast-mobile-menu-trigger-minimal svg { width: 1em !important; height: 1em !important; }
}

/* Phones: single-column hero (stack). Tablets get their own two-column layout further
   down (the phone stack leaves the right half empty on iPad widths). */
@media (max-width: 767px) {
	/* hero: hide the lead paragraph, bump the H1 a touch (34px keeps each phrase on its own line) */
	.ah-hero-lead { display: none !important; }
	/* Bulletproof: fluid size so the widest line ("Name your price.", 8.016px per
	   font-px) always fits the gutter with a 10px margin, capped at 34px on normal
	   phones. Scales down only on very narrow screens (< ~322px) so it never wraps. */
	.home .ah-hero-h1, .home .ah-hero-h1 h1, .home .ah-hero-h1 .elementor-heading-title { font-size: clamp(24px, calc((100vw - 50px) / 8.016), 34px) !important; line-height: 1.08 !important; }

	/* (2) reorder: heading → lead → collage → buttons */
	.e-con:has(> .ah-hero-h1) { display: contents; }
	.ah-hero-h1   { order: 1; }
	.ah-hero-lead { order: 2; }
	.ah-hero-collage { order: 3; }
	.elementor-widget-html:has(.ah-hero-btns) { order: 4; }

	/* (4) CTAs: full-width, stacked and bigger. After the reorder the buttons sit in
	   a row-flex context, so the widget must be forced to span the row (flex-basis
	   100%) — otherwise it shrinks to the buttons' content width. */
	.ah-panel-hero .elementor-widget-html:has(.ah-hero-btns) { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
	.ah-hero-btns { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: none; } /* full content width on phones so the CTAs match the cards below — on a large phone (iPhone Pro Max ~440px) a 360px cap left them ~40px short. The 768–1024 tablet breakpoint sets its own CTA width. */
	.ah-hero-btns .ah-btn,
	.ah-hero-btns .ah-btn-outline { width: 100% !important; min-width: 0 !important; min-height: 50px; font-size: 17px; padding: 0 22px; }

	/* (3) recompose the collage like the desktop hero, scaled to fit: tilted car
	   top-right with the avatar heads on it, the note overlapping top-left, the
	   "3 pros on it already!" label bottom-left, and the curved arrows back in.
	   Positions tuned live at 375px; capped to 360px so it stays tidy on bigger
	   phones. */
	.ah-hero-collage { position: relative !important; min-height: 240px !important; max-width: 360px; margin: 36px 0 48px !important; overflow: visible !important; } /* top 36 clears the H1 now the lead is hidden; bottom 48 + 8 button margin = 56px above the CTAs, matching the gap below. min-height 240 fits the bigger car + lowered label */
	.ah-hero-collage > .elementor-widget-html,
	.ah-hero-collage > .elementor-widget-html > .elementor-widget-container { display: block !important; }
	.ah-hero-collage .ah-postit,
	.ah-hero-collage .ah-polaroid,
	.ah-hero-collage .ah-avatars,
	.ah-hero-collage .ah-label,
	.ah-hero-collage .ah-arrowtop,
	.ah-hero-collage .ah-arrowup,
	.ah-hero-collage .ah-arrowdown { position: absolute !important; margin: 0 !important; }
	.ah-hero-collage .ah-arrowtop,
	.ah-hero-collage .ah-arrowdown,
	.ah-hero-collage .ah-label { display: block !important; } /* label + two arrows */
	.ah-hero-collage .ah-arrowup { display: none !important; }  /* drop the middle arrow to de-clutter */
	.ah-hero-collage .ah-avatars:has(~ .ah-avatars) { display: none !important; } /* hide the empty first stack */
	.ah-hero-collage .ah-postit  { left: 0 !important; right: auto !important; top: -16px !important; z-index: 6 !important; } /* up into the top space, over the car */
	.ah-hero-collage .ah-note    { width: 170px !important; padding: 12px 14px 11px !important; }
	.ah-hero-collage .ah-note-text   { font-size: 17px !important; line-height: 1.14 !important; }
	.ah-hero-collage .ah-note-reward { font-size: 17px !important; margin-top: 5px !important; }
	.ah-hero-collage .ah-polaroid { right: 10px !important; left: auto !important; top: -15px !important; width: 300px !important; transform: rotate(4deg) !important; z-index: 2 !important; }
	.ah-hero-collage .ah-avatars  { right: 38px !important; left: auto !important; top: 178px !important; transform: rotate(4deg) !important; z-index: 5 !important; }
	.ah-hero-collage .ah-avatar-stack { width: 32px !important; height: 32px !important; margin-left: -8px !important; } /* smaller pro heads */
	.ah-hero-collage .ah-label    { left: 150px !important; right: auto !important; top: 220px !important; width: 85px !important; transform: rotate(6deg) !important; }
	.ah-hero-collage .ah-arrowtop { right: 100px !important; left: auto !important; top: -30px !important; width: 50px !important; }
	.ah-hero-collage .ah-arrowdown{ left: 240px !important; right: auto !important; top: 230px !important; width: 42px !important; transform: rotate(-68deg) !important; }
}

/* ===== Custom tablet hero (768–1024: iPad Mini/Air and larger portrait tablets) =====
   The phone stack wastes the right half on tablets, and the desktop collage doesn't fit a
   narrow column. So: keep a TWO-column row — H1 + lead + CTAs on the left, the collage in
   its phone recomposition off to the right. Self-contained so the phone rules stay untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Header: give the logo + hamburger a 20px side gutter — the header has no padding at
	   these widths, so they otherwise sit hard against the screen edges. */
	.site-header-primary-section-left { padding-left: 20px !important; }
	.site-header-primary-section-right { padding-right: 20px !important; }

	/* Hero: force a consistent 20px side gutter. Elementor's panel padding is 20px at 768
	   but drops to 0 around 820+, leaving the hero content and CTAs hard against the edges. */
	.ah-panel-hero.ah-panel-hero { padding-left: 20px !important; padding-right: 20px !important; }

	.home .ah-hero-h1, .home .ah-hero-h1 h1, .home .ah-hero-h1 .elementor-heading-title { font-size: 32px !important; line-height: 1.1 !important; }

	/* Grid hero: H1 + lead on the left, collage on the right, and the two CTAs spanning the
	   FULL width below (grid lets the buttons break out of the left column). margin-top
	   drops the whole hero down a little from the header. */
	.ah-panel-hero .e-con-inner {
		display: grid !important;
		grid-template-columns: 1fr 360px;
		grid-template-areas: "h collage" "lead collage" "btns btns";
		column-gap: 28px !important; row-gap: 0 !important;
		align-items: start !important;
		margin-top: 22px !important;
	}
	.ah-panel-hero .e-con:has(> .ah-hero-h1) { display: contents !important; }
	.ah-hero-h1   { grid-area: h !important; }
	.ah-hero-lead { grid-area: lead !important; }

	/* CTAs: full-width row below both columns — Post a request | Find new customers, 50/50 */
	.ah-panel-hero .elementor-widget-html:has(.ah-hero-btns) { grid-area: btns !important; width: 100% !important; max-width: none !important; margin-top: 24px !important; }
	.ah-hero-btns { flex-direction: row !important; align-items: stretch !important; gap: 16px !important; width: 100% !important; max-width: none !important; }
	.ah-hero-btns .ah-btn, .ah-hero-btns .ah-btn-outline { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; min-height: 50px; }

	/* collage: same recomposition as the phone hero, placed in the right column */
	.ah-hero-collage { grid-area: collage !important; position: relative !important; align-self: start !important; justify-self: end !important; width: 360px !important; min-height: 240px !important; margin: 0 !important; overflow: visible !important; }
	.ah-hero-collage > .elementor-widget-html,
	.ah-hero-collage > .elementor-widget-html > .elementor-widget-container { display: block !important; }
	.ah-hero-collage .ah-postit,
	.ah-hero-collage .ah-polaroid,
	.ah-hero-collage .ah-avatars,
	.ah-hero-collage .ah-label,
	.ah-hero-collage .ah-arrowtop,
	.ah-hero-collage .ah-arrowup,
	.ah-hero-collage .ah-arrowdown { position: absolute !important; margin: 0 !important; }
	.ah-hero-collage .ah-arrowtop,
	.ah-hero-collage .ah-arrowdown,
	.ah-hero-collage .ah-label { display: block !important; }
	.ah-hero-collage .ah-arrowup { display: none !important; }
	.ah-hero-collage .ah-avatars:has(~ .ah-avatars) { display: none !important; }
	.ah-hero-collage .ah-postit  { left: 0 !important; right: auto !important; top: -16px !important; z-index: 6 !important; }
	.ah-hero-collage .ah-note    { width: 158px !important; padding: 12px 14px 11px !important; }
	.ah-hero-collage .ah-note-text   { font-size: 17px !important; line-height: 1.14 !important; }
	.ah-hero-collage .ah-note-reward { font-size: 17px !important; margin-top: 5px !important; }
	.ah-hero-collage .ah-polaroid { right: 30px !important; left: auto !important; top: 8px !important; width: 240px !important; transform: rotate(4deg) !important; z-index: 2 !important; }
	.ah-hero-collage .ah-avatars  { right: 38px !important; left: auto !important; top: 160px !important; transform: rotate(4deg) !important; z-index: 5 !important; }
	.ah-hero-collage .ah-avatar-stack { width: 32px !important; height: 32px !important; margin-left: -8px !important; }
	.ah-hero-collage .ah-label    { left: 95px !important; right: auto !important; top: 200px !important; width: 118px !important; transform: rotate(-3deg) !important; }
	.ah-hero-collage .ah-arrowtop { right: 85px !important; left: auto !important; top: -15px !important; width: 50px !important; }
	.ah-hero-collage .ah-arrowdown{ left: 219px !important; right: auto !important; top: 215px !important; width: 42px !important; }
}

/* ---- Sticky note (HTML, class-based) — use instead of a flattened image ----
   Drop an HTML widget with this markup into the collage (give the widget the
   .ah-postit position class):
     <div class="ah-note">
       <span class="ah-note-tape"></span>
       <p class="ah-note-text">I need a reliable second hand car under $15,000</p>
       <p class="ah-note-reward"><svg .../> $500 reward</p>
     </div>
   Editable text, crisp at any size, reward stays brand-green. */
.ah-note {
	width: 250px;
	background: linear-gradient(135deg, #ECE7FB, #E2DAF6);
	border-radius: 6px;
	padding: 20px 22px 16px;
	box-shadow: 0 14px 30px rgba(30, 20, 60, .20);
	transform: rotate(-4deg);
	position: relative;
	font-family: 'Caveat', cursive;
}
.ah-note p { margin: 0; } /* neutralise theme paragraph margins so spacing is exact */
.ah-note-tape {
	position: absolute; top: -12px; left: 50%;
	transform: translateX(-50%) rotate(-3deg);
	width: 92px; height: 26px;
	background: rgba(255, 255, 255, .5);
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 2px;
}
.ah-note-text { margin: 0; font-size: 27px; line-height: 1.16; font-weight: 600; color: #2b2b3a; text-align: center; }
.ah-note-reward { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 17px; line-height: 1.2; color: #1B9C5B; }
.ah-note-reward svg { flex: 0 0 auto; }
/* When used inside the collage, let the note size itself (ignore the img width rule). */
.ah-hero-collage .ah-postit { width: auto; }

/* ---- "How it works" section (class-based) ----
   One HTML widget below the hero: a .ah-hiw grid of 3 .ah-hiw-step cells, each
   with an icon <img> (Media Library), a title and a description. Responsive:
   3-up on desktop, stacked on mobile. */
.ah-hiw {
	max-width: 1120px; margin: 0 auto; padding: 0px;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
	font-family: 'Inter', system-ui, sans-serif;
}
/* Section heading spans the row so it aligns with the steps (reuses .ah-home-title). */
.ah-hiw-heading { grid-column: 1 / -1; margin: 0 0 0px; }
.ah-hiw-step { text-align: center; padding: 6px 20px; position: relative; }
.ah-hiw-step:first-of-type { padding-left: 0; }
.ah-hiw-step:last-of-type { padding-right: 0; }
.ah-hiw-step + .ah-hiw-step::before {
	content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: #ececf1;
}
.ah-hiw-icon { height: 84px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
/* Force size over theme/Elementor img rules (some apply width:100% to content images). */
.ah-hiw-icon img { height: 84px !important; width: auto !important; max-width: none !important; display: block; object-fit: contain; }
.ah-hiw-title { font-weight: 500; font-size: 18px; letter-spacing: -.2px; color: #0D1117; margin: 0 0 7px; }
.ah-hiw-desc { font-size: 14.5px; line-height: 1.5; color: #6a6f7b; margin: 0; }
/* Kill Astra's .entry-content p { margin-bottom: 1.6em } under the HIW copy on ALL breakpoints. */
.ah-hiw .ah-hiw-step .ah-hiw-desc { margin: 0 !important; }
@media (max-width: 820px) {
	/* Mobile "How it works": simple inline rows — icon on the LEFT (a little bigger),
	   heading + copy on the RIGHT. No discs, numbers or connector lines. Grid areas
	   let the icon span both text rows without a wrapper element. */
	.ah-hiw { grid-template-columns: 1fr; gap: 10px 0; padding-left: 20px; padding-right: 20px; }
	.ah-hiw-step + .ah-hiw-step::before { display: none; }
	.ah-hiw-step {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas: "icon title" "icon desc";
		column-gap: 18px;
		align-items: start;
		text-align: left;
		padding: 12px 0;
	}
	.ah-hiw .ah-hiw-step .ah-hiw-icon { grid-area: icon; margin: 0; height: 72px !important; }
	.ah-hiw .ah-hiw-step .ah-hiw-icon img { height: 72px !important; width: auto !important; }
	.ah-hiw .ah-hiw-step .ah-hiw-title { grid-area: title; margin: 0 0 4px !important; }
	/* !important + extra specificity so the theme's .entry-content p { margin-bottom: 1.6em }
	   can't reintroduce a gap under the step copy on phones (it beat the plain .ah-hiw-desc). */
	.ah-hiw .ah-hiw-step .ah-hiw-desc  { grid-area: desc; margin: 0 !important; }
}

/* Tablet (768–1024): How it works back to 3 columns (the ≤820 rule above stacks it into
   rows, which is only wanted on phones). Placed after that block so it wins on source order. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ah-hiw { grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; }
	.ah-hiw-step { display: block !important; text-align: center !important; padding: 6px 12px !important; }
	.ah-hiw-step:first-of-type { padding-left: 0 !important; }
	.ah-hiw-step:last-of-type { padding-right: 0 !important; }
	.ah-hiw-step + .ah-hiw-step::before { display: block !important; }
	.ah-hiw .ah-hiw-step .ah-hiw-icon { height: 72px !important; margin: 0 auto 14px !important; }
	.ah-hiw-title { margin: 0 0 6px !important; }
	.ah-hiw-desc  { margin: 0 !important; }
}

/* ============================================================================
   AskHole component system (v2) — CTA tiers + filter pills, site-wide.
   ----------------------------------------------------------------------------
   Approved design library. Two families:
     ACTIONS — three tiers at a shared 46px height + 12px radius:
       · Primary   solid purple      .ah-btn / .ah-cta / .ah-hero-cta / .ah-filter-btn
                   (+ .ah-btn-accept green, .ah-btn-danger red)
       · Secondary white + outline    .ah-btn-ghost / .ah-btn-outline
       · Tertiary  text link          .ah-btn-textdanger (danger) + brand text links
     FILTERS — capsule pills at 36px, a lighter separate tier:
       · .ah-chip                     default / hover tint / SELECTED soft-purple tint
       · .ah-home-sort-select         matched height + shape so the bar reads as one row
   States: default / hover / focus-visible / pressed / disabled (+ loading on primary).
   This section is intentionally ADDITIVE and loads last, so it normalises the
   older button rules above without editing them — delete this block to revert.
   Metadata chips (.ah-cat, .ah-claim-chip, .ah-badge) are a separate quiet tier,
   deliberately left untouched.
   ========================================================================== */
:root {
	--ah-purple:          #783FF2;
	--ah-purple-hover:    #6a2fe0;
	--ah-purple-press:    #5c27cf;
	--ah-purple-disabled: #cdbff6;
	--ah-tint:            #efe9fe;   /* selected pill fill  */
	--ah-tint-border:     #cbb8fb;
	--ah-tint-ink:        #5b28d6;
	--ah-tint-hover:      #f2eefe;   /* pill hover fill     */
	--ah-tint-hover-bd:   #d9ccfa;
	--ah-ink:             #0D1117;
	--ah-line:            #ececf1;
	--ah-line-hover:      #c2c6cf;
	--ah-green:           #1B9C5B;
	--ah-green-hover:     #15834c;
	--ah-danger:          #d92d20;
	--ah-danger-hover:    #b42318;
	--ah-ring:            0 0 0 3px rgba(120, 63, 242, .32);
	--ah-r-btn:           12px;
	--ah-h-cta:           50px; /* matches the post-request wizard CTAs (was 46px) */
	--ah-h-filter:        36px;
}

/* ---- Tier 1 · PRIMARY (solid purple, inline) --------------------------- */
.ah-btn, a.ah-btn,
.ah-hero-cta, a.ah-hero-cta,
.ah-filter-btn {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	min-height: var(--ah-h-cta) !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	color: #fff !important;
	background-color: var(--ah-purple) !important;
	border: none !important;
	border-radius: var(--ah-r-btn) !important;
	padding: 0 26px !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .14s ease, box-shadow .14s ease, transform .08s ease;
}
.ah-btn:hover, a.ah-btn:hover,
.ah-hero-cta:hover, a.ah-hero-cta:hover,
.ah-filter-btn:hover {
	background-color: var(--ah-purple-hover) !important; color: #fff !important; transform: none;
}
.ah-btn:focus-visible, .ah-hero-cta:focus-visible, .ah-filter-btn:focus-visible {
	outline: none; box-shadow: var(--ah-ring) !important;
}
.ah-btn:active, a.ah-btn:active,
.ah-hero-cta:active, .ah-filter-btn:active {
	background-color: var(--ah-purple-press) !important; transform: translateY(1px);
}
.ah-btn:disabled, .ah-btn[aria-disabled="true"],
.ah-filter-btn:disabled {
	background-color: var(--ah-purple-disabled) !important; cursor: not-allowed; transform: none; box-shadow: none !important;
}

/* Primary · block variant (detail-page main CTA): keep full width + prominence,
   just add the shared states. */
.ah-cta:focus-visible { outline: none; box-shadow: var(--ah-ring); }
.ah-cta:disabled, .ah-cta[aria-disabled="true"] {
	background: var(--ah-purple-disabled) !important; cursor: not-allowed; box-shadow: none;
}

/* Primary · semantic overrides (green accept / red danger) keep tier-1 geometry. */
.ah-btn.ah-btn-accept { background-color: var(--ah-green) !important; }
.ah-btn.ah-btn-accept:hover { background-color: var(--ah-green-hover) !important; }
.ah-btn.ah-btn-accept:active { background-color: #12703f !important; }
.ah-btn.ah-btn-danger { background-color: var(--ah-danger) !important; }
.ah-btn.ah-btn-danger:hover { background-color: var(--ah-danger-hover) !important; }
.ah-btn.ah-btn-danger:active { background-color: #9a1e15 !important; }

/* Primary · loading spinner (add class .is-loading to any tier-1 button). */
.ah-btn.is-loading, .ah-cta.is-loading, .ah-hero-cta.is-loading, .ah-filter-btn.is-loading {
	color: transparent !important; pointer-events: none; position: relative;
}
.ah-btn.is-loading::after, .ah-cta.is-loading::after,
.ah-hero-cta.is-loading::after, .ah-filter-btn.is-loading::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
	border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
	animation: ah-spin .7s linear infinite;
}

/* ---- Tier 2 · SECONDARY (white + outline) ------------------------------ */
.ah-btn-ghost,
.ah-btn-outline, a.ah-btn-outline {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	min-height: var(--ah-h-cta) !important; /* it's a CTA — hold the shared 50px height */
	box-sizing: border-box !important;      /* keep the 1.5px border INSIDE the 50px, so it matches
	                                           the borderless .ah-btn exactly (was rendering ~48px) */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	color: var(--ah-ink) !important;
	background: #fff !important;
	border: 1.5px solid var(--ah-line) !important;
	border-radius: var(--ah-r-btn) !important;
	padding: 0 26px !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease;
}
.ah-btn-ghost:hover, .ah-btn-outline:hover, a.ah-btn-outline:hover {
	border-color: var(--ah-line-hover) !important; color: var(--ah-ink) !important;
}
.ah-btn-ghost:focus-visible, .ah-btn-outline:focus-visible {
	outline: none; box-shadow: var(--ah-ring) !important; border-color: var(--ah-purple) !important;
}
.ah-btn-ghost:active, .ah-btn-outline:active { transform: translateY(1px); background: #fafafb !important; }
.ah-btn-ghost:disabled, .ah-btn-ghost[aria-disabled="true"],
.ah-btn-outline[aria-disabled="true"] {
	color: #b6bac2 !important; border-color: #eceef2 !important; cursor: not-allowed;
}

/* ---- Tier 3 · TERTIARY (text links) ------------------------------------ */
.ah-btn-textdanger {
	display: inline-flex; align-items: center; gap: 6px;
	background: none !important; border: none !important; padding: 4px 2px !important;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 15px;
	color: var(--ah-danger) !important; text-decoration: none !important; cursor: pointer;
}
.ah-btn-textdanger:hover { color: var(--ah-danger-hover) !important; text-decoration: underline !important; }
.ah-btn-textdanger:focus-visible { outline: none; box-shadow: var(--ah-ring); border-radius: 6px; }
/* Brand text links (tertiary tier): underline on hover + a shared focus ring. */
.ah-home-viewall-link:hover, .ah-dash-action:hover {
	text-decoration: underline !important;
}
.ah-dash-action:focus-visible, .ah-back:focus-visible, .ah-home-viewall-link:focus-visible {
	outline: none; box-shadow: var(--ah-ring); border-radius: 6px;
}

/* ---- Filters · capsule pills (36px, own tier) -------------------------- */
.ah-chip {
	display: inline-flex !important; align-items: center; gap: 6px;
	min-height: var(--ah-h-filter); padding: 0 16px !important;
	font-size: 13.5px !important;
}
/* SELECTED = soft purple tint (NOT the solid CTA purple) — this is a selection
   state, distinct from a primary action. */
.ah-chip.is-active,
.ah-chip.is-active:hover {
	background: var(--ah-tint) !important;
	border-color: var(--ah-tint-border) !important;
	color: var(--ah-tint-ink) !important;
}
.ah-chip:disabled, .ah-chip.is-disabled { opacity: .45; cursor: not-allowed; }

/* Sort control sits in the same filter tier: match pill height + capsule shape. */
.ah-home-sort-select {
	min-height: var(--ah-h-filter);
	border-radius: 10px !important;   /* discrete corners — not a capsule */
	border: 1.5px solid var(--ah-line) !important;
	padding: 0 14px !important;
}
.ah-home-sort-select:focus {
	outline: none; border-color: var(--ah-purple) !important; box-shadow: var(--ah-ring) !important;
}

/* Browse-page filter bar: unify the controls to the 46px action height + token
   focus ring so search, category, sort and the Filter button read as one row. */
.ah-filter-search, .ah-filter-select {
	min-height: var(--ah-h-cta);
	border: 1.5px solid var(--ah-line) !important;
	border-radius: var(--ah-r-btn) !important;
}
.ah-filter-search:focus, .ah-filter-select:focus {
	outline: none; border-color: var(--ah-purple) !important; box-shadow: var(--ah-ring) !important;
}

/* ============================================================================
   Site footer ([askhole_footer]) — brand + 3 link columns + bottom bar.
   Drop the shortcode into Astra's Footer Builder as a full-width HTML/block.
   ========================================================================== */
.ah-footer {
	font-family: 'Inter', system-ui, sans-serif;
	color: #0D1117;
	background: #fff;
	width: 100%;
	text-align: left;
	container-type: inline-size;   /* responsive to the footer's own width, not the viewport */
}
/* Override Astra's centered footer-widget alignment. */
.ah-footer .ah-footer-brand,
.ah-footer .ah-footer-col,
.ah-footer .ah-footer-h,
.ah-footer .ah-footer-list,
.ah-footer .ah-footer-list li,
.ah-footer .ah-footer-tag,
.ah-footer .ah-footer-copy { text-align: left !important; }
.ah-footer .ah-footer-social { justify-content: flex-start; }
.ah-footer-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 56px 24px 40px;
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
	gap: 40px;
}
.ah-footer-brand { max-width: 280px; }
.ah-footer-brand .askhole-logo { margin-bottom: 18px; }
/* Footer logo size: higher-specificity + !important so it beats the global
   .askhole-logo { font-size: 56px !important } "bigger logo" rule. */
.ah-footer .askhole-logo { font-size: 30px !important; filter: grayscale(1); }
.ah-footer-tag {
	font-size: 15px; line-height: 1.6; color: #4b5563; margin: 0 0 22px;
}
.ah-footer-social { display: flex; gap: 12px; }
.ah-social {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1.5px solid #e6e6ec; color: #3d424e; text-decoration: none !important;
	transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.ah-social:hover { border-color: var(--ah-purple, #783FF2); color: var(--ah-purple, #783FF2); background: #f7f4fe; }
.ah-social svg { width: 20px; height: 20px; display: block; }

.ah-footer-h {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 17px;
	letter-spacing: -.2px; color: #0D1117; margin: 0 0 18px;
}
.ah-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ah-footer-link {
	font-size: 15px; color: #5c6270; text-decoration: none !important;
	transition: color .14s ease;
}
.ah-footer-link:hover { color: var(--ah-purple, #783FF2); text-decoration: underline !important; }

.ah-footer-bottom {
	max-width: 1120px; margin: 0 auto; padding: 20px 24px 40px;
	border-top: 1px solid #ececf1;
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.ah-footer-copy { font-size: 14px; color: #6a6f7b; margin: 0; }
.ah-footer-legal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ah-footer-legal a { font-size: 14px; color: #5c6270; text-decoration: none !important; transition: color .14s ease; }
.ah-footer-legal a:hover { color: var(--ah-purple, #783FF2); text-decoration: underline !important; }
.ah-footer-legal-sep { color: #d4d7de; }
.ah-footer-made {
	display: inline-flex; align-items: center; gap: 8px; margin: 0;
	font-family: 'Caveat', cursive; font-weight: 700; font-size: 20px; color: #0D1117;
}
.ah-footer-made svg,
.ah-footer-made img { width: 22px !important; height: auto !important; max-width: none !important; display: block; }

/* Container queries: lay out against the footer's own width so it never collapses,
   even if it's placed in a narrower area. */
@container (max-width: 820px) {
	/* Brand spans the top; the three link groups (Explore / Community / Company) sit in
	   3 columns so the last one doesn't wrap to a new row on tablets. */
	.ah-footer-inner { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; padding: 44px 20px 32px; }
	.ah-footer-brand { grid-column: 1 / -1; max-width: none; }
}
@container (max-width: 520px) {
	.ah-footer-inner { grid-template-columns: 1fr; }
	.ah-footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 20px 32px; }
}
/* Fallback for older engines without container-query support: viewport-based. */
@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.ah-footer-inner { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
		.ah-footer-brand { grid-column: 1 / -1; max-width: none; }
	}
	@media (max-width: 560px) {
		.ah-footer-inner { grid-template-columns: 1fr; }
		.ah-footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
	}
}

/* --- Astra Footer Builder integration ---------------------------------------
   The [askhole_footer] shortcode gets dropped into ONE column of Astra's footer
   grid (~1/3 width). Free the row it lives in to a single full-width column so
   the footer uses the whole 1120px content width, and make the band white
   edge-to-edge. Scoped with :has() so only the footer row holding our component
   is affected — other footer rows (e.g. the copyright bar) are untouched. */
.ast-builder-footer-grid-columns:has(.ah-footer) {
	grid-template-columns: 1fr !important;
}
.ast-builder-footer-grid-columns:has(.ah-footer) .site-footer-section {
	width: 100% !important;
	max-width: none !important;
}
.site-footer:has(.ah-footer) { background: #fff !important; }

/* ============================================================================
   "Join the community" band ([askhole_join_band]) — supply-side recruitment.
   Drop into an Elementor Shortcode widget in a container after How it works.
   ========================================================================== */
.ah-band { font-family: 'Inter', system-ui, sans-serif; width: 100%; }
/* Band sits 16px below the previous section: kill the container's stacked top
   padding, then set the gap on the band itself (margin-top on .ah-band-inner). */
.e-con:has(.ah-band), .e-con-inner:has(.ah-band) { padding-top: 0 !important; }
/* Desktop: match the panels' 1120px width + centre. The band's Elementor container
   caps at 1140px and its widget wrappers stop the band at ~1053px, so it lands
   narrower + shifted right of the browse card. Force the container and the widget
   wrappers to a flush 1120px. */
@media (min-width: 769px) {
	.e-con-inner:has(.ah-band) {
		max-width: 1120px !important; padding-left: 0 !important; padding-right: 0 !important;
	}
	.elementor-widget:has(.ah-band),
	.elementor-widget:has(.ah-band) > .elementor-widget-container,
	.elementor-shortcode:has(.ah-band),
	.ah-band,
	.ah-band-inner { width: 100% !important; max-width: 1120px !important; }
}
.ah-band-inner {
	max-width: 1120px; margin: 16px auto 0;
	background: #fdf4e3; border: 1px solid #f3e6cd; border-radius: 24px;
	padding: 28px 40px 24px;
	display: flex; align-items: stretch; gap: 26px;
}
.ah-band-char {
	flex: 0 0 auto; width: 130px; align-self: stretch;
	background-repeat: no-repeat; background-position: left bottom; background-size: contain;
}
.ah-band-main { flex: 1; min-width: 0; }
.ah-band-head {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ah-band-copy { min-width: 0; flex: 0 1 auto; }
.ah-band-title {
	font-family: 'Inter', system-ui, sans-serif; font-weight: 800;
	font-size: clamp(22px, 2vw, 26px); line-height: 1.12; letter-spacing: -.5px;
	color: #0D1117; margin: 0 0 7px;
}
.ah-band-u { position: relative; white-space: nowrap; padding-bottom: .06em; }
.ah-band-u::after {
	content: ""; position: absolute; left: -.06em; bottom: -.16em;
	width: calc(100% + .12em); height: .34em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 40' preserveAspectRatio='none'%3E%3Cpath d='M9 28 C 34 11, 95 6, 152 9 C 180 10, 202 13, 214 17 C 203 21, 178 19, 150 19 C 92 19, 40 25, 9 28 Z' fill='%23F6C445'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	pointer-events: none;
}
.ah-band-sub { font-size: 16px; line-height: 1.5; color: #45607e; margin: 0; max-width: 40ch; }

.ah-band-cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ah-band-or { color: #8a8f98; font-size: 14px; font-weight: 600; }
.ah-band-btn2 {
	flex-direction: column !important; align-items: flex-start !important;
	line-height: 1.15; min-height: 52px; padding: 8px 22px !important; text-align: left !important;
}
.ah-band-btn2-top { font-weight: 800; font-size: 15px; color: #0D1117; }
.ah-band-btn2-sub { font-weight: 600; font-size: 12.5px; color: #6a6f7b; }

.ah-band-features { display: flex; align-items: center; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.ah-band-feat {
	display: flex; align-items: center; gap: 10px;
	font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #3d424e;
	position: relative; padding-right: 22px;
}
.ah-band-feat > span:last-child { max-width: 15ch; }   /* two-line labels so all three fit one row */
.ah-band-feat + .ah-band-feat::before {
	content: ""; position: absolute; left: -11px; top: 3px; bottom: 3px; width: 1px; background: #ecdcbf;
}
.ah-band-ico { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.ah-band-ico img { width: 38px !important; height: auto !important; max-width: none !important; display: block; }
.ah-band-legend {
	display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
	font-family: 'Caveat', cursive; font-weight: 700; font-size: 23px; color: #0D1117;
}
.ah-band-legend img { height: auto !important; max-width: none !important; display: block; }
.ah-band-lh { width: 26px !important; }
.ah-band-la { width: 46px !important; margin: 0 -2px; }

@media (max-width: 860px) {
	.ah-band-head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.ah-band-cta { width: 100%; }
	.ah-band-features { gap: 20px 26px; }
}
@media (max-width: 560px) {
	.ah-band-inner { flex-direction: column; padding: 24px 20px; }
	.ah-band-inner .ah-band-char { align-self: flex-start !important; width: 120px !important; height: 130px !important; }
	.ah-band-cta { flex-direction: column; align-items: stretch; }
	.ah-band-or { text-align: center; }
	.ah-band-btn2 { align-items: center !important; text-align: center !important; }
	.ah-band-legend { display: none; }
}
/* Band on tablet/mobile: fill the width the homepage gives it (the outer container supplies
   the 20px side gutters — see the gutter block further down), but keep the rounded corners on
   every view. (This used to go full-bleed with border-radius:0; the later gutter work moved the
   card off the screen edges, so square corners were just a leftover.) */
@media (max-width: 768px) {
	.e-con-inner:has(.ah-band) { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
	.ah-band-inner { max-width: none !important; }
}

/* ============================================================================
   BROWSE REQUESTS — category grid ([askhole_category_grid])
   Friendly icon grid of the request categories; each tile deep-links to the
   browse archive filtered by that category (?ah_cat={slug}).
   ============================================================================ */
.ah-catgrid {
	max-width: 1120px; margin: 0 auto; padding: 30px 0px;
	font-family: 'Inter', system-ui, sans-serif;
}
.ah-catgrid-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 26px; }
.ah-catgrid-headings { min-width: 0; }
.ah-catgrid-head .ah-catgrid-all { flex: 0 0 auto; margin-top: 4px; white-space: nowrap; }
.ah-catgrid-title { margin: 0 0 6px; }              /* weight/size inherited from .ah-home-title */
.ah-catgrid-sub { font-size: 15px; line-height: 1.5; color: #6a6f7b; margin: 0; }
@media (max-width: 560px) { .ah-catgrid-head { flex-direction: column; gap: 10px; } }
.ah-catgrid-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 26px 10px; }
.ah-catgrid-item {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
	text-decoration: none; padding: 14px 8px; border-radius: 16px;
	transition: background .15s ease, transform .15s ease;
}
.ah-catgrid-item:hover { background: #f6f4fe; transform: translateY(-2px); }
/* No link underline on the tiles (beats Astra's default link underline). */
.ah-catgrid-item, .ah-catgrid-item:hover, .ah-catgrid-item:focus,
.ah-catgrid-label { text-decoration: none !important; }
.ah-catgrid-ico { display: flex; align-items: center; justify-content: center; height: 94px; }
.ah-catgrid-ico img { width: 94px !important; height: 94px !important; max-width: none !important; object-fit: contain; display: block; }
.ah-catgrid-label { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #3d424e; max-width: 14ch; }
@media (max-width: 900px) { .ah-catgrid-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .ah-catgrid-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; } .ah-catgrid { padding: 32px 20px; } }

/* Tertiary text CTA — purple link with a trailing arrow (the brand's "third"
   CTA style, alongside .ah-btn primary + .ah-btn-outline secondary). */
.ah-link-cta {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700; font-size: 15px; color: #783FF2;
	text-decoration: none !important; cursor: pointer;
	transition: gap .15s ease, color .15s ease;
}
.ah-link-cta:hover { color: #6a2fe0; gap: 9px; text-decoration: none !important; }
.ah-link-cta svg { width: 17px; height: 17px; }

/* ============================================================================
   FEATURED REQUESTS ([askhole_featured_requests]) — curated 4-up card row,
   no sort, no filter pills. Cards reuse .ah-card.
   ============================================================================ */
/* Plain content wrapper. The panel (outline + width) comes from the section's
   Elementor container class (.ah-panel / .ah-panel-browse) — same mechanism as
   every other section, so widths always match. */
.ah-featured {
	max-width: 1120px; margin: 0 auto; padding: 30px 0px;
	font-family: 'Inter', system-ui, sans-serif;
}

/* ============================================================================
   CANONICAL SECTION PANEL — one class for a consistent outlined section.
   Add the class "ah-panel" to a section's Elementor CONTAINER (Boxed width,
   e.g. 1120). Values match the existing .ah-panel-browse exactly, so it's the
   single source of truth going forward — migrate the other sections' ad-hoc
   panel classes to this one over time.
   ============================================================================ */
.ah-panel {
	max-width: 1120px !important;
	margin: 16px auto 0 !important;
	box-sizing: border-box !important;
	background: #fff !important;
	border: 1px solid #f2f2f2 !important;
	border-radius: 24px !important;
	padding: 0px !important;
}
@media (max-width: 768px) {
	.ah-panel {
		max-width: none !important; margin: 0 !important;
		border: 0 !important; border-radius: 0 !important; padding: 20px 20px 28px !important;
	}
}
/* Neutralise Elementor's inner-container vertical padding so the panel controls
   top/bottom spacing at one layer (mirrors .ah-panel-browse > .e-con-inner). */
.ah-panel > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ---- Uniform inner side gutter (desktop) ----
   Every homepage section's content was sitting flush against the 1120 frame
   (hero, featured cards, category tiles all ~1px from the border) while only the
   community band carried a 40px gutter. Inset all section content by the same
   40px so nothing touches the frame and every section lines up down the page.
   Desktop only (≥1025). The 768–1024 tablet breakpoint runs its own layout with 20px
   gutters, so this must NOT bleed into it — otherwise tablet content gets 20+40=60px
   and the sections stop aligning. Below 768, panels go full-bleed with 20px padding. */
@media (min-width: 1025px) {
	.ah-panel-hero > .e-con-inner,
	.ah-hiw,
	.ah-featured,
	.ah-catgrid {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	/* How-it-works' Elementor container keeps a stray 10px side padding the other
	   panels don't — zero it so the 40px above lands hiw on the same line as the rest. */
	.ah-panel-hiw {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* The header row (logo + primary nav) is the one section left flush to the frame.
	   Inset it the same 40px so the logo lines up with the hero headline and the nav's
	   right edge matches the content. Higher specificity (.home …) than the Customizer's
	   padding-0 header rule, so it wins without touching the Customizer. */
	.home .site-primary-header-wrap {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}
.ah-featured-head { margin: 0 0 18px; }
.ah-featured-title { margin: 0; }               /* weight/size inherited from .ah-home-title */
.ah-featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1000px) { .ah-featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ah-featured-grid { grid-template-columns: 1fr; } }


/* ============================================================================
   LOGIN PAGE ([askhole_login]) — white brand + form card on a soft lavender
   page. Left: white brand panel (two-tone wordmark, headline, feature bullets,
   mascot). Right: a nested white card with the Ultimate Member login form +
   social buttons. Footer sits below the card. Playful purple doodles float on
   the page background. UM markup is restyled in place, scoped under .ah-login-um.
   ============================================================================ */
/* Full-page brand background on the login page — same media-library art + soft white overlay as
   the post-a-request / join-as-a-pro pages, painted on <body> (class added by
   askhole_login_body_class). This is what makes login "match the other two pages". */
/* !important because Ultimate Member ships an inline `body.um-page-login { background: initial }`
   that loads after our stylesheet and (at equal specificity) would otherwise blank the background. */
body.ah-loginbg {
	background-color: #fff !important;
	background-image: linear-gradient( rgba(255,255,255,.6), rgba(255,255,255,.6) ), url('/wp-content/uploads/2026/08/post-request-background.png') !important;
	background-position: center center, center center !important;
	background-size: cover, min(1120px, 100%) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-attachment: fixed, fixed !important;
}

.ah-login {
	position: relative;
	max-width: 480px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: 'Inter', system-ui, sans-serif;
	color: #0D1117;
}

/* The form sits in a white card — same treatment as the post-request / join-as-a-pro cards
   (18px radius, soft purple drop shadow). */
.ah-login-card {
	position: relative;
	z-index: 1;
	display: block;
	background: #fff;
	border: 1px solid rgba(120, 63, 242, .06);
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(60, 40, 120, .12);
	padding: 34px 34px 36px;
	box-sizing: border-box;
}

/* On mobile, match the Join-as-a-Pro / post-a-request pages: the doodle background and the
   card frame drop away, leaving a plain-white full-width form (their card goes transparent /
   no-shadow / no-radius on mobile too). */
@media (max-width: 767px) {
	body.ah-loginbg { background-image: none !important; background-color: #fff !important; }
	.ah-login { max-width: none; padding: 0 16px; }
	.ah-login-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
}
.ah-login-tag {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: -.5px;
	margin: 0 0 18px;
	color: #0D1117;
}
.ah-login-getit { position: relative; color: #783FF2; display: inline-block; }
.ah-login-swoosh { position: absolute; left: -2px; bottom: -8px; width: calc(100% + 6px); height: 12px; fill: #783FF2; display: block; }
.ah-login-sub { font-size: 15.5px; line-height: 1.6; color: #5c6270; margin: 0 0 28px; max-width: 26ch; }
.ah-login-feats { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 2; }
.ah-login-feat { display: flex; align-items: center; gap: 14px; }
.ah-login-feat-ico {
	flex: 0 0 auto;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	background: #efeafe;
	border-radius: 50%;
}
.ah-login-feat-ico svg { width: 22px; height: 22px; display: block; }
.ah-login-feat-tx { font-size: 15px; font-weight: 700; line-height: 1.3; color: #2b2540; }
.ah-login-mascot {
	position: absolute;
	left: -6px; bottom: -18px;
	width: 210px; height: 200px;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;
	pointer-events: none;
	z-index: 1;
}

/* ---- The form itself — no card. Sits directly on the page like the wizard
   sign-in step (matching layout, per Daniel). ---------------------------------- */
.ah-login-form {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	display: flex;
	flex-direction: column;
}
/* "Welcome back!" — matched to the wizard step heading (.ah-wiz-progress-title):
   same font, weight 800, 22px, letter-spacing, colour. No step counter or bar. */
.ah-login-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -.4px;
	margin: 0 0 8px;
	color: #0D1117;
}
/* Sub-line — matched to the wizard's .ah-gate-sub. */
.ah-login-hint { font-size: 15px; line-height: 1.55; color: #5c6270; margin: 0 0 20px; }

/* Ultimate Member form overrides — scoped so they never leak to other UM forms. */
.ah-login-um { margin: 0; }
.ah-login-um .um { margin: 0 !important; max-width: none !important; }
.ah-login-um .um-form { padding: 0 !important; }
.ah-login-um .um-row { margin-bottom: 18px !important; padding: 0 !important; }
.ah-login-um .um-field { padding: 0 !important; }
.ah-login-um .um-field-label label,
.ah-login-um .um-field label {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #2b2540 !important;
	margin: 0 0 7px !important;
}
/* /login/ page only (never the gate): adopt the post-request wizard gate's tidy
   field rhythm — ~18px between fields, ~6px label→input — so the two layouts read
   the same on desktop and mobile, while keeping the login page's own label type
   (13.5px/700). Scoped under .ah-login so the shared .ah-login-um gate styling is
   untouched (the gate wrappers carry .ah-login-um but never sit under .ah-login). */
.ah-login .ah-login-um .um-row { margin-bottom: 0 !important; }
.ah-login .ah-login-um .um-field { margin: 0 0 14px !important; }
.ah-login .ah-login-um .um-field-label { margin: 0 0 3px !important; padding: 0 !important; }
.ah-login .ah-login-um .um-field-label label,
.ah-login .ah-login-um .um-field label { margin: 0 !important; }
/* Inputs at the canonical 50px. UM's stylesheet loads AFTER the plugin, so the
   full ancestor chain is needed to out-specify UM's own (shorter) input height. */
.ah-login .ah-login-um .um-form input[type=text],
.ah-login .ah-login-um .um-form input[type=email],
.ah-login .ah-login-um .um-form input[type=password],
.ah-login .ah-login-um .um-field-area input[type=text],
.ah-login .ah-login-um .um-field-area input[type=email],
.ah-login .ah-login-um .um-field-area input[type=password],
.ah-login .ah-login-um .um-field-area input {
	width: 100% !important;
	height: 50px !important;
	min-height: 50px !important;
	box-sizing: border-box !important;
	padding: 0 14px !important;
	border: 1px solid #e2dff0 !important;
	border-radius: 12px !important;
	background: #fff !important;
	font-size: 15px !important;
	line-height: normal !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	color: #0D1117 !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ah-login .ah-login-um .um-form input:focus,
.ah-login .ah-login-um .um-field-area input:focus {
	border-color: #783FF2 !important;
	box-shadow: 0 0 0 3px rgba(120, 63, 242, .14) !important;
	outline: none !important;
}
/* Post-request gate: reuse the login-page field styling for the embedded UM forms
   (the .ah-login-um class on the gate wrappers pulls in the labels/buttons/links;
   these input rules need their own selector since the login ones require .ah-login). */
.ah-gate-um .um-form input[type=text],
.ah-gate-um .um-form input[type=email],
.ah-gate-um .um-form input[type=password],
.ah-gate-um .um-field-area input[type=text],
.ah-gate-um .um-field-area input[type=email],
.ah-gate-um .um-field-area input[type=password],
.ah-gate-um .um-field-area input {
	width: 100% !important;
	height: 50px !important;
	min-height: 50px !important;
	box-sizing: border-box !important;
	padding: 0 14px !important;
	border: 1px solid #e2dff0 !important;
	border-radius: 12px !important;
	background: #fff !important;
	font-size: 15px !important;
	line-height: normal !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	color: #0D1117 !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ah-gate-um .um-form input:focus,
.ah-gate-um .um-field-area input:focus {
	border-color: #783FF2 !important;
	box-shadow: 0 0 0 3px rgba(120, 63, 242, .14) !important;
	outline: none !important;
}
.ah-gate-um .um-form textarea {
	border: 1px solid #e2dff0 !important;
	border-radius: 12px !important;
	font-family: 'Inter', system-ui, sans-serif !important;
}
/* UM's field icon (mail/lock) + password-eye toggle sit inside the field area. */
.ah-login-um .um-field-area { position: relative !important; }
.ah-login-um .um-field-area i { color: #9a93b8 !important; }
/* "Remember me" + forgot-password row. */
.ah-login-um .um-field-checkbox-option,
.ah-login-um .um-field-checkbox { font-size: 14px !important; color: #4b4157 !important; }
.ah-login-um .um-field-checkbox-option i.um-icon-android-checkbox-outline-blank,
.ah-login-um span.um-field-checkbox-state i { color: #cfc8ea !important; }
.ah-login-um .um-field-checkbox.active span.um-field-checkbox-state i { color: #783FF2 !important; }
.ah-login-um a { color: #783FF2 !important; text-decoration: none !important; font-weight: 600 !important; }
.ah-login-um a:hover { text-decoration: underline !important; }
/* The submit button — padding-based height so the text is reliably centred
   (line-height centring on an <input> renders unevenly across browsers). */
.ah-login-um .um-button,
.ah-login-um input[type=submit].um-button {
	display: block !important;
	width: 100% !important;
	height: 50px !important;                     /* == canonical control height, matches the inputs */
	padding: 0 20px !important;
	background: #783FF2 !important;              /* match global .ah-btn CTA */
	border: 0 !important;
	border-radius: 12px !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: normal !important;             /* native centring — no line-height offset */
	text-align: center !important;
	color: #fff !important;
	box-shadow: none !important;
	margin: 0 !important;
	transition: background .15s ease, transform .15s ease;
}
/* Hover lift only on real pointers — on touch, a hover transform on the first tap shifts the
   button and can swallow the tap (part of the "needs a second tap" bug). */
@media (hover: hover) and (pointer: fine) {
	.ah-login-um .um-button:hover { background: #6a2fe0 !important; transform: translateY(-1px); }
}

/* Standalone /login/ page — the same shrink/freeze protection the gate buttons get (see the
   .ah-gate-um block below). The login submit sits in .um-center, and UM's own
   `.um-center .um-button { display:inline-block; width:auto }` plus UM disabling the button during
   its POST were shrinking it on click. On desktop it snapped back; on mobile the shrink shifted the
   tap target, so the first tap missed and a second was needed. Pin it full-width in every state
   (.um-center variant at 0,4,0 beats UM's 0,2,0). */
.ah-login .ah-login-um .um-center .um-button { display: block !important; width: 100% !important; }
.ah-login .ah-login-um .um-button:disabled,
.ah-login .ah-login-um .um-button.ah-um-submitting {
	width: 100% !important;
	background: #783FF2 !important;
	color: #fff !important;
	opacity: .9 !important;
	cursor: wait !important;
	transform: none !important;
	box-shadow: none !important;
}

/* --- UM form 89 layout cleanup: keep-me-signed-in row + button grouping --- */
/* Hide UM's spam honeypot so it never adds a stray gap. */
.ah-login-um .um_request_name,
.ah-login-um input[name="um_request_name"] { display: none !important; }
/* UM wraps the checkbox + button together in .um-col-alt with float clears —
   flatten it to a clean vertical stack. */
.ah-login-um .um-col-alt { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.ah-login-um .um-col-alt > .um-clear { display: none !important; }
.ah-login-um .um-center { text-align: center !important; margin: 0 !important; float: none !important; width: 100% !important; }
/* "Keep me signed in" checkbox — sits just above the button, tidy spacing. */
.ah-login-um .um-field-c { margin: 2px 0 16px !important; padding: 0 !important; float: none !important; width: 100% !important; }
.ah-login-um .um-field-c .um-field-area { margin: 0 !important; }
.ah-login-um label.um-field-checkbox {
	display: flex !important; align-items: center; gap: 9px;
	font-size: 14px !important; font-weight: 500 !important; color: #4b4157 !important; margin: 0 !important;
}
/* "Forgot your password?" link row below the button. */
.ah-login-um .um-col-alt-b { margin: 12px 0 0 !important; text-align: center; }
.ah-login-um .um-link-alt { font-size: 14px !important; }

/* Keep-me-signed-in: UM absolutely-positions the box (.um-field-checkbox-state)
   at the left and its flex layout shoves the label text to the far right. Drop
   the flex + absolute and let the box and text flow INLINE, which always packs
   them together on the left. Full ancestor chain so it beats UM's later CSS. */
.ah-login .ah-login-um .um-field-c,
.ah-login .ah-login-um .um-field-c .um-field-area {
	display: block !important; text-align: left !important; float: none !important;
}
.ah-login .ah-login-um .um-field-c .um-field-checkbox {
	display: block !important; position: relative !important; text-align: left !important;
	width: auto !important; max-width: none !important; float: none !important;
	margin: 0 !important; padding: 0 !important; line-height: 1.3 !important;
}
/* Hide UM's real checkbox so it doesn't take an inline slot (the state span is
   the visible box). */
.ah-login .ah-login-um .um-field-c .um-field-checkbox input {
	position: absolute !important; opacity: 0 !important;
	width: 1px !important; height: 1px !important; margin: 0 !important;
}
.ah-login .ah-login-um .um-field-c .um-field-checkbox .um-field-checkbox-state {
	position: static !important; float: none !important; display: inline-block !important;
	vertical-align: middle !important; width: auto !important;
	margin: 0 9px 0 0 !important; padding: 0 !important;
}
.ah-login .ah-login-um .um-field-c .um-field-checkbox .um-field-checkbox-option {
	position: static !important; float: none !important; display: inline !important;
	vertical-align: middle !important; width: auto !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important; text-align: left !important; white-space: nowrap !important;
	font-size: 14px !important; font-weight: 500 !important; color: #4b4157 !important;
}

/* Gate: the same keep-me-signed-in flatten as the login page (the gate has no
   .ah-login ancestor, so it needs its own copy). Box + text pack together, left. */
.ah-gate-um .um-field-c,
.ah-gate-um .um-field-c .um-field-area {
	display: block !important; text-align: left !important; float: none !important;
}
.ah-gate-um .um-field-c .um-field-checkbox {
	display: block !important; position: relative !important; text-align: left !important;
	width: auto !important; max-width: none !important; float: none !important;
	margin: 0 !important; padding: 0 !important; line-height: 1.3 !important;
}
.ah-gate-um .um-field-c .um-field-checkbox input {
	position: absolute !important; opacity: 0 !important;
	width: 1px !important; height: 1px !important; margin: 0 !important;
}
.ah-gate-um .um-field-c .um-field-checkbox .um-field-checkbox-state {
	position: static !important; float: none !important; display: inline-block !important;
	vertical-align: middle !important; width: auto !important;
	margin: 0 9px 0 0 !important; padding: 0 !important;
}
.ah-gate-um .um-field-c .um-field-checkbox .um-field-checkbox-option {
	position: static !important; float: none !important; display: inline !important;
	vertical-align: middle !important; width: auto !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important; text-align: left !important; white-space: nowrap !important;
	font-size: 14px !important; font-weight: 500 !important; color: #4b4157 !important;
}

/* ---- Wizard "create account" step: force the Terms consent checkbox fully LEFT + full-width.
   Scoped to .ah-gate-um-register with .um in the chain so it out-specifies both the generic
   consent CSS and the .ah-login-um / .um-center centring that the shared gate styling applies. ---- */
.ah-gate-um-register .um [data-key="askhole_terms_agree"],
.ah-gate-um-register .um .ah-consent {
	display: block !important; width: 100% !important; max-width: none !important;
	float: none !important; margin: 16px 0 28px !important; padding: 0 !important; text-align: left !important;
}
.ah-gate-um-register .um [data-key="askhole_terms_agree"] .um-field-area {
	display: block !important; width: 100% !important; max-width: none !important;
	float: none !important; margin: 0 !important; text-align: left !important;
}
.ah-gate-um-register .um [data-key="askhole_terms_agree"] .um-field-checkbox {
	display: flex !important; align-items: flex-start !important; justify-content: flex-start !important;
	gap: 10px !important; width: 100% !important; max-width: none !important;
	float: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important;
}
.ah-gate-um-register .um [data-key="askhole_terms_agree"] .um-field-checkbox-state {
	position: static !important; float: none !important; flex: 0 0 auto !important; margin: 1px 0 0 0 !important;
}
.ah-gate-um-register .um [data-key="askhole_terms_agree"] .um-field-checkbox-option {
	flex: 1 1 auto !important; display: inline !important; width: auto !important; max-width: none !important;
	float: none !important; margin: 0 !important; padding: 0 !important;
	text-align: left !important; white-space: normal !important; line-height: 1.5 !important;
}
/* ROOT CAUSE: the real <input> is rendered ~263px wide (a stray half-field width) and, as a flex
   item, shoves the visible box + label to the right — reading as "centred". UM's .um-field-checkbox-state
   span is the visible box, so pull the real input out of flow. Generic + wizard-scoped. */
.um [data-key="askhole_terms_agree"] .um-field-checkbox input,
.ah-gate-um-register .um [data-key="askhole_terms_agree"] .um-field-checkbox input {
	position: absolute !important; top: 0 !important; left: 0 !important;
	width: 18px !important; height: 18px !important; min-width: 0 !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important; float: none !important; flex: 0 0 auto !important;
	opacity: 0 !important;
}

/* Secondary UM buttons render as <a> (e.g. the "Login" button on the register form).
   line-height:normal leaves their text at the top of the 50px box, while the <input>
   submit centres natively — flex-centre the anchors so both read the same. */
.ah-login-um a.um-button {
	display: flex !important; align-items: center !important; justify-content: center !important;
}
/* Button anchors are CTAs, not links — never underline (overrides .ah-login-um a:hover). */
.ah-login-um a.um-button,
.ah-login-um a.um-button:hover,
.ah-login-um a.um-button:focus {
	text-decoration: none !important;
}
/* Register form: drop UM's secondary "Login" button — the "Already have an account?
   Log in" toggle beneath the form already covers switching to login. */
.ah-gate-um-register a.um-button { display: none !important; }

/* UM lays the register submit in a floated HALF-WIDTH column (.um-left.um-half; the other
   half held that secondary switch button we just hid). Left as-is the Register button renders
   at ~half width and collapses further when UM re-renders with validation errors. Flatten the
   two-column button row so Register is full width like the Login button, and drop the now-empty
   sibling half column. */
.ah-gate-um .um-col-alt .um-left,
.ah-gate-um .um-col-alt .um-right,
.ah-gate-um .um-half {
	width: 100% !important; float: none !important; margin: 0 !important; clear: both !important;
}
.ah-gate-um-register .um-col-alt .um-right { display: none !important; }

/* Our JS flips the gate submit buttons to type="button" (to neutralise UM's submit-only guard).
   The old full-width rule keyed off input[type=submit], so target the button by CLASS here to
   keep it full-width block regardless of type. The .um-center variant (0,3,0) is needed to beat
   UM's own `.um-center .um-button { display:inline-block; width:auto }` (0,2,0) — the login button
   sits in .um-center. Scoped to .ah-gate-um so the standalone /login/ page is untouched. */
.ah-gate-um .um-button,
.ah-gate-um .um-center .um-button { display: block !important; width: 100% !important; }

/* While a gate button is submitting — either our register loading state (.ah-um-submitting)
   or UM disabling it during its own request — keep it full width + on-brand so it never
   appears to shrink or grey out (freeze) during the page POST. */
.ah-gate-um .um-button:disabled,
.ah-gate-um .um-button.ah-um-submitting {
	width: 100% !important;
	background: #783FF2 !important;
	color: #fff !important;
	opacity: .9 !important;
	cursor: wait !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Tighten the dead space under "Forgot your password?" before the "or" divider. */
.ah-login-um .um { margin-bottom: 0 !important; }

/* ---- "or" divider --------------------------------------------------------- */
.ah-login-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: #5C6270; font-size: 13.5px; }
.ah-login-or::before, .ah-login-or::after { content: ""; flex: 1; height: 1px; background: #ececf4; }

/* ---- Social buttons (placeholders) --------------------------------------- */
.ah-login-social {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	height: 50px;
	border: 1px solid #e6e2f1;
	border-radius: 12px;
	background: #fff;
	font-size: 15px; font-weight: 600; color: #2b2540 !important;
	text-decoration: none !important;
	margin-bottom: 14px;
	transition: background .15s ease, border-color .15s ease;
}
.ah-login-social:hover { background: #f7f5ff; border-color: #d3cbef; }
.ah-login-social svg { flex: 0 0 auto; }

/* "Don't have an account? Sign up" — sits directly under the form's forgot-password
   link (above the "or" divider), matching the wizard gate's switch-line placement. */
.ah-login-signup { text-align: center; font-size: 14.5px; color: #6a6f7b; margin: 14px 0 0; }
.ah-login-signup a { color: #783FF2; font-weight: 700; text-decoration: none; }
.ah-login-signup a:hover { text-decoration: underline; }

/* ---- Footer note (below the card) ---------------------------------------- */
.ah-login-foot { position: relative; z-index: 1; text-align: center; margin: 22px auto 4px; }
.ah-login-secure {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	font-size: 14px; color: #5c6270; margin: 0 0 14px; text-align: left; line-height: 1.4;
}
.ah-login-secure svg { flex: 0 0 auto; }
.ah-login-copy { font-size: 12.5px; color: #8a8f9b; margin: 0; }
.ah-login-copy a { color: #783FF2; text-decoration: none; }

/* Password reset (raw Ultimate Member form) — bring it into the AskHole account-form language: rounded
   fields, purple rounded button, and a LEFT-aligned header + description above the card, matching the
   register/account form pages. Scoped to UM's own body class; !important because UM's stylesheet loads
   after ours. The header column shares the card's 440px centred column so its left edge lines up. */
body.um-page-password-reset .entry-header,
body.um-page-password-reset .entry-title,
body.um-page-password-reset .ast-single-entry-title {
	text-align: left; max-width: 440px; margin-left: auto; margin-right: auto;
}

/* First-time activation ("Create your password"): hide the page's "Password Reset" title and show
   the activation heading/intro instead. A genuine reset (no .ah-setpw) keeps the title above. */
body.um-page-password-reset.ah-setpw .entry-title,
body.um-page-password-reset.ah-setpw .ast-single-entry-title { display: none !important; }
.ah-setpw-intro { max-width: 440px; margin: 0 auto 4px; text-align: left; }
.ah-setpw-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 4vw, 34px);
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--ah-ink, #0D1117);
	margin: 0 0 8px;
}
.ah-setpw-sub { color: #6a6f7b; font-size: 16px; line-height: 1.5; margin: 0; }
/* The genuine reset page's instruction ("To reset your password…"), hoisted out of the card (small
   scoped script) to sit under the title, left-aligned in the same column as the card. */
body.um-page-password-reset .ah-pwreset-desc {
	max-width: 440px; margin: 0 auto 4px; text-align: left;
	color: #6a6f7b; font-size: 16px; line-height: 1.5;
}
body.um-page-password-reset .ah-pwreset-desc p { margin: 0; }
body.um-page-password-reset .um.um-password {
	max-width: 440px; margin: 32px auto; background: #fff;
	border: 1px solid var(--ah-line, #ececf1); border-radius: 18px;
	padding: 30px 28px; box-shadow: 0 8px 30px rgba(13, 17, 23, .06);
	box-sizing: border-box;
}
/* Match the register/account input language. IMPORTANT: include input[type="password"] — the
   "New / Confirm Password" fields are password inputs, and the old rule (text/email only) left
   them on UM's default squared style. Fixed 50px height so fields + CTA line up. */
body.um-page-password-reset .um.um-password input[type="text"],
body.um-page-password-reset .um.um-password input[type="email"],
body.um-page-password-reset .um.um-password input[type="password"] {
	height: 50px !important; box-sizing: border-box !important;
	border-radius: 12px !important; border: 1.5px solid #dcdce4 !important;
	padding: 0 14px !important; font-size: 16px !important; line-height: normal !important;
	color: #0D1117 !important; background: #fff !important; box-shadow: none !important;
}
body.um-page-password-reset .um.um-password input:focus {
	outline: none !important; border-color: #783FF2 !important;
	box-shadow: 0 0 0 3px rgba(120, 63, 242, .12) !important;
}
/* CTA: standard AskHole button height (50px), FULL-WIDTH on desktop and mobile alike. UM floats the
   submit inside .um-col-alt / .um-left, so those wrappers are freed to full width too, not just the
   button itself. */
body.um-page-password-reset .um.um-password .um-col-alt,
body.um-page-password-reset .um.um-password .um-left,
body.um-page-password-reset .um.um-password .um-half { float: none !important; width: 100% !important; }
body.um-page-password-reset .um.um-password input[type="submit"],
body.um-page-password-reset .um.um-password .um-button {
	background: var(--ah-purple, #783FF2) !important; color: #fff !important; border: none !important;
	border-radius: 12px !important; font-weight: 700 !important; font-size: 16px !important;
	height: 50px !important; line-height: 50px !important; padding: 0 28px !important;
	width: 100% !important; display: block !important; box-sizing: border-box !important;
	box-shadow: none !important; cursor: pointer;
}
body.um-page-password-reset .um.um-password input[type="submit"]:hover,
body.um-page-password-reset .um.um-password .um-button:hover { background: #6a2fe0 !important; }

/* Mobile (<768px): drop the floating card so the form sits flat on the page like the register,
   account and login forms. 20px side gutters on the card AND the header column (Astra's container
   padding is zeroed site-wide on this install), so title/description/fields all share one left edge. */
@media (max-width: 768px) {
	body.um-page-password-reset .um.um-password {
		max-width: none !important; margin: 8px auto 32px !important;
		background: transparent !important; border: 0 !important; border-radius: 0 !important;
		padding: 0 20px !important; box-shadow: none !important;
	}
	body.um-page-password-reset .entry-header,
	body.um-page-password-reset .entry-title,
	body.um-page-password-reset .ast-single-entry-title,
	.ah-setpw-intro,
	body.um-page-password-reset .ah-pwreset-desc {
		max-width: none !important; padding-left: 20px !important; padding-right: 20px !important;
	}
}
.ah-login-copy a:hover { text-decoration: underline; }

/* =========================================================================
   #15 — Account pages (Ultimate Member) composition.
   The account/change-password page title falls back to Astra's .entry-title (32px/600 — lighter and
   smaller than the branded page titles); bring it in line with .ah-doc-title / .ah-detail-title, and
   give labels a little breathing room. Scoped to body.um-page so no other Astra title moves.
   NOTE: the form's max-width lives with the rest of the account-form styling in askhole-form.css
   (.um.um-account, v0.48.1) — that sheet loads after this one, so setting the width here would lose
   the cascade. It's tightened there (700px → 560px), not duplicated here.
   ========================================================================= */
body.um-page .entry-title {
	font-size: 34px !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
	line-height: 1.15 !important;
	color: var(--ah-ink, #0D1117) !important;
}
.um-account .um-field-label { margin: 0 0 6px !important; }

/* ---- Responsive: no card, so just tighten the page gutters --------------- */
@media (max-width: 840px) {
	.ah-login { padding: 30px 20px 20px; }
	.ah-login-card { padding: 0; }
	.ah-login-form { padding: 0; }
}
@media (max-width: 480px) {
	.ah-login { margin: 16px auto; }
}

/* ===== Consistent mobile side gutters =====
   Every homepage section matches the Featured section's 20px content inset.
   High-specificity so it wins over the Customizer CSS + Elementor container
   padding. Verified live at 375px (Featured = reference, 20/20). */
@media (max-width: 1024px) {
	/* How it works: outer container → 20, inner .ah-hiw → 0 (was 10 + 20 = 30) */
	.home .ah-panel-hiw.e-con-full { padding-left: 20px !important; padding-right: 20px !important; }
	.home .ah-panel-hiw .ah-hiw { padding-left: 0 !important; padding-right: 0 !important; }
	/* Category grid: drop the doubled inner padding (outer already gives 20; was 40) */
	.home .ah-catgrid.ah-catgrid { padding-left: 0 !important; padding-right: 0 !important; }
	/* Band: outer container → 20 so the card starts at 20 (was 10) */
	.home .e-con:has(> .e-con-inner .ah-band) { padding-left: 20px !important; padding-right: 20px !important; }
	.home .e-con-inner:has(.ah-band) { padding-left: 0 !important; padding-right: 0 !important; }
	/* Featured + Browse panels: Elementor's panel padding is 20 at ≤768 but drops to 0
	   around 820+, leaving cards/tiles edge-to-edge — pin them explicitly. */
	.home .ah-panel:has(.ah-featured) { padding-left: 20px !important; padding-right: 20px !important; }
	.home .ah-panel-browse { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ===== Consistent section vertical rhythm (mobile) =====
   Every homepage section gets 28px top/bottom → a uniform ~56px between sections.
   All vertical spacing lives on the section panels; each section's inner content
   vertical padding is zeroed so it doesn't double up. Was 0 / 76 / 56 / 100+ —
   verified uniform at 56px live at 375px. */
@media (max-width: 1024px) {
	/* Doubled panel classes → specificity (0,3,0) so these beat the padding:0
	   !important reset that Elementor/Customizer put on the .e-con-full containers
	   (same trick the gutter block above uses). At (0,2,0) these lost the tie and
	   hiw/browse collapsed to 0 padding → 28px gaps. */
	.home .ah-panel-hero.ah-panel-hero { padding-bottom: 28px !important; }
	.home .ah-panel-hero .e-con-inner { padding-bottom: 0 !important; } /* kill the row's stray 20px */
	.home .ah-panel-hiw.ah-panel-hiw { padding-top: 28px !important; padding-bottom: 28px !important; }
	.home .ah-panel-hiw .ah-hiw { padding-top: 0 !important; padding-bottom: 0 !important; }
	.home .ah-panel.ah-panel { padding-top: 28px !important; padding-bottom: 28px !important; }
	.home .ah-featured { padding-top: 0 !important; padding-bottom: 0 !important; }
	.home .ah-panel-browse.ah-panel-browse { padding-top: 28px !important; padding-bottom: 28px !important; }
	.home .ah-catgrid.ah-catgrid { padding-top: 0 !important; padding-bottom: 0 !important; }
	.home .elementor > .e-con:has(.ah-band) { padding-top: 28px !important; padding-bottom: 8px !important; }
	.home .ah-band-inner { margin-top: 0 !important; margin-bottom: 0 !important; }
	/* Band → footer: the footer's own 44px top padding + inter-section space made
	   this gap ~102px; trim it so it matches the 56px rhythm (home only). */
	.home .ah-footer-inner { padding-top: 18px !important; }
}

/* ============================================================================
   BROWSE REQUESTS — clean redesign (backlog item 10)
   Toolbar + left filter sidebar (→ mobile bottom-sheet) + grid/list cards +
   numbered pager + FAB. Reuses the v2 CTA tokens + the .ah-card-avatars stack.
   ============================================================================ */
.ah-browse { max-width: 1140px; margin: 0 auto; padding: 8px 20px 64px; font-family: 'Inter', system-ui, sans-serif; }
.ah-browse * { box-sizing: border-box; }
/* Match the dashboard block: 1140px wide with the content filling it edge-to-edge. On wide screens
   (where the centred block already has margin outside it) drop the 20px side padding so the content
   spans the full 1140 like the dashboard, instead of sitting inset. The gutter is kept below this so
   content never touches the viewport edge on narrower screens. */
@media (min-width: 1181px) { .ah-browse { padding-left: 0; padding-right: 0; } }

/* Header: title + view toggle */
.ah-browse-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 8px 0 22px; }
.ah-browse-h1 { font-size: 40px; font-weight: 800; letter-spacing: -.8px; color: var(--ah-ink); margin: 0 0 6px; }
.ah-browse-sub { font-size: 16px; color: #6a6f7b; margin: 0; }
.ah-viewtoggle { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--ah-line); border-radius: 12px; overflow: hidden; background: #fff; }
.ah-vt-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 42px; border: 0; background: #fff; color: #9aa0ac; cursor: pointer; }
.ah-vt-btn + .ah-vt-btn { border-left: 1px solid var(--ah-line); }
.ah-vt-btn .ah-ic { width: 20px; height: 20px; }
.ah-vt-btn:not(.is-active):hover { background: #9d78f0; color: #fff; } /* light purple + white icon */
.ah-vt-btn.is-active { background: var(--ah-purple); color: #fff; }

/* Toolbar */
.ah-browse-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.ah-search { position: relative; flex: 1 1 260px; min-width: 200px; }
.ah-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9aa0ac; display: flex; }
.ah-search-ico .ah-ic { width: 18px; height: 18px; }
.ah-search-in { width: 100%; height: 48px; border: 1px solid var(--ah-line); border-radius: var(--ah-r-btn); padding: 0 16px 0 42px; font: inherit; font-size: 15px; color: var(--ah-ink); background: #fff; box-sizing: border-box; }
.ah-search-in:focus { outline: none; border-color: var(--ah-purple); box-shadow: var(--ah-ring); }
.ah-tb-select { height: 48px; box-sizing: border-box; border: 1px solid var(--ah-line); border-radius: var(--ah-r-btn); padding: 0 38px 0 14px; font: inherit; font-size: 15px; color: var(--ah-ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236a6f7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ah-tb-select:focus { outline: none; border-color: var(--ah-purple); box-shadow: var(--ah-ring); }
.ah-tb-sort { flex: 0 1 150px; }
.ah-filter-toggle { display: inline-flex; align-items: center; gap: 8px; height: 48px; box-sizing: border-box; padding: 0 18px; border: 1.5px solid var(--ah-purple); border-radius: var(--ah-r-btn); background: #fff; color: var(--ah-purple); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.ah-filter-toggle .ah-ic { width: 18px; height: 18px; }
.ah-filter-toggle:hover { background: #f6f2ff; }
/* Active-filter count badge on the Filter button (shows how many filters are on without opening the sheet). */
.ah-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--ah-purple, #783FF2); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.ah-showpaused { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #4b5563; cursor: pointer; user-select: none; }
.ah-showpaused input { width: 17px; height: 17px; accent-color: var(--ah-purple); cursor: pointer; }

/* Main: sidebar + results */
.ah-browse-main { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; } /* 300 (was 330) — tightened to give the cards more room; the label is now forced onto one line (nowrap on .ah-catlink-name), so "Travel & Accommodation" fits at 14px without needing the extra rail width */
.ah-browse-aside { background: #fff; border: 1px solid var(--ah-line); border-radius: 16px; padding: 18px 18px 20px; position: sticky; top: 20px; }
.ah-aside-title { font-size: 13px; font-weight: 700; color: var(--ah-ink); margin: 0 0 10px; }
.ah-aside-cats { margin-bottom: 18px; }
.ah-catlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* Astra's default `ul { padding-left: 20px }` sneaks back in on this page (higher
   specificity than the rule above) and eats 20px of the category-name column — force it
   off so long labels ("Events & Weddings") get the full width and don't wrap needlessly. */
.ah-aside-cats .ah-catlist { padding-left: 0 !important; }
.ah-catlink { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left; padding: 8px 8px; border-radius: 10px; font: inherit; font-size: 14px; color: #3f4550; cursor: pointer; }
/* Astra styles bare <button> with `button:hover/:focus { color:#fff }`, which turned the category
   text white (unreadable) on hover and after a click (the submit button keeps :focus). Pin our own
   text colour on every interaction state, !important to outrank the theme. */
.ah-catlink:hover, .ah-catlink:focus { background: #f6f5fb; color: #3f4550 !important; }
.ah-catlink.is-active, .ah-catlink.is-active:hover, .ah-catlink.is-active:focus { background: #f1ecfe; color: var(--ah-purple) !important; font-weight: 700; }
.ah-catlink-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; color: currentColor; }
.ah-catlink-ico img { width: 20px; height: 20px; object-fit: contain; display: block; }
.ah-catlink-ico .ah-lane-ic { width: 20px; height: 20px; }
.ah-catlink-ico .ah-ic { width: 20px; height: 20px; }
.ah-catlink { gap: 10px; }
.ah-catlink-name { flex: 1 1 auto; min-width: 0; font-size: 14px; white-space: nowrap; line-height: 1.25; } /* one line at 14px — "Travel & Accommodation" fits in the 300px rail without wrapping or truncating */
.ah-catlink-n { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #5C6270; }
.ah-catlink.is-active .ah-catlink-n { color: var(--ah-purple); }

.ah-fgroup { border-top: 1px solid #f0f1f5; padding-top: 16px; margin-top: 16px; }
.ah-aside-cats + .ah-aside-filters .ah-fgroup:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ah-budget-row { display: flex; align-items: center; gap: 8px; }
.ah-budget-in { width: 100%; height: 48px; box-sizing: border-box; border: 1px solid var(--ah-line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ah-ink); background: #fff; -moz-appearance: textfield; }
.ah-budget-in::-webkit-outer-spin-button, .ah-budget-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ah-budget-in:focus { outline: none; border-color: var(--ah-purple); box-shadow: var(--ah-ring); }
.ah-budget-to { font-size: 13px; color: #5C6270; flex: 0 0 auto; }
.ah-range { position: relative; height: 26px; margin-top: 12px; }
.ah-range-track { position: absolute; top: 11px; left: 2px; right: 2px; height: 4px; background: #e6e6ee; border-radius: 3px; }
.ah-range-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--ah-purple); border-radius: 3px; }
.ah-range input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.ah-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ah-purple); box-shadow: 0 1px 3px rgba(0,0,0,.22); cursor: pointer; }
.ah-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ah-purple); box-shadow: 0 1px 3px rgba(0,0,0,.22); cursor: pointer; }
.ah-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; }

.ah-loc { position: relative; }
.ah-loc-in { width: 100%; height: 48px; box-sizing: border-box; border: 1px solid var(--ah-line); border-radius: 10px; padding: 0 38px 0 12px; font: inherit; font-size: 14px; color: var(--ah-ink); background: #fff; }
.ah-loc-in:focus { outline: none; border-color: var(--ah-purple); box-shadow: var(--ah-ring); }
.ah-loc-ico { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #9aa0ac; display: flex; }
.ah-loc-ico .ah-ic { width: 18px; height: 18px; }
.ah-radio { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; color: #3f4550; cursor: pointer; }
.ah-radio input { width: 17px; height: 17px; accent-color: var(--ah-purple); cursor: pointer; }
.ah-aside-actions { margin-top: 18px; }
.ah-clear-all { width: 100%; gap: 8px; font-size: 14px !important; }
.ah-clear-all .ah-ic { width: 16px; height: 16px; }

/* Sheet-only chrome — hidden on desktop, shown when the sidebar becomes a bottom-sheet */
.ah-sheet-head, .ah-sheet-actions { display: none; }

/* Results grid + list */
.ah-browse-results { min-width: 0; }
.ah-results.ah-rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ah-rcard { position: relative; background: #fff; border: 1px solid var(--ah-line); border-radius: 16px; overflow: hidden; transition: box-shadow .16s ease, transform .16s ease; }
.ah-rcard:hover { box-shadow: 0 10px 26px rgba(13,17,23,.10); transform: translateY(-2px); }
.ah-rcard.is-paused { opacity: .72; }
.ah-rcard.is-paused:hover { opacity: 1; }
.ah-rcard-link { display: block; color: inherit !important; text-decoration: none !important; }
.ah-rcard-media { position: relative; aspect-ratio: 3 / 2; background: #eef0f4; overflow: hidden; }
/* !important beats the theme's `img { height:auto }` so browse thumbnails (grid + list)
   fill their box and centre-crop uniformly instead of overflowing at intrinsic height. */
.ah-rcard-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.ah-rcard-noimg { width: 100%; height: 100%; background: linear-gradient(135deg, #ece9fd, #f6f5ff); }
.ah-rcard-media .ah-badge.is-paused { position: absolute; top: 10px; left: 10px; background: #b45309; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.ah-rcard-avatars { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; }
.ah-rcard-avatars .ah-card-stack, .ah-rcard-avatars .ah-card-ph { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.25); }
.ah-card-ph { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #cfd3dc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6z'/%3E%3C/svg%3E") no-repeat center / 22px; }
.ah-rcard-save { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); display: inline-flex; align-items: center; justify-content: center; color: #4b5563; cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.18); transition: color .12s, background .12s; z-index: 2; }
.ah-rcard-save:hover { color: var(--ah-purple) !important; background: #fff !important; }
/* Unsaved focus/active must NOT inherit the theme's (Astra) blue button:focus fill — keep the resting
   white circle + dark icon (this is what a just-deselected bookmark returns to). */
.ah-rcard-save:focus, .ah-rcard-save:focus-visible, .ah-rcard-save:active { color: #4b5563 !important; background: #fff !important; }
/* Saved → filled CTA purple with a white bookmark, in every state. */
.ah-rcard-save.is-saved, .ah-rcard-save.is-saved:hover, .ah-rcard-save.is-saved:focus, .ah-rcard-save.is-saved:focus-visible, .ah-rcard-save.is-saved:active { background: var(--ah-purple, #783FF2) !important; color: #fff !important; }
.ah-rcard-save .ah-ic { width: 18px; height: 18px; }
.ah-rcard-body { padding: 14px 16px 16px; }
.ah-rcard-cat { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #6a6f7b; background: #f1f2f6; padding: 4px 9px; border-radius: 6px; margin-bottom: 9px; }

/* Tag row: category pill + "Open to everyone" badge sit on one wrapping line. */
.ah-rcard-tags, .ah-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; }
.ah-rcard-tags .ah-rcard-cat, .ah-card-tags .ah-cat { margin-bottom: 0; }
.ah-open-tag { display: inline-block; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: #0f6e63; background: #d9f2ec; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.ah-side-open { display: flex; }
@media (max-width: 767px) { .ah-open-tag { font-size: 10px; padding: 3px 8px; } }
.ah-rcard-title { font-size: 18px; font-weight: 700; line-height: 1.28; color: var(--ah-ink); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ah-rcard-budget { font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--ah-green); margin: 0 0 12px; }
.ah-rcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: #6a6f7b; }
/* Grid view: pin the footer (time + pros) to the bottom of the card so it doesn't
   float up under the budget when the title is short. Scoped to .ah-rgrid so the
   fixed-height list rows (.ah-rlist) are untouched. */
.ah-rgrid .ah-rcard-link { display: flex; flex-direction: column; height: 100%; }
.ah-rgrid .ah-rcard-body { display: flex; flex-direction: column; flex: 1; }
.ah-rgrid .ah-rcard-foot { margin-top: auto; }
/* Reserve two title lines in the grid so the budget lines up across cards whether the title is one
   line or two — a short title otherwise pulls its budget up out of line with its neighbours. */
.ah-rgrid .ah-rcard-title { min-height: 2.56em; } /* 2 × line-height 1.28 */
/* Location line — only rendered when a request has a location or is flagged remote (optional per request). */
.ah-rcard-loc { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 13px; color: #6a6f7b; margin: 0 0 12px; line-height: 1.3; }
.ah-rcard-loc svg { width: 14px; height: 14px; flex: 0 0 auto; color: #9aa0ac; }
.ah-rcard-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-rcard-pros { display: inline-flex; align-items: center; gap: 6px; }
.ah-rcard-pros .ah-ic { width: 16px; height: 16px; opacity: .75; flex: 0 0 auto; }
.ah-rcard-time { color: #9aa0ac; flex: 0 0 auto; }
/* Pros-on-it avatar stack in the footer (right) — shown instead of the count text. */
.ah-rcard-proav { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ah-rcard-proav .ah-card-stack, .ah-rcard-proav .ah-card-more { width: 22px; height: 22px; }
.ah-rcard-proav .ah-card-more { font-size: 9px; }

/* List view — thumbnail left, content right */
.ah-results.ah-rlist { display: flex; flex-direction: column; gap: 12px; }
.ah-rlist .ah-rcard { display: block; }
/* Uniform list rows: a fixed row height means EVERY thumbnail is the same size and
   crops to fill (the img is object-fit:cover); the text column is clamped to fit. (v0.44.30) */
.ah-rlist .ah-rcard-link { display: grid; grid-template-columns: 168px 1fr; gap: 16px; align-items: stretch; height: 120px; }
.ah-rlist .ah-rcard-media { aspect-ratio: auto; height: 100%; border-radius: 0; }
/* List rows scan on price: content on the left, the green budget in its own right-aligned column
   so every budget lines up down the page (the whole point of the list view). Grid areas keep the
   title/meta on the left and let the budget span the row height, centred. */
.ah-rlist .ah-rcard-body {
	padding: 12px 28px 12px 0; align-self: center; overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "tags budget" "title budget" "loc budget" "foot budget";
	column-gap: 20px; align-content: center;
}
.ah-rlist .ah-rcard-tags  { grid-area: tags; }
.ah-rlist .ah-rcard-title { grid-area: title; -webkit-line-clamp: 2; min-height: 0; }
.ah-rlist .ah-rcard-loc   { grid-area: loc; margin: 4px 0 0; }
.ah-rlist .ah-rcard-foot  { grid-area: foot; justify-content: flex-start; gap: 12px; }
.ah-rlist .ah-rcard-budget { grid-area: budget; align-self: center; justify-self: end; text-align: right; margin: 0; white-space: nowrap; font-size: 16px; font-weight: 600; }

/* Pager */
.ah-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 30px 0 4px; flex-wrap: wrap; }
.ah-page { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--ah-line); border-radius: 10px; background: #fff; color: #3f4550; font-weight: 600; font-size: 14px; text-decoration: none !important; cursor: pointer; }
.ah-page:hover { border-color: var(--ah-line-hover); color: var(--ah-ink); }
.ah-page.is-current { background: var(--ah-purple); border-color: var(--ah-purple); color: #fff; }
.ah-page.is-disabled { opacity: .4; pointer-events: none; }
.ah-page-arrow .ah-ic { width: 16px; height: 16px; }
.ah-page-gap { display: inline-flex; align-items: center; color: #b6bac2; padding: 0 2px; }
.ah-page-gap .ah-ic { width: 18px; height: 18px; }

/* Empty state */
.ah-browse .ah-empty { text-align: center; color: #6a6f7b; padding: 40px 0; }
.ah-browse .ah-empty-filtered { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 0; }
.ah-browse .ah-empty-filtered .ah-clear-link { max-width: 220px; }

/* Floating + FAB */
.ah-browse-fab { position: fixed; right: 24px; bottom: 24px; width: 60px; height: 60px; border-radius: 50%; background: var(--ah-purple); color: #fff !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(120,63,242,.42); text-decoration: none !important; z-index: 40; transition: background .14s, transform .1s; }
.ah-browse-fab:hover { background: var(--ah-purple-hover); }
.ah-browse-fab:active { transform: translateY(1px); }
.ah-browse-fab .ah-ic { width: 26px; height: 26px; }

/* Backdrop for the mobile filter sheet */
.ah-sheet-backdrop { position: fixed; inset: 0; background: rgba(13,17,23,.42); z-index: 99998; opacity: 0; transition: opacity .2s ease; }

/* ---- Tablet + mobile (≤1024): filters become a slide-up "Filter" sheet ----
   On iPads a fixed left sidebar crowded the listings, so at ≤1024 we use the same
   bottom-sheet pattern as phones: the listings get the FULL width and the "Filter" button
   opens the sheet — which now carries the category list along with budget/location/pro-activity
   (the toolbar category dropdown was removed, so Filter is the single filter entry point).
   Phone-specific SPACING (fonts, tighter padding, toolbar reflow) stays in the max-width:767
   block below; this block is just the shared sheet mechanism. */
@media (max-width: 1024px) {
	.ah-browse-main { display: block; }
	.ah-results.ah-rgrid { grid-template-columns: repeat(2, 1fr); }
	.ah-browse-h1 { font-size: 34px; }

	.ah-aside-cats { display: block; }     /* categories now live inside the Filter sheet (toolbar dropdown removed) */
	.ah-aside-actions { display: none; }   /* replaced by the sticky sheet actions */
	.ah-browse-aside { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 99999; border-radius: 20px 20px 0 0; border: 0; box-shadow: 0 -8px 30px rgba(13,17,23,.22); max-height: 86vh; overflow-y: auto; padding: 8px 20px 24px; transform: translateY(102%); visibility: hidden; transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s linear .26s; }
	.ah-browse.sheet-open .ah-browse-aside { transform: translateY(0); visibility: visible; transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s; }
	.ah-browse.sheet-open .ah-sheet-backdrop { display: block; opacity: 1; }
	.ah-browse-aside::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 3px; background: #d7dae1; margin: 6px auto 12px; }
	.ah-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
	.ah-sheet-title { font-size: 17px; font-weight: 800; color: var(--ah-ink); }
	.ah-sheet-close { border: 0; background: #f1f2f6; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #4b5563; cursor: pointer; }
	.ah-sheet-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
	.ah-sheet-apply { width: 100%; }
	.ah-sheet-clear { width: 100%; text-align: center; }
}

/* ---- Mobile: sidebar becomes a Filter bottom-sheet (categories included) ---- */
@media (max-width: 767px) {
	.ah-browse { padding: 6px 16px 80px; }
	.ah-browse-head { align-items: center; }
	.ah-browse-h1 { font-size: 27px; }
	.ah-browse-sub { font-size: 14px; }
	.ah-browse-toolbar { gap: 10px; }
	/* Category dropdown is gone — Filter sits right under the search box, sharing the row with
	   Sort, as the single filter entry point. */
	.ah-search { flex: 1 1 100%; order: 1; }
	.ah-tb-sort { flex: 1 1 46%; order: 2; }
	.ah-filter-toggle { order: 3; flex: 1 1 46%; justify-content: center; }
	.ah-showpaused { order: 4; margin-left: auto; }

	.ah-browse-main { display: block; }
	.ah-results.ah-rgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.ah-rcard-body { padding: 11px 12px 13px; }
	.ah-rcard-title { font-size: 15px; }
	.ah-rcard-budget { font-size: 15px; }
	.ah-rcard-cat { font-size: 10px; margin-bottom: 7px; }

	/* List view rows on mobile: grow to fit the content instead of a hard 104px cap (which
	   clipped the title/budget/tags once the "Open to everyone" badge was added). min-height keeps
	   short rows uniform; the thumbnail stretches to whatever the body needs. */
	.ah-rlist .ah-rcard-link { grid-template-columns: 108px 1fr; gap: 12px; height: auto; min-height: 108px; align-items: stretch; }
	.ah-rlist .ah-rcard-media { height: 100%; min-height: 108px; }
	.ah-rlist .ah-rcard-body { padding: 10px 34px 10px 0; overflow: visible; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
	.ah-rlist .ah-rcard-tags { margin-bottom: 5px; }
	.ah-rlist .ah-rcard-title { margin-bottom: 4px; }
	/* Phone list rows stay stacked (flex column above), so undo the desktop right-aligned budget
	   column here — back to a normal left-aligned line under the title. */
	.ah-rlist .ah-rcard-budget { margin-bottom: 5px; font-size: 15px; text-align: left; justify-self: start; align-self: flex-start; }

	/* Sidebar → bottom sheet */
	.ah-browse-aside { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 99999; border-radius: 20px 20px 0 0; border: 0; box-shadow: 0 -8px 30px rgba(13,17,23,.22); max-height: 86vh; overflow-y: auto; padding: 8px 20px 24px; transform: translateY(102%); visibility: hidden; transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s linear .26s; }
	.ah-browse.sheet-open .ah-browse-aside { transform: translateY(0); visibility: visible; transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s; }
	.ah-browse.sheet-open .ah-sheet-backdrop { display: block; opacity: 1; }
	.ah-browse-aside::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 3px; background: #d7dae1; margin: 6px auto 12px; }
	.ah-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
	.ah-sheet-title { font-size: 17px; font-weight: 800; color: var(--ah-ink); }
	.ah-sheet-close { border: 0; background: #f1f2f6; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #4b5563; cursor: pointer; }
	.ah-sheet-close .ah-ic { width: 18px; height: 18px; }
	.ah-aside-cats { display: block; } /* categories show inside the Filter sheet on mobile (toolbar dropdown removed) */
	.ah-aside-actions { display: none; } /* replaced by the sticky sheet actions */
	.ah-sheet-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
	.ah-sheet-apply { width: 100%; }
	.ah-sheet-clear { width: 100%; text-align: center; }

	.ah-browse-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

@media (max-width: 380px) {
	.ah-results.ah-rgrid { grid-template-columns: 1fr; }
}

/* ---- Hardening: the active theme (Astra/Elementor) styles bare <button> + inputs with its
   own padding / min-height / appearance, which out-specifies our controls and turned the view
   toggle + bookmark into blobs and hid their icons. Force our own geometry. ---- */
.ah-browse button { font: inherit; letter-spacing: normal; text-transform: none; }
.ah-browse .ah-ic { display: inline-block; flex: 0 0 auto; }
.ah-browse .ah-vt-btn {
	width: 44px !important; height: 42px !important; min-height: 0 !important;
	padding: 0 !important; box-sizing: border-box; line-height: 0 !important;
	-webkit-appearance: none; appearance: none; box-shadow: none !important;
}
.ah-browse .ah-vt-btn .ah-ic { width: 20px !important; height: 20px !important; }
.ah-rcard-save {
	width: 34px !important; height: 34px !important; min-height: 0 !important;
	padding: 0 !important; box-sizing: border-box; line-height: 0 !important;
	-webkit-appearance: none; appearance: none;
}
.ah-rcard-save .ah-ic { width: 18px !important; height: 18px !important; }
.ah-browse .ah-sheet-close { padding: 0 !important; min-height: 0 !important; box-shadow: none !important; }
.ah-browse .ah-filter-toggle { min-height: 0 !important; box-shadow: none !important; }
.ah-browse .ah-search-in { height: 48px !important; box-sizing: border-box !important; padding: 0 16px 0 42px !important; }
.ah-browse .ah-loc-in { height: 48px !important; box-sizing: border-box !important; padding: 0 38px 0 12px !important; }
.ah-browse .ah-budget-in { height: 48px !important; box-sizing: border-box !important; padding: 0 10px !important; }
.ah-browse .ah-search-in { padding: 0 16px 0 42px !important; }
.ah-browse .ah-loc-in { padding: 0 38px 0 12px !important; }
.ah-browse .ah-budget-in { padding: 0 10px !important; }

/* Match the post-request wizard input style site-wide: 12px rounded corners + 1.5px border
   (Astra was flattening the browse inputs' corners). Focus keeps the purple ring. */
.ah-browse .ah-search-in,
.ah-browse .ah-tb-select,
.ah-browse .ah-budget-in,
.ah-browse .ah-loc-in {
	border: 1.5px solid #dcdce4 !important;
	border-radius: 12px !important;
}
.ah-browse .ah-search-in:focus,
.ah-browse .ah-tb-select:focus,
.ah-browse .ah-budget-in:focus,
.ah-browse .ah-loc-in:focus {
	border-color: var(--ah-purple) !important;
}
/* Placeholder contrast (WCAG AA): the browse inputs used the browser-default light-grey
   placeholder; pin them to #6B7280 (≈4.9:1 on white) so they pass. */
.ah-browse .ah-search-in::placeholder,
.ah-browse .ah-budget-in::placeholder,
.ah-browse .ah-loc-in::placeholder {
	color: #6B7280;
	opacity: 1;
}

/* FAB: lift it clear of the theme's scroll-to-top control (both sit bottom-right). */
.ah-browse-fab { bottom: 94px; z-index: 45; }
@media (max-width: 767px) { .ah-browse-fab { bottom: 86px; right: 16px; } }

/* View toggle: the theme rounds bare <button>s, so the active square looked like a detached
   chip inside the container border. Flush the segments so it reads as one clean pill. */
.ah-browse .ah-vt-btn { border: 0 !important; border-radius: 0 !important; }
.ah-browse .ah-vt-btn + .ah-vt-btn { border-left: 1px solid var(--ah-line) !important; }

/* Filter button opens the filter bottom-sheet. Shown on tablet + mobile (≤1024), where the
   sidebar is a sheet; hidden on desktop, where the sidebar is always visible so it has
   nothing to do. */
.ah-browse .ah-filter-toggle { display: none; }
@media (max-width: 1024px) { .ah-browse .ah-filter-toggle { display: inline-flex; } }

/* 'Show paused' toolbar control removed from the public browse page (v0.44.23) — paused
   requests stay hidden from public browse. The markup is gone; the .ah-showpaused base rules
   above are now inert but harmless. */

/* =========================================================================
   Request detail — poster profile card + Join-as-a-Pro card (v0.44.24)
   ========================================================================= */

/* Poster profile preview */
.ah-poster-card { }
.ah-pp-head { font-size: 16px; font-weight: 700; margin: 0 0 14px; color: #0D1117; }
.ah-pp-id { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.ah-pp-avatar { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: #f1ecfe; }
/* UM replaces get_avatar() output and STRIPS custom classes, so .ah-pp-avatar never lands on
   a real avatar — size by container instead (same fix as .ah-card-poster img in v0.8.2). */
.ah-pp-id > img, .ah-pp-id .um-avatar, .ah-pp-id .avatar {
	width: 52px !important; height: 52px !important; max-width: 52px !important;
	border-radius: 50% !important; object-fit: cover !important; flex: 0 0 auto !important;
}
.ah-pp-idtext { min-width: 0; }
.ah-pp-name { font-size: 16px; font-weight: 700; line-height: 1.2; color: #0D1117; display: flex; align-items: center; gap: 6px; }
.ah-pp-verified { width: 16px; height: 16px; flex: 0 0 auto; }
.ah-pp-line { color: #5c6270; font-size: 13.5px; line-height: 1.45; margin-top: 3px; }
.ah-pp-stats { display: flex; gap: 8px; text-align: center; padding: 16px 0; margin-bottom: 16px;
	border-top: 1px solid #ececf1; border-bottom: 1px solid #ececf1; }
.ah-pp-stat { flex: 1 1 0; min-width: 0; }
.ah-pp-statnum { font-size: 19px; font-weight: 800; color: #0D1117; line-height: 1.1; }
.ah-pp-statlbl { font-size: 12px; color: #5c6270; margin-top: 2px; line-height: 1.2; }
.ah-pp-abouth { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: #0D1117; }
.ah-pp-about { font-size: 14px; color: #3b4049; line-height: 1.5; }

/* Join as a Pro — homepage banner cream (#F3EDE4) + warm outline */
.ah-join-pro { background: #F3EDE4; border: 1px solid #E4D8C2; position: relative; overflow: hidden; }
.ah-join-top { display: flex; gap: 10px; align-items: flex-start; }
.ah-join-text { flex: 1 1 auto; min-width: 0; }
.ah-join-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ah-purple, #783FF2); margin-bottom: 5px; }
.ah-join-h { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 6px; color: #0D1117; }
/* The theme sets clear:both on h2 — that would drop the heading below the floated
   mascot and open a big gap. Scoped override so the heading sits beside the mascot. */
.ah-join-pro .ah-join-h { clear: none; }
.ah-join-sub { font-size: 14px; color: #5b5346; margin: 0; line-height: 1.5; }
.ah-join-mascot { float: right; width: 84px; height: auto; margin: 0 0 6px 14px; filter: drop-shadow(0 2px 4px rgba(90,75,45,.16)); }
.ah-join-perks { list-style: none; padding: 0; margin: 14px 0 16px; }
.ah-join-perks li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: #3f3a30; font-weight: 500; margin-top: 9px; }
.ah-join-perks li:first-child { margin-top: 0; }
.ah-join-tick { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ah-purple, #783FF2); margin-top: 1px; }
.ah-join-cta { display: block; width: 100%; text-align: center; clear: both; }
.ah-join-hint { text-align: center; color: #8c8272; font-size: 12.5px; margin-top: 11px; margin-bottom: 0; }

/* Detail side cards stay SOLID WHITE on every breakpoint — the Join-as-a-Pro card keeps
   its cream. Guards against a theme rule tinting the cards on mobile. (v0.44.27) */
.ah-detail-side .ah-side-card:not(.ah-join-pro) { background: #fff !important; }

/* UM required-field asterisk — brand purple (added via um_field_label filter in
   consent.php because UM wasn't emitting its own marker on this install). */
.um .um-req, .um-req.ah-req { color: #783FF2 !important; margin-left: 3px; font-weight: 700; }

/* =========================================================================
   Mobile bottom navigation (v0.46.0) — app-style tab bar for logged-in members.
   Rendered site-wide on wp_footer (includes/nav.php); shown only on mobile. The
   markup is always present for logged-in users, so all display rules key off the
   viewport here. Body gets bottom padding (logged-in only) so nothing hides
   behind the bar.
   ========================================================================= */
.ah-bnav { display: none; }
@media (max-width: 768px) {
	.ah-bnav {
		display: flex; align-items: center; justify-content: space-around;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
		background: #fff; border-top: 1px solid #e8e8ef;
		box-shadow: 0 -6px 20px rgba(13,17,23,.08);
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
		font-family: 'Inter', system-ui, sans-serif;
	}
	/* Clear the FULL bar height (incl. the safe-area the bar adds) so content isn't hidden
	   behind it on notched phones. */
	body.logged-in { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
	.ah-bnav-item {
		flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
		text-decoration: none !important; color: #8a90a0; font-size: 11px; font-weight: 600; padding: 0;
		position: relative;
	}
	.ah-bnav-item.is-active { color: var(--ah-purple, #783FF2); }
	.ah-bnav-badge { position: absolute; top: -5px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--ah-purple, #783FF2); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center; }
	.ah-bnav-ico { display: inline-flex; }
	.ah-bnav-ico .ah-ic { width: 26px; height: 26px; }
	.ah-bnav-label { line-height: 1; white-space: nowrap; }
	.ah-bnav-plus { flex: 0 0 auto; display: flex; align-items: flex-start; text-decoration: none !important; }
	.ah-bnav-plus-btn {
		width: 52px; height: 52px; border-radius: 50%; background: var(--ah-purple, #783FF2); color: #fff;
		display: inline-flex; align-items: center; justify-content: center;
		box-shadow: 0 4px 12px rgba(120,63,242,.24); transform: translateY(-12px);
	}
	.ah-bnav-plus-btn .ah-ic { width: 26px; height: 26px; }
	.ah-bnav-item.is-soon { position: relative; color: #b7bcc7; cursor: default; }
	.ah-bnav-soon {
		position: absolute; top: -5px; right: calc(50% - 24px);
		font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
		color: #fff; background: #b3b8c4; border-radius: 999px; padding: 1px 5px;
	}
	/* Focused post-a-request takeover hides site chrome — hide the bar there too. */
	body.ah-post-takeover .ah-bnav { display: none; }
	body.ah-post-takeover.logged-in { padding-bottom: 0; }
	/* Stand the browse floating "+" down for logged-in members so it never collides
	   with the bottom nav's centre button (logged-out users keep the FAB). */
	body.logged-in .ah-browse-fab { display: none; }
	/* Logged-in members already have the fixed bottom nav for getting around, so the theme's
	   floating scroll-to-top is redundant for them — and worse, it floats over the right edge
	   of full-width CTAs like the offer form's "I'm on it!" button, sitting on top of the tap
	   target (it intercepts the tap, and its purple round styling blends into the purple CTA).
	   Hide it on mobile for members. Logged-out visitors have no bottom nav, so they keep the
	   theme's back-to-top control where it is. */
	body.logged-in #ast-scroll-top { display: none !important; }
}

/* Brand the theme's scroll-to-top control (Astra ships #ast-scroll-top as a blue square) so it matches the
   round purple utility actions instead of standing out. */
#ast-scroll-top {
	background-color: var(--ah-purple, #783FF2) !important;
	color: #fff !important;
	border-radius: 50% !important;
}
#ast-scroll-top:hover,
#ast-scroll-top:focus { background-color: #6a2fe0 !important; color: #fff !important; }

/* =========================================================================
   Request detail redesign (v0.67.0) — owner sidebar (in-progress + edit),
   verified-pros line, progress timeline card, share card, compact accept,
   and the "Other offers" accordion.
   ========================================================================= */

/* Owner sidebar: live status pill + who they're working with. */
.ah-owner-statuspill {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 13px;
	color: #0F7A45; background: #eaf6ef; border: 1px solid #cdeadb;
	border-radius: 999px; padding: 4px 11px; margin: 2px 0 14px;
}
.ah-statusdot { width: 8px; height: 8px; border-radius: 50%; background: #1B9C5B; display: inline-block; }
.ah-owner-working { margin: 2px 0 14px; }
.ah-owner-working-label { font-size: 12.5px; color: #6a6f7b; font-weight: 600; margin: 0 0 8px; }
.ah-owner-working-pro { display: flex; align-items: center; gap: 10px; }
.ah-owner-working-av { flex: 0 0 auto; width: 40px; height: 40px; }
.ah-owner-working-av img, .ah-owner-working-av svg { width: 40px !important; height: 40px !important; border-radius: 50% !important; object-fit: cover; display: block; }
.ah-owner-working-meta { display: flex; flex-direction: column; min-width: 0; }
.ah-owner-working-name { font-weight: 700; font-size: 14px; color: #0D1117; }
.ah-owner-working-offer { font-size: 13px; color: #1B9C5B; font-weight: 700; }
/* Edit request details — white/ghost, full width, pencil + label. */
a.ah-owner-edit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; }
.ah-owner-edit .ah-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.ah-owner-locknote { font-size: 12.5px; color: #6a6f7b; line-height: 1.5; margin: 2px 0 0; }

/* Budget/status side card: left-aligned contents on one even vertical rhythm.
   The card flows as a flex column with a single gap; per-element margins are cleared so the
   spacing between "$600 budget", the owner block, "Needed by" and the verified line stays uniform. */
.ah-detail-budget { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.ah-detail-budget > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ah-detail-budget .ah-reward-lg { margin: 0; }
.ah-detail-budget .ah-side-line { margin: 0; }
.ah-owner-label { margin: 0; }
.ah-owner-count { margin: 0; }
.ah-owner-statuspill { margin: 0; }
.ah-owner-working { margin: 0; width: 100%; }

/* Verified-pros-only line in the budget card (shield + label). */
.ah-side-verified { display: inline-flex; align-items: center; gap: 7px; color: #5b28d6; font-weight: 600; }
.ah-side-verified .ah-ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ah-purple, #783FF2); }

/* --- Progress timeline card --- */
.ah-timeline { list-style: none; margin: 4px 0 0; padding: 0; --ah-tl: var(--ah-purple, #783FF2); }
.ah-timeline.is-in_progress, .ah-timeline.is-completed { --ah-tl: #0F7A45; }
.ah-tl-step { position: relative; display: flex; gap: 12px; padding-bottom: 18px; }
.ah-tl-step:last-child { padding-bottom: 0; }
/* Connector line down from each marker to the next. */
.ah-tl-step::before {
	content: ""; position: absolute; left: 12px; top: 24px; bottom: -2px; width: 2px;
	background: #e6e6ee; transform: translateX(-50%);
}
.ah-tl-step:last-child::before { display: none; }
.ah-tl-step.is-done::before { background: var(--ah-tl); }
.ah-tl-marker {
	flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border: 2px solid #d7d9e2; color: #fff; position: relative; z-index: 1;
}
.ah-tl-marker .ah-ic { width: 15px; height: 15px; }
.ah-tl-step.is-done .ah-tl-marker,
.ah-tl-step.is-current .ah-tl-marker { background: var(--ah-tl); border-color: var(--ah-tl); }
.ah-tl-step.is-current .ah-tl-marker { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ah-tl) 18%, transparent); }
.ah-tl-step.is-todo .ah-tl-marker { background: #fff; border-color: #d7d9e2; }
.ah-tl-body { display: flex; flex-direction: column; padding-top: 1px; }
.ah-tl-label { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 14px; color: #0D1117; line-height: 1.3; }
.ah-tl-step.is-todo .ah-tl-label { color: #9aa0ac; font-weight: 500; }
.ah-tl-step.is-current .ah-tl-label { font-weight: 800; }
.ah-tl-sub { font-size: 12.5px; color: #6a6f7b; margin-top: 1px; }
.ah-tl-step.is-todo .ah-tl-sub { color: #a7adb8; }

/* --- Share this request card --- */
.ah-share-card .ah-share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ah-share-card .ah-share-btn {
	width: 38px !important; height: 38px !important; padding: 0 !important; min-height: 0 !important;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 1.5px solid var(--ah-line, #e0e2e8); background: #fff; color: #3d424e;
	cursor: pointer; flex: 0 0 auto; appearance: none; position: relative;
}
.ah-share-card .ah-share-btn:hover { border-color: var(--ah-purple, #783FF2); color: var(--ah-purple, #783FF2); }
.ah-share-card .ah-share-btn:focus:not(:hover) { background: #fff !important; color: #3d424e !important; }
.ah-share-card .ah-share-btn .ah-ic { width: 17px; height: 17px; }
.ah-report-link {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
	font-size: 13px; font-weight: 600; color: #8a90a0; text-decoration: none !important;
}
.ah-report-link:hover { color: #EF4444; }
.ah-report-link .ah-ic { width: 15px; height: 15px; flex: 0 0 auto; }

/* --- Compact "Accept" button in the offers list (white, small) --- */
.ah-manage-action .ah-btn-accept-lite {
	width: auto; background: #fff !important; color: var(--ah-tint-ink, #5b28d6) !important;
	border: 1.5px solid var(--ah-tint-border, #cbb8fb) !important;
	font-size: 13px; font-weight: 700; padding: 7px 16px !important; border-radius: 10px;
	box-shadow: none !important;
}
.ah-manage-action .ah-btn-accept-lite:hover { background: var(--ah-tint, #efe9fe) !important; border-color: var(--ah-purple, #783FF2) !important; color: var(--ah-tint-ink, #5b28d6) !important; }
.ah-manage-action .ah-btn-accept-lite:focus:not(:hover) { background: #fff !important; color: var(--ah-tint-ink, #5b28d6) !important; }

/* --- "Other offers (N)" accordion (shown once a winner's picked) --- */
.ah-other-offers { margin-top: 14px; border: 1px solid #ececf1; border-radius: 14px; background: #fbfbfd; }
.ah-other-offers > .ah-other-offers-sum {
	list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
	padding: 12px 14px; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px; color: #3d424e;
}
.ah-other-offers > .ah-other-offers-sum::-webkit-details-marker { display: none; }
/* Only the chevron (direct child) rotates on open — the people icon stays upright. */
.ah-other-offers-sum > .ah-ic { width: 18px; height: 18px; color: #8a90a0; transition: transform .18s ease; }
.ah-other-offers[open] > .ah-other-offers-sum > .ah-ic { transform: rotate(180deg); }
.ah-other-offers-list { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.ah-other-offers-list .ah-manage-row { border: none; }

/* Pro's sidebar summary once they're on it → link down to the full "Your offer" manage panel
   that now sits below the description (v0.68.0). */
.ah-onit-jump { margin: 10px 0 0; text-align: center; }
.ah-onit-jump a { font-size: 13px; font-weight: 700; color: var(--ah-purple, #783FF2); text-decoration: none !important; }
.ah-onit-jump a:hover { text-decoration: underline !important; }
/* The Pro's manage panel reuses the owner .ah-manage card; left-align its quote there. */
.ah-claim-manage .ah-onit-quote { justify-content: flex-start; }

/* =========================================================================
   Pro listing view (v0.71.0) — Request summary card + the Pro's summary/offer.
   ========================================================================= */

/* "Request summary" card heading. */
.ah-summary-title { font-weight: 700; margin: 0 0 12px; }

/* Divider + meta lines (Needed by / Verified) — same on every viewer type. */
.ah-side-div { height: 1px; background: #ececf1; margin: 16px 0 4px; }
.ah-side-needed { display: inline-flex; align-items: center; gap: 7px; }
.ah-side-needed .ah-ic { width: 16px; height: 16px; flex: 0 0 auto; color: #6a6f7b; }
.ah-side-needed span { min-width: 0; }

/* Pro "You're on it" — the poster's In-progress pill style, with a tick instead of the dot. */
.ah-onit-pill .ah-onit-pill-ic { display: inline-flex; align-items: center; }
.ah-onit-pill .ah-onit-pill-ic .ah-ic { width: 15px; height: 15px; }

/* "Manage your offer" CTA — full-width ghost button, cog + label. */
a.ah-onit-manage { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; margin-top: 12px; }
.ah-onit-manage .ah-ic { width: 16px; height: 16px; flex: 0 0 auto; }

/* Offer actions — Update / Withdraw as tidy icon links under the messaging in "Your offer". */
.ah-offer-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f0f4; display: flex; flex-direction: column; gap: 2px; }
.ah-offer-action { margin: 0; }
.ah-offer-action-link {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px;
	color: var(--ah-purple, #783FF2); padding: 8px 0;
}
.ah-offer-action-link::-webkit-details-marker { display: none; }
.ah-offer-action-link::marker { content: ''; }
.ah-offer-action-link:hover { text-decoration: underline; }
.ah-offer-action-link .ah-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.ah-offer-action-link.is-danger { color: #c0392b; }

/* =========================================================================
   Winning section polish (v0.69.0) — Accepted chip, "Finished?" row, the
   people-iconed Other-offers accordion, and the Reopen link outside the card.
   ========================================================================= */

/* Winner "✓ Accepted" chip — purple outline (no green). */
.ah-accepted-chip {
	display: inline-flex; align-items: center; gap: 5px;
	background: #fff; color: var(--ah-purple, #783FF2); border: 1.5px solid var(--ah-tint-border, #cbb8fb);
	border-radius: 999px; padding: 4px 11px; font-weight: 700; font-size: 12.5px; white-space: nowrap;
}
.ah-accepted-chip .ah-ic { width: 15px; height: 15px; }

/* Other-offers accordion: little people glyph in a light-purple circle (mock style). */
.ah-other-offers-lbl { display: inline-flex; align-items: center; gap: 10px; }
.ah-other-offers-lbl .ah-ic {
	width: 36px; height: 36px; padding: 8px; box-sizing: border-box;
	border-radius: 50%; background: var(--ah-tint, #efe9fe); color: var(--ah-purple, #783FF2);
}

/* "Finished?" row — purple tick + explainer + a compact "Mark as complete". */
.ah-finish-row {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	background: #f7f5fe; border: 1px solid #e6ddfb; border-radius: 12px; padding: 14px 16px;
}
.ah-finish-ico {
	flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
	background: var(--ah-purple, #783FF2); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
}
.ah-finish-ico .ah-ic { width: 20px; height: 20px; }
.ah-finish-text { flex: 1 1 160px; min-width: 140px; }
.ah-finish-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 15px; color: #0D1117; margin: 0; }
.ah-finish-sub { font-size: 12.5px; color: #5C6270; margin: 2px 0 0; }
.ah-finish-form { margin: 0; flex: 0 0 auto; }
.ah-btn-finish {
	display: inline-flex; align-items: center; gap: 7px;
	background: #fff !important; color: #1B9C5B !important; border: 1.5px solid #bfe6d0 !important;
	border-radius: 10px !important; padding: 9px 16px !important; box-shadow: none !important;
	font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 14px; cursor: pointer;
	min-height: 0 !important; appearance: none;
}
.ah-btn-finish:hover { background: #eafaf1 !important; border-color: #1B9C5B !important; color: #1B9C5B !important; }
.ah-btn-finish:focus:not(:hover) { background: #fff !important; color: #1B9C5B !important; }
.ah-btn-finish .ah-ic { width: 16px; height: 16px; }

/* Reopen — quiet text control OUTSIDE the manage card. */
.ah-reopen-row { margin: 16px 0 0; padding: 0; text-align: center; }
.ah-reopen-link {
	display: inline-flex; align-items: center; gap: 6px;
	background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important;
	color: var(--ah-purple, #783FF2) !important; font-family: 'Inter', system-ui, sans-serif;
	font-weight: 700; font-size: 14px; cursor: pointer; min-height: 0 !important; appearance: none;
}
.ah-reopen-link:hover { text-decoration: underline !important; background: none !important; color: var(--ah-purple, #783FF2) !important; }
.ah-reopen-link:focus:not(:hover) { background: none !important; color: var(--ah-purple, #783FF2) !important; }
.ah-reopen-link .ah-ic { width: 16px; height: 16px; }
.ah-reopen-sub { display: block; font-size: 12.5px; color: #8a90a0; margin-top: 4px; }