/* ---- Category quick-filter pills: the site's own flat pill + 3D icons (mobile) - 2026-09-03 ----
   Owner: flat pills (the Airbnb raised/pressed recipe tried the same day was dropped for these). The pill surface,
   colours, active state and dark mode come from the site's existing rules (search-discovery-hero-override-28.css:
   white, 1px rgba(20,20,20,.08), 0 6px 18px rgba(15,23,42,.08), 44px, 13px/500, active #141414/white; dark.css:
   --esc-dk-inner / --esc-dk-line-strong / pink-tint active). This sheet only (1) lays the four pills out as one
   row that fits 390/375/360-wide phones and (2) sizes the owner's 3D PNG icons (images/filter-3d/, 84px sources)
   at 18px. Keyed on #catFilterBar to outrank the override sheet's :not(.sticky) chains; <=768 only. */
@media (max-width: 768px) {
	body.search #catFilterBar .cat-filter-pills {
		display: flex;
		flex-wrap: nowrap;
		gap: 4px;   /* four pills must share 359px at 390 wide (measured) */
		padding: 24px 3%;   /* the scroller clips at its padding edge: 24px keeps the site pill's 0 6px 18px shadow inside it (an 8px pad drew a hard line under the pills) */
		margin: -24px -3%;   /* ...and the negative margin cancels that padding in the layout; 3% = .cat-filter-inner's own gutter */
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	body.search #catFilterBar .cat-filter-pills::-webkit-scrollbar { display: none; }
	body.search #catFilterBar .cat-filter-pills .cat-pill {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 0 auto;   /* natural widths, slack shared on wider phones, never shrink below content (the row scrolls instead) */
		min-width: 0;
		width: auto;
		gap: 5px;
		box-sizing: border-box;
		padding: 0 8px;   /* fits four pills at 390 with 18px icons + 13px labels (tiers below) */
		white-space: nowrap;
	}
	body.search #catFilterBar .cat-filter-pills .cat-pill .cat-pill__ic {
		display: block;
		width: 18px;   /* owner 2026-09-03: 20px read too large beside 13px labels, 16px a touch small -> 18px (the renders fill their canvas edge to edge) */
		height: 18px;
		flex: 0 0 auto;
		margin: 0;
		object-fit: contain;
	}
	body.search #catFilterBar .cat-filter-pills .cat-pill span {
		display: block;
		flex: 0 0 auto;   /* the override lets the label shrink + ellipsis; a fractional width then draws "Verifi…" although the row fits */
		min-width: 0;
		max-width: none;
		overflow: visible;
		text-overflow: clip;
		white-space: nowrap;
	}
}
/* narrow phones: measured budgets - 375 wide leaves 344px, 360 wide 329px, for four pills + three 4px gaps */
@media (max-width: 375px) {
	body.search #catFilterBar .cat-filter-pills .cat-pill { padding: 0 6px; }
}
@media (max-width: 360px) {
	body.search #catFilterBar .cat-filter-pills .cat-pill,
	body.search #catFilterBar .cat-filter-pills .cat-pill span { font-size: 12px; }
}

/* ---- Category intro card (mobile) - owner 2026-09-03, Airbnb promo-card pattern ----
   search.php wraps the VIP intro (h2 + p.vipgirlsintro) in .cat-intro-card with a 3D icon on the right. On mobile the
   pair becomes a white card with the site's pill surface (hairline + soft shadow), dark title, grey line, icon right;
   desktop keeps the plain heading + paragraph and hides the icon. The override sheet's mobile rules for the h2 / p
   (pink, 16px side padding) are replaced here with the same #catFilterBar-free but higher-specificity chain. */
.cat-intro-card__icon { display: none; }
/* Two cards share every rule below (owner 2026-09-03, "same for the regular profile area"): the VIP intro in .bg_vip #main
   and the "All … profiles" heading + line (h2 + p.introtxthome) in .bg_content #content - each selector is a pair. The
   regular card's icon slot is filled by search.php only when images/3d/intro-all.png exists. */
@media (max-width: 768px) {
	body.search .bg_vip #main > .cat-intro-card,
	body.search .bg_content #content > .cat-intro-card {
		display: flex;
		align-items: center;
		gap: 14px;
		box-sizing: border-box;
		margin: 0 16px 20px;   /* no top margin: it collapsed through #main + .bg_vip and opened a 3px gap to the section above (the page ground showed as a line) */
		padding: 18px 16px 18px 20px;
		background: #fff;
		border: 0;   /* airbnb promo cards (owner read them signed in, 2026-09-03): radius 24, no border, a 0 0 0 1px rgba(0,0,0,.02) hairline ring on the wrapper + a ::after layer with box-shadow 0 8px 24px #000 at opacity .1 (they fade it on hover); nothing fades here, so both live in one box-shadow */
		border-radius: 24px;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.10);
	}
	body.search .bg_vip #main:has(> .cat-intro-card) { padding-top: 4px; }   /* the 4px breathing room, as padding so it cannot collapse */
	body.search .bg_vip #main > .cat-intro-card .cat-intro-card__text,
	body.search .bg_content #content > .cat-intro-card .cat-intro-card__text { min-width: 0; flex: 1 1 auto; }
	body.search .bg_vip #main > .cat-intro-card h2,
	body.search .bg_content #content > .cat-intro-card h2 {
		margin: 0 0 4px;
		padding: 0;
		font-family: "S\00F6hne", sans-serif !important;   /* the override's Söhne rule targets #main > h2, which the card wrapper no longer matches */
		color: #141414;
		font-size: 15px !important;   /* owner: smaller (was 17); !important: a legacy sheet sets .bg_content h2 to 1.4em !important on small phones */
		line-height: 20px;
		font-weight: 500;
		letter-spacing: -0.01em;
	}
	body.search .bg_vip #main > .cat-intro-card .vipgirlsintro,
	body.search .bg_content #content > .cat-intro-card .introtxthome {
		margin: 0;
		padding: 0;
		font-family: "S\00F6hne", sans-serif;
		color: #6b7280;
		font-size: 13px;   /* owner: smaller (was 14) */
		line-height: 18px;
	}
	body.search .bg_vip #main > .cat-intro-card .cat-intro-card__icon,
	body.search .bg_content #content > .cat-intro-card .cat-intro-card__icon {
		display: block;
		flex: 0 0 auto;
		width: 72px;
		height: 72px;
		object-fit: contain;
	}
	html[data-theme="dark"] body.search .bg_vip #main > .cat-intro-card,
	html[data-theme="dark"] body.search .bg_content #content > .cat-intro-card {
		background: var(--esc-dk-inner, #1c1c1c) !important;
		border-color: var(--esc-dk-line-strong, rgba(255, 255, 255, 0.12)) !important;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
	}
	html[data-theme="dark"] body.search .bg_vip #main > .cat-intro-card h2,
	html[data-theme="dark"] body.search .bg_content #content > .cat-intro-card h2 { color: #f5f5f7 !important; }
	html[data-theme="dark"] body.search .bg_vip #main > .cat-intro-card .vipgirlsintro,
	html[data-theme="dark"] body.search .bg_content #content > .cat-intro-card .introtxthome { color: #9ba1ac !important; }
}

/* ---- Category intro card (desktop) - owner 2026-09-03 mockup: the same card at full content width, the VIP badge on the
   LEFT (mobile keeps it on the right), 22px title + 15px grey copy in Söhne, the promo-card surface. >=769 only. ---- */
@media (min-width: 769px) {
	/* Filter row side to side: #catFilterBar spans the same 1200px as #main; its inner 14px padding kept the Sort-by and Asians
	   pills 14px inside the profile grid's edges. Desktop, non-sticky state only - the sticky bar keeps its own padding. */
	body.search #catFilterBar:not(.sticky):not(.sticky-filters) .cat-filter-inner { padding-left: 0; padding-right: 0; }
	body.search .bg_vip #main > .cat-intro-card,
	body.search .bg_content #content > .cat-intro-card {
		display: flex;
		align-items: center;
		gap: 22px;
		box-sizing: border-box;
		margin: 0 0 32px;   /* owner 2026-09-03 ("side to side like image"): the card, the filter pills row, the Diamond card and the Diamond row all span the VIP profile grid's edges - the bar's 14px inner padding is dropped on desktop below */
		padding: 22px 24px;
		background: #fff;
		border: 0;
		border-radius: 24px;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.10);
	}
	body.search .bg_vip #main > .cat-intro-card .cat-intro-card__text,
	body.search .bg_content #content > .cat-intro-card .cat-intro-card__text { min-width: 0; flex: 1 1 auto; }
	body.search .bg_vip #main > .cat-intro-card h2,
	body.search .bg_content #content > .cat-intro-card h2 {
		margin: 0 0 6px;
		padding: 0;
		font-family: "S\00F6hne", sans-serif !important;
		color: #141414;
		font-size: 22px !important;
		line-height: 28px;
		font-weight: 500;
		letter-spacing: -0.01em;
	}
	body.search .bg_vip #main > .cat-intro-card .vipgirlsintro,
	body.search .bg_content #content > .cat-intro-card .introtxthome {
		margin: 0;
		padding: 0;
		max-width: none;
		font-family: "S\00F6hne", sans-serif;
		color: #6b7280;
		font-size: 15px;
		line-height: 22px;
		font-weight: 400;
	}
	body.search .bg_vip #main > .cat-intro-card .cat-intro-card__icon,
	body.search .bg_content #content > .cat-intro-card .cat-intro-card__icon {
		display: block;
		order: -1;   /* markup keeps the icon after the text (mobile: right); desktop shows it first */
		flex: 0 0 auto;
		width: 64px;
		height: 64px;
		object-fit: contain;
	}
	html[data-theme="dark"] body.search .bg_vip #main > .cat-intro-card,
	html[data-theme="dark"] body.search .bg_content #content > .cat-intro-card {
		background: var(--esc-dk-inner, #1c1c1c) !important;
		box-shadow: 0 0 0 1px var(--esc-dk-line-strong, rgba(255, 255, 255, 0.12)), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
	}
	html[data-theme="dark"] body.search .bg_vip #main > .cat-intro-card h2,
	html[data-theme="dark"] body.search .bg_content #content > .cat-intro-card h2 { color: #f5f5f7 !important; }
	html[data-theme="dark"] body.search .bg_vip #main > .cat-intro-card .vipgirlsintro,
	html[data-theme="dark"] body.search .bg_content #content > .cat-intro-card .introtxthome { color: #9ba1ac !important; }
}

/* Intro card copy in National 2 Regular (owner 2026-09-03; faces declared in common/head.php). Both widths - the same
   selector as the mobile and desktop rules above, later in the sheet, so it wins on family only. */
body.search .bg_vip #main > .cat-intro-card .vipgirlsintro,
body.search .bg_content #content > .cat-intro-card .introtxthome {
	font-family: "National 2", "S\00F6hne", sans-serif;
	font-weight: 400;
}

/* "All … profiles" card icon (owner 2026-09-03, second render): the phone-with-chat-bubbles PNG is wide (216x174, real alpha),
   not a square badge like intro-vip.png - in the shared 72 / 64px square box it would sit small, so this card's icon gets a
   wider box with its own height (84px phone, 76px desktop). The VIP card keeps the square. */
@media (max-width: 768px) {
	body.search .bg_content #content > .cat-intro-card--all .cat-intro-card__icon { width: 84px; height: auto; }
}
@media (min-width: 769px) {
	body.search .bg_content #content > .cat-intro-card--all .cat-intro-card__icon { width: 76px; height: auto; }
	/* owner 2026-09-03 "a bit more padding from the top (after the VIP area)": the last VIP card sat 31px above this card
	   (the VIP section's 10px bottom padding + this section's 20px top padding); 18px more makes it a 48px section break.
	   Desktop only - the phone already has 41px (20 + 20). */
	body.search .bg_content #content > .cat-intro-card--all { margin-top: 18px; }
}

/* Filter bar -> VIP card (owner 2026-09-03 "a bit more padding"): the last filter pill sat 22px (desktop) / 23px (phone) above
   the VIP card; #main's top padding takes both to 32px - the gap the card already has to its grid on desktop. Padding, not a
   card margin: a margin collapses through #main + .bg_vip and shows the page ground as a line between the two bands (the
   mobile 4px rule above exists for the same reason). Category / search pages only - on the homepage the card sits under the
   search widget, not the filter bar, and keeps its spacing. */
@media (min-width: 769px) {
	body.search:not(.escortify-home-discovery) .bg_vip #main:has(> .cat-intro-card) { padding-top: 10px; }
}
@media (max-width: 768px) {
	body.search:not(.escortify-home-discovery) .bg_vip #main:has(> .cat-intro-card) { padding-top: 13px; }
}

/* Regular section on white like the VIP area (owner 2026-09-03): the main sheet paints .bg_content #f2f2f2 under the
   "All … profiles" card and grid while .bg_vip is #fff. The pagination block under the grid has no background of its own
   (the #f2f2f2 page ground showed through), so it takes the same white - otherwise it was a lone grey stripe between the
   ads and the white SEO copy. Light mode only - dark.css already puts the bands on var(--esc-dk-page), and the :not()
   guard keeps these rules out of the dark cascade entirely. */
html:not([data-theme="dark"]) body.search .bg_content,
html:not([data-theme="dark"]) body.search .escortify-search-pagination {
	background: #fff;
}

/* Listing card lines in National 2 (owner 2026-09-03): the suburb line ("CBD") and the italic status sentence
   ("737 Karangahape Road") under every card on category pages - National 2 Regular; the status line keeps its italic
   through the regular-italic face. Name, age and price stay Söhne. search-profile-card-32.css declares Söhne on the
   same selectors AND loads after this sheet (header.php), so the __metadata ancestor is added to outrank it. */
body.search .search-profile-card__metadata .search-profile-card__location-row,
body.search .search-profile-card__metadata .search-profile-card__location-text,
body.search .search-profile-card__metadata .search-profile-card__about {
	font-family: "National 2", "S\00F6hne", sans-serif;
	font-weight: 400;
}