/*
 * Preloved Bazaar — cosmetic polish
 *
 * One bundled, CSS-only pass for 4 small visual fixes flagged in
 * REGRESSION-PUBLIC-2026-05-29.md + REGRESSION-DASHBOARD-2026-05-29.md.
 * Every rule below is scoped tightly to the surface it targets so it can't
 * leak into other surfaces:
 *
 *   1. /bag/         — center the page H1 when the bag is EMPTY so it
 *                      visually matches the centered empty-state copy + CTA.
 *   2. /notifications/ — same idea: center the H1 when the empty state is
 *                      rendered, so the layout doesn't read as left/center
 *                      mismatched.
 *   3. /cart/        — fail-safe for the "SOLD BY" vendor-avatar circle when
 *                      Dokan's vendor->get_avatar() returns a raw URL string
 *                      (no <img>): hide the leaked URL text so the circle
 *                      reads as a clean placeholder instead of a clipped
 *                      "es/do/iges" fragment colliding with the SOLD BY
 *                      label.
 *   4. Add-Product editor — re-theme the MAIN PHOTO "UPLOAD" button (the
 *                      WP-core media-upload trigger inside the image_id
 *                      field) from Dokan's default purple to the brand
 *                      teal, matching every other CTA on the page.
 *
 * Enqueued by Compat\CosmeticPolish on wp_enqueue_scripts (frontend only).
 * Handle 'pb-cosmetic-polish'. Loaded after pb-design-system + the
 * per-surface stylesheets, so :has() rules win on source order, not on
 * specificity inflation.
 *
 * @since 2026-05-29
 */

/* ---- 1 + 2. Bag + Notifications: center H1 when the page is in its empty
   state. The body has class .pb-bag-page or .pb-notifications-page (added by
   Compat\CosmeticPolish via body_class filter, so we can scope this from
   stable hooks rather than a brittle :has() chain). Inside, the H1 lives at
   .pb-bag__title / .pb-notifications__title. Centering both the H1 wrapper
   AND the H1 itself keeps the rule robust to header-vs-bare-h1 markup
   differences (notifications wraps the h1 in <header class="__header"
   style="display:flex; justify-content:space-between">; the flex parent
   needs justify-content:center, not just text-align). ---- */
body.pb-cp-bag-empty .pb-bag__title,
body.pb-cp-notifications-empty .pb-notifications__title {
	text-align: center !important;
}
body.pb-cp-notifications-empty .pb-notifications__header {
	justify-content: center !important;
}

/* ---- 3. Cart vendor-avatar URL-text fail-safe. When Dokan returns a URL
   string instead of an <img>, the template prints the URL raw inside the
   .pb-vendor-card__avatar circle. The 40x40 overflow:hidden circle then
   shows a clipped fragment of the URL text ("es/do/iges") which visually
   collides with the SOLD BY label. CSS-only fix: when the avatar has no
   <img> and no <svg> child, hide the text (font-size 0 + transparent color).
   The teal-tint background of .pb-vendor-card__avatar then reads as a clean
   placeholder circle. Real <img> avatars are unaffected (they don't match
   :not(:has(img))).

   Belt + braces: also apply word-break/overflow rules so even older browsers
   without :has() support don't render the URL string outside the circle. ---- */
.pb-vendor-card__avatar {
	overflow: hidden;
	text-overflow: clip;
	word-break: break-all;
}
.pb-vendor-card__avatar:not(:has(img)):not(:has(svg)):not(.pb-vendor-card__avatar--placeholder) {
	font-size: 0 !important;
	color: transparent !important;
	line-height: 0 !important;
}

/* ---- 4. Add-Product editor MAIN PHOTO upload button: brand teal, not
   Dokan-purple. The field is keyed by class .dokan-form-field-image_id
   (verified live; NOT an id — see CLAUDE.md "editor fields keyed by class"
   gotcha). Inside the field, the WP-core media-modal trigger is rendered
   as a <button>. We also scope under .dokan-product-product-editor so this
   only fires inside the React product editor route, never on a sibling
   image field on a different Dokan page. Hover + focus variants included.

   `!important` is needed because @wordpress/components Buttons set their
   colors via inline CSS-vars (--wp-admin-theme-color, --wp-components-color-
   accent) which override stylesheet declarations otherwise. We override
   both the resolved color properties AND the underlying vars. ---- */
.dokan-product-product-editor .dokan-form-field-image_id button,
.dokan-product-product-editor [class*="dokan-form-field-image_id"] button,
.dokan-product-product-editor .dataforms-layouts-card__field:has(.dokan-form-field-image_id) button,
.dokan-product-product-editor .dataforms-layouts-card__field:has([class*="dokan-form-field-image_id"]) button {
	/* CSS-var override — preempts @wordpress/components default theming */
	--wp-admin-theme-color: var(--pb-primary, #2095b8) !important;
	--wp-components-color-accent: var(--pb-primary, #2095b8) !important;
	--wp-components-color-accent-darker-10: var(--pb-primary-dark, #187aa0) !important;
	--wp-components-color-accent-darker-20: var(--pb-primary-dark, #187aa0) !important;
}
.dokan-product-product-editor .dokan-form-field-image_id button,
.dokan-product-product-editor [class*="dokan-form-field-image_id"] button,
.dokan-product-product-editor .dataforms-layouts-card__field:has(.dokan-form-field-image_id) button,
.dokan-product-product-editor .dataforms-layouts-card__field:has([class*="dokan-form-field-image_id"]) button {
	background-color: var(--pb-primary, #2095b8) !important;
	border-color: var(--pb-primary, #2095b8) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}
.dokan-product-product-editor .dokan-form-field-image_id button:hover,
.dokan-product-product-editor [class*="dokan-form-field-image_id"] button:hover,
.dokan-product-product-editor .dataforms-layouts-card__field:has(.dokan-form-field-image_id) button:hover,
.dokan-product-product-editor .dataforms-layouts-card__field:has([class*="dokan-form-field-image_id"]) button:hover {
	background-color: var(--pb-primary-dark, #187aa0) !important;
	border-color: var(--pb-primary-dark, #187aa0) !important;
	color: #ffffff !important;
}
.dokan-product-product-editor .dokan-form-field-image_id button:focus,
.dokan-product-product-editor .dokan-form-field-image_id button:focus-visible,
.dokan-product-product-editor [class*="dokan-form-field-image_id"] button:focus,
.dokan-product-product-editor [class*="dokan-form-field-image_id"] button:focus-visible {
	outline: 2px solid var(--pb-primary, #2095b8) !important;
	outline-offset: 2px !important;
}
/* The SVG upload icon inside the button — flip to white on the teal fill. */
.dokan-product-product-editor .dokan-form-field-image_id button svg,
.dokan-product-product-editor [class*="dokan-form-field-image_id"] button svg {
	fill: currentColor !important;
}