/**
 * HP Blocksy Support — Listing Pages
 *
 * Listing cards, grid layout, search forms, and category pages.
 */

/* === Listing Cards ===
 * NOTE: Use :not(.hp-listing--view-page) to exclude the single-page row wrapper,
 * which also carries the .hp-listing class. overflow:hidden on the view-page row
 * clips sticky sidebar content and prevents height from expanding naturally.
 *
 * ROOT FIX — ExpertHive theme sets .hp-listing--view-block { display:flex }
 * with default flex-direction:row (horizontal). This means header(image) /
 * content(date) / footer(price) are THREE SIDE-BY-SIDE COLUMNS on desktop,
 * making date and price appear on the same visual line regardless of footer CSS.
 * We must force flex-direction:column here to get the vertical card layout
 * (image on top → content → footer stacked), and clear ExpertHive's 2rem padding
 * so the image is full-bleed.
 */
.hp-listing--view-block:not(.hp-listing--view-page) {
	flex-direction: column;
	padding: 0;
}

/* Header (image container) must span full card width in column layout.
 * ExpertHive sets flex:0 0 6.25rem (100px) for its horizontal design — reset. */
.hp-listing--view-block:not(.hp-listing--view-page) > .hp-listing__header {
	flex: none;
	width: 100%;
}

.hp-listing:not(.hp-listing--view-page) {
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--duration-normal, 0.25s) var(--ease-default, ease);
	background: var(--hp-color-surface, #fff);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(58, 53, 48, 0.08));
}

/*
 * BUG FIX: translateY(-2px) on hover caused jitter — the card shifted up 2px,
 * pushing the cursor outside the hover zone, which removed hover and dropped the
 * card back, re-entering hover → infinite oscillation. Fix: use box-shadow only
 * for the lift effect; image scale gives visual interest without moving hit area.
 */
.hp-listing:not(.hp-listing--view-page):hover {
	box-shadow: var(--shadow-md, 0 4px 16px rgba(58, 53, 48, 0.1));
}

/* === Listing Images ===
 * HP injects data-component="carousel-slider" + inline style="aspect-ratio:X"
 * on .hp-listing__image in card view. We override with !important to enforce
 * a fixed 160px height that matches the /bookings/ card image style.
 * The !important on height beats the inline computed height from aspect-ratio.
 */
.hp-listing--view-block .hp-listing__image,
.hp-listing--view-block .hp-listing__images {
	overflow: hidden;
	position: relative;
	height: 160px !important;
	aspect-ratio: unset !important;
	background: var(--hp-color-surface, #f3f4f6);
}

.hp-listing--view-block .hp-listing__image img,
.hp-listing--view-block .hp-listing__images img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--duration-normal, 0.3s) var(--ease-default, ease);
}

.hp-listing:hover .hp-listing__image img,
.hp-listing:hover .hp-listing__images img {
	transform: scale(1.04);
}

/* === Listings Grid === */
.hp-listings {
	display: grid;
	gap: 24px;
}

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

.hp-listings--columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

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

@media (max-width: 1024px) {
	.hp-listings--columns-4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.hp-listings--columns-3,
	.hp-listings--columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.hp-listings--columns-2,
	.hp-listings--columns-3,
	.hp-listings--columns-4 {
		grid-template-columns: 1fr;
	}
}

/* === Search Forms === */
.hp-form--listing-search,
.hp-form--vendor-search {
	background: var(--hp-color-surface, #f8f8f8);
	padding: 20px;
	border-radius: var(--radius-md);
	margin-bottom: 30px;
}

.hp-form--listing-search .hp-row,
.hp-form--vendor-search .hp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.hp-form--listing-search .hp-field,
.hp-form--vendor-search .hp-field {
	flex: 1;
	min-width: 200px;
}

/* === Category Page === */
.hp-listing-categories {
	display: grid;
	gap: 16px;
}

.hp-listing-category__link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	padding: 12px 16px;
	border-radius: var(--hp-border-radius, 3px);
	background: var(--hp-color-surface, #f8f8f8);
	transition: background var(--duration-normal, 0.2s) var(--ease-default, ease);
}

.hp-listing-category__link:hover {
	background: var(--hp-color-border, #eee);
}

/* === Listing Card Content — /bookings/ style alignment === */
.hp-listing--view-block .hp-listing__content {
	padding: 12px 16px 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hp-listing--view-block .hp-listing__footer {
	padding: 0 16px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* Title — 16px / 600 */
.hp-listing--view-block .hp-listing__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 4px;
}

.hp-listing--view-block .hp-listing__title a {
	color: var(--hp-color-text, #1a1a2e);
	text-decoration: none;
	transition: color var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.hp-listing--view-block .hp-listing__title a:hover {
	color: var(--color-text-primary, #3A3530);
	text-decoration: underline;
	text-decoration-color: var(--hp-color-primary, #A8B9A4);
	text-underline-offset: 2px;
}

/* Details primary — flex row: date only visible here; category hidden (shown in vendor-row on archive).
 * On vendor profile page, vendor-row is hidden and category is shown instead — see hpbs-vendor-profile.css. */
.hp-listing--view-block .hp-listing__details--primary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 4px;
	color: var(--color-text-tertiary);
}

/* Hide category inside details-primary — already shown in .hpbs-listing-vendor-row */
.hp-listing--view-block .hp-listing__details--primary .hp-listing__categories,
.hp-listing--view-block .hp-listing__details--primary .hp-listing__category {
	display: none;
}

/* Created date — muted, 0.82rem */
.hp-listing--view-block .hp-listing__date,
.hp-listing--view-block .hp-listing__created-date {
	font-size: 0.82rem;
	color: var(--color-text-tertiary);
}

/* Attributes secondary/ternary (meta like tags, description) */
.hp-listing--view-block .hp-listing__attributes--secondary,
.hp-listing--view-block .hp-listing__attributes--ternary {
	font-size: 13px;
	color: var(--hp-color-muted, #666666);
	margin-bottom: 4px;
}

/* Price / hourly rate — bold, dark text (#A8B9A4 fails 4.5:1 at 16px normal weight) */
.hp-listing--view-block .hp-listing__footer .hp-listing__attributes--primary {
	margin: 0;
}

.hp-listing--view-block .hp-listing__footer .hp-listing__attribute {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text-primary, #3A3530);
}

/* === Listing Single Page === */

/*
 * Replace JS sticky-sidebar (jquery.sticky-sidebar) with CSS position:sticky.
 *
 * HP enqueues sticky-sidebar-js which applies transform:translateY() via JS
 * on every scroll event → causes the sidebar to visually "float/drift".
 * We dequeue that script in class-hpbs-asset-manager.php and use native CSS
 * sticky here instead. GPU-accelerated, zero JS overhead, no visual lag.
 *
 * Requirements for position:sticky to work:
 * 1. Sidebar parent (.hp-row) must NOT have overflow:hidden/auto.
 * 2. Sidebar must have align-self:flex-start so it doesn't stretch full height.
 * 3. The .inner-wrapper-sticky that JS left behind must be reset to static.
 */
.hp-listing--view-page .hp-page__sidebar {
	position: sticky;
	top: 32px;
	align-self: flex-start;
}

/* Reset any inline styles / classes left by jquery.sticky-sidebar */
.hp-listing--view-page .hp-page__sidebar .inner-wrapper-sticky {
	position: static !important;
	transform: none !important;
	top: auto !important;
	width: auto !important;
}

.hp-listing--view-page .hp-listing__images-carousel {
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.hp-listing--view-page .hp-listing__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 16px;
	font-family: var(--hp-font-heading, inherit);
}

/* =========================================================
 * Listing Sidebar — Vendor Profile Card
 * Centered column layout: avatar → name → date → attributes → buttons
 * ========================================================= */

/* Card wrapper — vertical column, centered */
.hp-page__sidebar .hp-vendor--view-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	background: var(--color-bg-secondary, #FAF9F6);
	border: 1px solid var(--hp-color-border, #e5e7eb);
	border-radius: var(--radius-md);
	padding: 16px;
	margin-top: 16px;
	box-shadow: var(--shadow-sm, 0 1px 4px rgba(58, 53, 48, 0.06));
	text-align: center;
}

/* Section label "服務提供者" */
.hp-page__sidebar .hp-vendor--view-block::before {
	content: '服務提供者';
	width: 100%;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-tertiary);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hp-color-border, #f0f0f0);
	margin-bottom: 14px;
	text-align: center;
}

/* Avatar — centered, larger for column layout */
.hp-page__sidebar .hp-vendor--view-block > header {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__image {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--hp-color-border, #e5e7eb);
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__image img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 50%;
	transition: none !important;
	transform: none !important;
}

.hp-page__sidebar .hp-vendor--view-block:hover .hp-vendor__image img {
	transform: none !important;
}

/* Content section — full width, centered */
.hp-page__sidebar .hp-vendor--view-block > .hp-vendor__content {
	width: 100%;
	min-width: 0;
}

/* Vendor name — centered, line 2 after avatar */
.hp-page__sidebar .hp-vendor--view-block .hp-vendor__name {
	margin: 8px 0 4px;
	font-size: 1.6rem;
	line-height: 2rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__name a {
	font-weight: 600;
	color: var(--hp-color-text, #111827);
	text-decoration: none;
	display: inline;
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__name a:hover {
	color: var(--color-text-primary, #3A3530);
	text-decoration: underline;
	text-decoration-color: var(--hp-color-primary, #A8B9A4);
	text-underline-offset: 2px;
}

/* Join date — 12px, centered */
.hp-page__sidebar .hp-vendor--view-block .hp-vendor__details--primary {
	text-align: center;
	line-height: 1.4;
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__date {
	font-size: 12px;
	color: var(--color-text-tertiary);
}

/* Secondary attributes — own line with separator above; hidden when empty */
.hp-page__sidebar .hp-vendor--view-block .hp-vendor__attributes--secondary:empty {
	display: none;
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__attributes--secondary {
	width: 100%;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--hp-color-border, #f0f0f0);
	font-size: 12px;
	color: var(--color-text-tertiary);
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__attributes--secondary .hp-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 12px;
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__attributes--secondary .hp-col-lg-6,
.hp-page__sidebar .hp-vendor--view-block .hp-vendor__attributes--secondary .hp-col-xs-12 {
	flex: 0 0 auto;
	width: auto;
	padding: 0;
}

/* Hide empty attribute blocks */
.hp-page__sidebar .hp-vendor--view-block .hp-vendor__attributes--primary:empty {
	display: none;
}

/* Primary attributes (e.g. hourly rate) — full width row above buttons */
.hp-page__sidebar .hp-vendor--view-block .hp-vendor__attributes--primary {
	flex-basis: 100%;
	font-size: 13px;
	font-weight: 600;
	color: var(--hp-color-text, #111827);
	text-align: center;
	margin-bottom: 0;
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__attribute--hourly-rate {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Footer — flex-wrap so primary attrs span full width, then buttons below */
.hp-page__sidebar .hp-vendor--view-block > footer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--hp-color-border, #f0f0f0);
}

/* Actions div — pass-through flex so message link takes full flex: 1 */
.hp-page__sidebar .hp-vendor--view-block .hp-vendor__actions--primary {
	flex: 1;
	display: flex;
}

/* "傳送訊息" — 同「個人檔案」按鈕風格 */
.hp-page__sidebar .hp-vendor--view-block .hp-vendor__action--message {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hp-color-primary, #A8B9A4);
	background: transparent;
	color: var(--color-text-primary, #3A3530); /* brand green fails 4.5:1 as text; border carries the color */
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--duration-normal, 0.2s) var(--ease-default, ease), border-color var(--duration-normal, 0.2s) var(--ease-default, ease), color var(--duration-normal, 0.2s) var(--ease-default, ease);
	white-space: nowrap;
	min-height: 44px;
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__action--message::after {
	content: '傳送訊息';
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__action--message:hover {
	background: var(--hp-color-primary, #A8B9A4);
	border-color: var(--hp-color-primary, #A8B9A4);
	color: var(--color-text-inverse, #FAF3E3);
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__action--message:focus-visible {
	outline: 2px solid var(--color-text-primary, #3A3530); /* 14:1 ✅ */
	outline-offset: 2px;
}

/* "品牌主頁" CTA — injected by hpbs-listing-vendor-card.js */
.hpbs-vendor-profile-cta {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hp-color-primary, #A8B9A4);
	background: transparent;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-primary, #3A3530); /* border carries brand color; text must meet 4.5:1 */
	text-decoration: none;
	transition: background var(--duration-normal, 0.2s) var(--ease-default, ease), border-color var(--duration-normal, 0.2s) var(--ease-default, ease), color var(--duration-normal, 0.2s) var(--ease-default, ease);
	cursor: pointer;
	white-space: nowrap;
	min-height: 44px;
}

.hpbs-vendor-profile-cta:hover {
	background: var(--hp-color-primary, #A8B9A4);
	border-color: var(--hp-color-primary, #A8B9A4);
	color: var(--color-text-inverse, #FAF3E3);
}

.hpbs-vendor-profile-cta:focus-visible {
	outline: 2px solid var(--color-text-primary, #3A3530); /* 14:1 ✅ */
	outline-offset: 2px;
}

/* =========================================================
 * Listing Card Actions — icon-button style (matches /artist/ vendor cards)
 *
 * HP sets opacity:0.5 on all .hp-listing__action inside view-block cards.
 * We override to opacity:1 and style both message + favorite as 36×36
 * circular icon buttons — consistent with vendor action icons on /artist/.
 * ========================================================= */

/* Restore full opacity — HP dims listing actions to 0.5 in view-block context */
.hp-listing--view-block .hp-listing__actions--primary {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hp-listing--view-block .hp-listing__actions--primary .hp-listing__action {
	opacity: 1;
}

/* Message action — circular icon button */
.hp-listing__action--message {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	background: color-mix(in oklch, var(--hp-color-primary, #A8B9A4) 12%, transparent);
	color: var(--color-text-primary, #3A3530); /* dark icon on light-green tint = 14:1 ✅ WCAG 1.4.11 */
	text-decoration: none;
	cursor: pointer;
	border: none;
	padding: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	transition: background var(--duration-fast, 0.15s) var(--ease-default, ease), color var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.hp-listing__action--message:hover {
	background: color-mix(in oklch, var(--hp-color-primary, #A8B9A4) 22%, transparent);
	color: var(--color-text-primary, #3A3530);
	transform: none;
}

.hp-listing__action--message:focus-visible {
	outline: 2px solid var(--color-text-primary, #3A3530); /* 14:1 ✅ */
	outline-offset: 2px;
}

/* Favorite action — circular icon button */
.hp-listing--view-block .hp-listing__action--favorite {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	background: transparent;
	color: var(--color-gray-medium);
	cursor: pointer;
	text-decoration: none;
	font-size: 15px;
	line-height: 1;
	transition: color var(--duration-fast, 0.15s) var(--ease-default, ease), background var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.hp-listing--view-block .hp-listing__action--favorite:hover {
	color: var(--color-error);
	background: color-mix(in oklch, var(--color-error) 10%, transparent);
}

.hp-listing--view-block .hp-listing__action--favorite[data-state="active"],
.hp-listing--view-block .hp-listing__action--favorite.hp-active {
	color: var(--color-error);
}

/* =========================================================
 * Listing Card — Vendor Row (injected by HPBS_Listing_Card)
 * Matches /bookings/ vendor+category row pattern.
 * ========================================================= */

.hpbs-listing-vendor-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 8px;
	line-height: 1.4;
}

.hpbs-lc-vendor {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	color: var(--color-text-tertiary);
}

.hpbs-lc-vendor-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.hpbs-lc-vendor a {
	color: var(--color-text-tertiary);
	text-decoration: none;
	transition: color var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.hpbs-lc-vendor a:hover {
	color: var(--color-text-primary, #3A3530);
	text-decoration: underline;
	text-decoration-color: var(--hp-color-primary, #A8B9A4);
	text-underline-offset: 2px;
}

.hpbs-lc-category {
	display: inline-flex;
	align-items: center;
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-tertiary);
}

.hpbs-lc-vendor + .hpbs-lc-category::before {
	content: '·';
	margin-right: 8px;
	color: var(--color-gray-light);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.hpbs-lc-category a {
	color: var(--color-text-tertiary);
	text-decoration: none;
	transition: color var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.hpbs-lc-category a:hover {
	color: var(--color-text-primary, #3A3530);
	text-decoration: underline;
	text-decoration-color: var(--hp-color-primary, #A8B9A4);
	text-underline-offset: 2px;
}

/* =========================================================
 * Vendor Follow Button — injected by hpbs-vendor-follow.js
 * Appears in vendor card footer (sidebar & vendor profile page).
 * ========================================================= */

.hpbs-follow-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 10px;
	min-height: 44px;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--color-gray-medium);
	background: transparent;
	color: var(--color-text-tertiary);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: border-color var(--duration-fast, 0.15s) var(--ease-default, ease), color var(--duration-fast, 0.15s) var(--ease-default, ease), background var(--duration-fast, 0.15s) var(--ease-default, ease);
	white-space: nowrap;
}

.hpbs-follow-btn .hp-icon {
	font-size: 13px;
	color: var(--color-gray-medium); /* unfollowed: grey heart */
	transition: color var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.hpbs-follow-btn:hover {
	border-color: var(--color-error);
	color: var(--color-error);
}

.hpbs-follow-btn:hover .hp-icon {
	color: var(--color-error);
}

/* Active / Following state — solid red heart */
.hpbs-follow-btn--active {
	border-color: var(--color-error);
	background: color-mix(in oklch, var(--color-error) 8%, transparent);
	color: var(--color-error);
}

.hpbs-follow-btn--active .hp-icon {
	color: var(--color-error);
}

.hpbs-follow-btn--active:hover {
	border-color: var(--color-pink-dark);
	background: color-mix(in oklch, var(--color-error) 14%, transparent);
	color: var(--color-pink-dark);
}

/* Loading state — color-mix instead of opacity: solid shape, no stacking-context side effects */
.hpbs-follow-btn--loading {
	color: color-mix(in oklch, currentColor 55%, var(--color-bg-secondary, #FAF9F6));
	border-color: color-mix(in oklch, var(--color-bg-divider, #E8E3D9) 80%, transparent);
	pointer-events: none;
}

/* Focus ring */
.hpbs-follow-btn:focus-visible {
	outline: 2px solid var(--color-error);
	outline-offset: 2px;
}

/* Followers count badge */
.hpbs-follow-count {
	font-size: 11px;
	font-weight: 500;
	color: inherit;
	opacity: 0.75;
}

/* Vendor profile page: larger button */
.hp-vendor--view-page .hpbs-follow-btn {
	min-height: 44px;
	padding: 0 16px;
	font-size: 13px;
}

/* Ensure the actions wrap accommodates the follow button */
.hp-vendor__actions--primary {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Listing sidebar: all 3 buttons equal-width, single row, uniform radius */
.hp-page__sidebar .hp-vendor--view-block .hpbs-follow-btn {
	flex: 1;
	justify-content: center;
	border-radius: var(--radius-sm);
	border-width: 1px;
	border-color: var(--hp-color-primary, #A8B9A4);
	color: var(--color-text-primary, #3A3530); /* border carries brand; text needs 4.5:1 */
}

.hp-page__sidebar .hp-vendor--view-block .hpbs-follow-btn--active {
	border-color: var(--color-error);
	color: var(--color-error);
}

/* Subscribe button: standalone full-width row in sidebar */
.hp-page__sidebar .hp-vendor--view-block > .hp-vendor__footer > .hpbs-subscribe-btn {
	display: flex;
	width: 100%;
	justify-content: center;
	border-radius: var(--radius-sm);
	border-width: 1px;
	border-color: var(--hp-color-primary, #A8B9A4);
	color: var(--color-text-primary, #3A3530);
	margin-top: 8px;
}

.hp-page__sidebar .hp-vendor--view-block .hpbs-subscribe-btn--active {
	border-color: var(--hp-color-primary, #A8B9A4);
	color: var(--color-text-primary, #3A3530);
}

.hp-page__sidebar .hp-vendor--view-block .hp-vendor__actions--primary {
	flex-wrap: nowrap;
}

/* ========================================================= *
 * Subscribe Button — Newsletter toggle (capsule, blue theme)
 * ========================================================= */

.hpbs-subscribe-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 10px;
	min-height: 44px;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--color-gray-medium);
	background: transparent;
	color: var(--color-text-tertiary);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: border-color var(--duration-fast, 0.15s) var(--ease-default, ease), color var(--duration-fast, 0.15s) var(--ease-default, ease), background var(--duration-fast, 0.15s) var(--ease-default, ease);
	white-space: nowrap;
}

.hpbs-subscribe-btn .hp-icon {
	font-size: 13px;
	color: var(--color-gray-medium);
	transition: color var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.hpbs-subscribe-btn:hover {
	border-color: var(--hp-color-primary, #A8B9A4);
	color: var(--color-text-primary, #3A3530);
}

.hpbs-subscribe-btn:hover .hp-icon {
	color: var(--color-text-primary, #3A3530);
}

/* Active / Subscribed state — tinted bg; dark text for AA contrast on light green tint */
.hpbs-subscribe-btn--active {
	border-color: var(--hp-color-primary, #A8B9A4);
	background: color-mix(in oklch, var(--hp-color-primary, #A8B9A4) 8%, transparent);
	color: var(--color-text-primary, #3A3530); /* dark on light-green tint = 14:1 ✅ */
}

.hpbs-subscribe-btn--active .hp-icon {
	color: var(--color-text-primary, #3A3530);
}

.hpbs-subscribe-btn--active:hover {
	border-color: var(--hp-color-primary-hover, #8FA08A);
	background: color-mix(in oklch, var(--hp-color-primary, #A8B9A4) 14%, transparent);
	color: var(--color-text-primary, #3A3530);
}

/* Loading state — matches follow-btn pattern */
.hpbs-subscribe-btn--loading {
	color: color-mix(in oklch, currentColor 55%, var(--color-bg-secondary, #FAF9F6));
	border-color: color-mix(in oklch, var(--color-bg-divider, #E8E3D9) 80%, transparent);
	pointer-events: none;
}

.hpbs-subscribe-btn:focus-visible {
	outline: 2px solid var(--color-text-primary, #3A3530); /* 14:1 ✅ */
	outline-offset: 2px;
}

.hpbs-subscribe-count {
	font-size: 11px;
	font-weight: 500;
	color: inherit;
	opacity: 0.75;
}

/* Vendor profile page: larger button */
.hp-vendor--view-page .hpbs-subscribe-btn {
	min-height: 44px;
	padding: 0 16px;
	font-size: 13px;
}

/* ── Vendor Stats Bar ──────────────────────────────────────────────── */

.hpbs-vendor-stats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 8px 0 6px;
	border-top: 1px solid var(--hp-color-border, #f0f0f0);
	font-size: 0.8rem;
	color: var(--color-text-tertiary);
	line-height: 1.3;
}

.hpbs-vendor-stats__item {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	white-space: nowrap;
}

.hpbs-vendor-stats__value {
	font-weight: 700;
	color: var(--color-text-primary);
	font-size: 0.88rem;
}

.hpbs-vendor-stats__label {
	color: var(--color-text-tertiary);
}

.hpbs-vendor-stats__sep {
	color: var(--color-bg-divider);
	font-size: 0.75rem;
	line-height: 1;
}

/* Profile page: slightly larger */
.hpbs-vendor-stats--profile {
	font-size: 0.88rem;
	gap: 6px 14px;
	padding: 10px 0;
}

.hpbs-vendor-stats--profile .hpbs-vendor-stats__value {
	font-size: 1rem;
}

/* Favorite button styles live in hpbs-favorite-btn.css (canonical home). */