/* ============================================================================
   Worklane — HivePress marketplace CSS override layer
   Loaded ONLY on HP marketplace pages (wl_is_hivepress_page() = true).
   Depends on: main-freelance-global (design token aliases must resolve first).

   Strategy: CSS over existing hp-* BEM classes — do NOT restructure HP DOM.
   Scope selectors with body.hp-template--* to target specific page types.

   Real HP DOM structure (discovered 2026-05-31 audit):
   CATALOG pages (.hp-template--requests-view-page / --listings-view-page):
     .hp-page.site-main (display:block → we set display:grid)
       .hp-page__header  (search bar, full-width)
       .hp-row (display:contents — dissolve into hp-page grid)
         .hp-page__sidebar.hp-col-sm-4 (col 1)
         .hp-page__content.hp-col-sm-8 (col 2)
           .hp-page__topbar (sort + result count)
           div > .hp-requests.hp-grid (cards grid)
             .hp-row (display:contents)
               .hp-grid__item.hp-col-sm-12 × N (each card wrapper)

   FREELANCERS catalog (.hp-template--listings-view-page):
     Same as above, but cards in .hp-listings.hp-grid with .hp-col-sm-6 items.

   PROJECT DETAIL (.hp-template--request-view-page):
     .hp-page.site-main
       .hp-page__header (breadcrumb area)
       .hp-row (display:contents)
         .hp-page__content.hp-col-sm-8 (main column with title/desc/bid form)
         .hp-page__sidebar.hp-col-sm-4 (vendor block)

   FREELANCER PROFILE (.hp-template--listing-view-page):
     .hp-page.site-main
       .hp-row.hp-listing.hp-listing--view-page (display:contents)
         .hp-page__content.hp-col-sm-8 (profile header h1 + sections + reviews)
         .hp-page__sidebar.hp-col-sm-4 (stat card)

   Structure:
   1.  HP baseline reset / dark-theme foundation
   2.  Page layout shell (hp-page, hp-row, hp-col-*)
   3.  HP form reset → wl-* form appearance
   4.  HP buttons → wl-btn appearance
   5.  Jobs catalog  (body.hp-template--requests-view-page)
   6.  Project detail (body.hp-template--request-view-page)
   7.  Freelancers catalog (body.hp-template--listings-view-page)
   8.  Freelancer profile  (body.hp-template--listing-view-page)
   9.  HP status badges (hp-status--*)
   10. select2 dark theme
   11. flatpickr dark theme
   12. HP modal dark theme
   13. HP no-results / loading states
   14. HP pagination
   15. HP widget (filter sidebar)
   16. HP rating stars
   ============================================================================ */

/* ============================================================================
   1. HP BASELINE — Dark-theme foundation
   ============================================================================ */

/*
 * Remove HP's own background, typography, and link colours globally on HP pages.
 * HP resets are aggressive; we override at the .hp-page scope.
 */
.hp-page {
  background: var(--color-base);
  color: var(--color-contrast);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
}

.hp-page a:not([class*="hp-button"]):not([class*="wl-btn"]):not([class*="hp-menu"]):not(.page-numbers) {
  color: var(--color-accent-1);
  transition: color var(--transition);
}
.hp-page a:not([class*="hp-button"]):not([class*="wl-btn"]):not([class*="hp-menu"]):not(.page-numbers):hover {
  color: var(--color-accent-1-hover);
}

.hp-page h1, .hp-page h2, .hp-page h3, .hp-page h4 {
  color: var(--color-contrast);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* HP often wraps content in .hp-block – strip excess padding */
.hp-block { margin: 0; padding: 0; }

/* ============================================================================
   2. PAGE LAYOUT SHELL
   HP DOM: .hp-page > .hp-page__header (full-width) + .hp-row > sidebar + content
   Fix: make .hp-page a grid; .hp-row dissolves (display:contents); header spans
   full width; sidebar + content each get one grid column.
   ============================================================================ */

/* HP's 12-column float grid (grid.min.css) — reset floats, use our grid */
.hp-row::after { content: none; }
/* dissolve .hp-row into .hp-page grid — must override HP's flex on .hp-listing--view-page */
.hp-row { display: contents !important; }

/* Reset HP col percentage widths and max-widths set by grid.min.css */
.hp-col-sm-4,
.hp-col-sm-8,
.hp-col-sm-12,
.hp-col-xs-12 {
  float: none !important;
  width: auto !important;
  max-width: unset !important;
  padding: 0 !important;
  /* HP grid.min.css uses media-query column sizing — override all */
  flex: unset !important;
}

/* ============================================================================
   3. HP FORM RESET → wl-* form appearance
   HP renders forms as <form class="hp-form hp-form--*">
   Fields: <div class="hp-field hp-field--text"> <input class=""> </div>
   ============================================================================ */

.hp-form { background: transparent; border: 0; padding: 0; margin: 0; }

/* Labels */
.hp-form .hp-field__label,
.hp-form label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-contrast-muted);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--spacing-20);
}

/* Inputs, selects, textareas */
.hp-form input[type="text"],
.hp-form input[type="email"],
.hp-form input[type="password"],
.hp-form input[type="number"],
.hp-form input[type="search"],
.hp-form input[type="url"],
.hp-form input[type="tel"],
.hp-form textarea,
.hp-form select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--spacing-30) var(--spacing-40);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.hp-form input::placeholder,
.hp-form textarea::placeholder { color: var(--color-contrast-subtle); }

.hp-form input:focus,
.hp-form textarea:focus,
.hp-form select:focus {
  outline: none;
  border-color: var(--color-accent-1);
  box-shadow: var(--shadow-focus);
}

.hp-form textarea { min-height: 7.5rem; resize: vertical; }

/* Field wrapper spacing */
.hp-form .hp-form__field,
.hp-form .hp-field { margin-bottom: var(--spacing-40); }
.hp-form .hp-form__field:last-child,
.hp-form .hp-field:last-child { margin-bottom: 0; }

/* Form messages (errors / success) */
.hp-form .hp-form__messages { margin-top: var(--spacing-30); font-size: var(--font-size-sm); }
.hp-form .hp-form__messages--error { color: var(--color-error-fg); }
.hp-form .hp-form__messages--success { color: var(--color-success-fg); }

/* Required star */
.hp-form .hp-field__required { color: var(--color-accent-1); }

/* ============================================================================
   4. HP BUTTONS → wl-btn appearance
   HP renders CTAs in multiple ways:
   a) <a class="hp-button hp-button--primary">     ← standard HP button
   b) <button class="hp-form__button button-primary alt button hp-field">  ← form submits
   c) <button class="hp-listing__action … button button--large button--primary alt"> ← action CTAs
   All three must look like our wl-btn system.
   ============================================================================ */

/* Base button shape — applied to all HP button variants */
.hp-button,
.hp-listing__action[class*="button"],
.hp-form .hp-form__button input[type="submit"],
.hp-form .hp-form__button button[type="submit"],
.hp-form button[type="submit"].button-primary,
button.button-primary.alt.hp-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-20);
  min-height: 2.75rem;
  padding: 0 var(--spacing-50);
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}

/* Primary: emerald */
.hp-button--primary,
.hp-listing__action--offer,
.hp-listing__action--message[class*="button--primary"],
.hp-form .hp-form__button input[type="submit"],
.hp-form .hp-form__button button[type="submit"]:not(.hp-button--secondary):not(.hp-button--link),
.hp-form button[type="submit"].button-primary,
button.button-primary.alt.hp-field {
  background: var(--color-accent-1);
  color: var(--color-accent-on);
}
.hp-button--primary:hover,
.hp-listing__action--offer:hover,
.hp-listing__action--message[class*="button--primary"]:hover,
.hp-form .hp-form__button input[type="submit"]:hover,
.hp-form .hp-form__button button[type="submit"]:hover,
.hp-form button[type="submit"].button-primary:hover,
button.button-primary.alt.hp-field:hover {
  background: var(--color-accent-1-hover);
  color: var(--color-accent-on);
}

/* hp-button--wide (Make an Offer CTA that opens modal) */
.hp-button--wide {
  width: 100%;
  justify-content: center;
}

.hp-button--secondary {
  background: var(--color-surface-2);
  color: var(--color-contrast);
  border-color: var(--color-neutral-strong);
}
.hp-button--secondary:hover { background: var(--color-surface-3); border-color: var(--color-accent-border); }

.hp-button--link {
  background: transparent;
  color: var(--color-accent-1);
  border-color: transparent;
  padding-inline: 0;
  min-height: auto;
}
.hp-button--link:hover { color: var(--color-accent-1-hover); text-decoration: underline; }

/* ============================================================================
   5. JOBS CATALOG (body.hp-template--requests-view-page)
   Real DOM: .hp-page > .hp-page__header (search bar) + .hp-row (contents) >
             .hp-page__sidebar + .hp-page__content >
               .hp-page__topbar + div > .hp-requests.hp-grid > .hp-row (contents) >
                 .hp-grid__item.hp-col-sm-12 × N
   ============================================================================ */

body.hp-template--requests-view-page {
  background: var(--color-base);
}

/*
 * Main layout: .hp-page becomes a 2-col grid.
 * .hp-page__header spans both columns (full width, area "header").
 * .hp-row dissolves → .hp-page__sidebar (area "sidebar") + .hp-page__content (area "main").
 */
body.hp-template--requests-view-page .hp-page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-columns: 17.5rem 1fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--spacing-60);
  row-gap: 0;
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}
@media (max-width: 1024px) {
  body.hp-template--requests-view-page .hp-page {
    grid-template-areas:
      "header"
      "sidebar"
      "main";
    grid-template-columns: 1fr;
  }
}

/* Page header (search bar): full-bleed stripe with dot pattern.
 *
 * WLS-29: .hp-page is a constrained container (width: min(..., var(--container-max))).
 * The header grid-item must escape that container so its background spans 100vw.
 * Technique: width:100vw + margin-inline:calc(50% - 50vw).
 *   - 50%    = half of the grid-area width (= container width at this viewport)
 *   - 50vw   = half of the viewport
 *   → negative margin pulls both sides out to the viewport edges.
 * padding-inline on the inner content (.wl-cat-pagehead, .hp-form--*) must then
 * centre the text — see the inner-wrapper rules below.
 *
 * WLS-28: z-index is intentionally NOT set here (z-index:auto) so this element
 * does NOT create a stacking context above the sticky header (z-index:200).
 * The account dropdown (.wl-menu, z-index:60 inside the z:200 stacking context)
 * therefore always paints above this band.
 */
body.hp-template--requests-view-page .hp-page__header {
  grid-area: header !important;
  grid-column: 1 / -1 !important;
  /* Full-bleed: escape the constrained grid container */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  padding-block: var(--spacing-50);
  padding-inline: 0 !important; /* inner content provides its own horizontal padding */
  border-bottom: 1px solid var(--color-neutral);
  background: var(--color-neutral-bg);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
body.hp-template--requests-view-page .hp-page__header::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: .45;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-contrast) 7%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(100% 120% at 90% 0%, #000, transparent 60%);
          mask-image: radial-gradient(100% 120% at 90% 0%, #000, transparent 60%);
}
/* WLS-29: inner content of the full-bleed header band must be centred at
 * container width. All direct children (.wl-cat-pagehead, HP search form) get
 * the container max-width constraint + auto-centering margins. */
body.hp-template--requests-view-page .hp-page__header > * {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
  position: relative;
  z-index: 1; /* above ::after dot pattern */
  box-sizing: border-box;
}

/* Filter sidebar
 * WLS-2: removed position:sticky — sidebar scrolls with the page content.
 * Sticky positioning caused the sidebar to overlap the footer when the page
 * was taller than the viewport. align-self:start is kept so the sidebar box
 * does not stretch to the full grid-row height. */
body.hp-template--requests-view-page .hp-page__sidebar {
  grid-area: sidebar !important;
  position: static !important;
  align-self: start;
  max-width: unset !important;
  width: 100% !important;
  background: var(--color-base-elevated) !important;
  border: 1px solid var(--color-neutral) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  padding: var(--spacing-50) !important;
  margin-top: var(--spacing-60) !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/*
 * HP wraps the filter form in .hp-modal--mobile.hp-modal inside .hp-page__sidebar.
 * global.css sets .hp-modal { display: none } to prevent HP modal leakage on FSE
 * pages. On the requests archive the sidebar filter is NOT a popup modal — it is
 * an inline filter panel displayed in the left column. Override display:none so
 * the filter form is visible in the sidebar on desktop.
 * On mobile (<= 1024px) the sidebar collapses and the filter opens as a real modal
 * via the .hp-button--mobile trigger — let HP's own JS handle that.
 */
@media (min-width: 1025px) {
  body.hp-template--requests-view-page .hp-page__sidebar .hp-modal--mobile {
    display: block !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
}
/* WLS-2: mobile fallback — already static on desktop above; keep for
 * completeness and the margin-top override on small screens. */
@media (max-width: 1024px) {
  body.hp-template--requests-view-page .hp-page__sidebar {
    position: static !important;
    margin-right: 0 !important;
    margin-top: var(--spacing-50) !important;
  }
}

/* Main column
 * WLS-4: reduced top padding from var(--spacing-60)=48px to var(--spacing-40)=24px
 * so the toolbar row sits closer to the page header per the design. */
body.hp-template--requests-view-page .hp-page__content {
  grid-area: main !important;
  max-width: unset !important;
  width: 100% !important;
  padding-block: var(--spacing-40) var(--spacing-80);
  min-width: 0;
}

/* ============================================================================
 * TOOLBAR — WLS-5 / WLS-10
 *
 * HP topbar has three direct children (siblings, not grouped):
 *   [.hp-result-count]  [.hp-form--request-sort]  [.cat-viewtoggle]
 *
 * Design intent: count on the LEFT, sort + viewtoggle grouped on the RIGHT —
 * all items sharing a single vertical centre line.
 *
 * CSS-only solution without touching PHP DOM:
 *   flex + align-items:center on topbar
 *   flex:1 on result-count → pushes sort + viewtoggle to the right
 *   sort form as flex row (label inline-left of select) → no stacking
 *
 * Root cause of the 16px vertical offset reported live: the HP sort form
 * label (<label> or <span> rendered as display:block by section 3 of this
 * file — .hp-form .hp-field__label / label) was stacking ABOVE the <select>,
 * making the form element taller than the count text. Fix: hide the HP sort
 * label (redundant — "Sort by" is implicit UX) OR ensure the form is
 * display:flex + align-items:center so label + select are inline.
 * ============================================================================ */

body.hp-template--requests-view-page .hp-page__topbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
  margin-bottom: var(--spacing-50);
  flex-wrap: nowrap;
  /* no justify-content:space-between — flex:1 on count handles spacing */
}
@media (max-width: 768px) {
  body.hp-template--requests-view-page .hp-page__topbar {
    flex-wrap: wrap;
  }
}

/* Result count — WLS-5: flex:1 pushes sort + toggle to the right side.
 * margin:0 + line-height:1 neutralises any inherited block spacing. */
body.hp-template--requests-view-page .hp-page__topbar .hp-result-count {
  flex: 1;
  margin: 0;
  line-height: 1;
}

/* Sort form — WLS-5: display:flex keeps "Sort by" label and select on ONE
 * horizontal line. align-items:center aligns them with the count on the left.
 * The global .hp-form label rule (section 3) sets display:block + margin-bottom
 * on labels — override here so it doesn't stack above the select. */
body.hp-template--requests-view-page .hp-form--request-sort,
body.hp-template--requests-view-page .hp-form--pivot {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  flex-wrap: nowrap;
  /* cancel any inherited margin that would add height */
  margin: 0;
}
/* Override global block-label rule for the sort label only */
body.hp-template--requests-view-page .hp-form--request-sort label,
body.hp-template--requests-view-page .hp-form--request-sort .hp-field__label,
body.hp-template--requests-view-page .hp-form--pivot label,
body.hp-template--requests-view-page .hp-form--pivot .hp-field__label {
  display: inline;
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  white-space: nowrap;
  line-height: 1;
}
body.hp-template--requests-view-page .hp-form--request-sort select,
body.hp-template--requests-view-page .hp-form--pivot select {
  min-height: 2.5rem;
  min-width: 12rem;
  /* cancel field margin-bottom from global rule */
  margin-bottom: 0;
}
/* Cancel .hp-form .hp-form__field margin-bottom on the sort form field wrapper.
 * FIX WLS-14: scope display:flex to visible fields only — .hp-field--hidden
 * carries HivePress state-carrier inputs (budget[]/hourly_rate[] Min/Max).
 * Without :not(.hp-field--hidden) our flex override beats HP's own
 * .hp-field--hidden { display:none } and those inputs render visibly in the toolbar. */
body.hp-template--requests-view-page .hp-form--request-sort .hp-form__field:not(.hp-field--hidden),
body.hp-template--requests-view-page .hp-form--request-sort .hp-field:not(.hp-field--hidden),
body.hp-template--requests-view-page .hp-form--pivot .hp-form__field:not(.hp-field--hidden),
body.hp-template--requests-view-page .hp-form--pivot .hp-field:not(.hp-field--hidden) {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
}
/* Explicit guard: keep hidden state-carrier fields invisible in both sort forms */
body.hp-template--requests-view-page .hp-form--request-sort .hp-field--hidden,
body.hp-template--requests-view-page .hp-form--pivot .hp-field--hidden {
  display: none !important;
}

/* View toggle — enforce 40×40px button size matching design .cat-viewtoggle button */
body.hp-template--requests-view-page .cat-viewtoggle .cat-viewtoggle__btn {
  width: 2.5rem;
  height: 2.5rem;
}

/* Global HP result count shared style (used in both catalogs) */
.hp-result-count {
  font-size: var(--font-size-base);
  color: var(--color-contrast-muted);
  margin: 0;
  line-height: 1;
}
.hp-result-count strong { color: var(--color-contrast); font-weight: var(--fw-semibold); }

/*
 * Request cards grid.
 * HP renders: .hp-requests.hp-block.hp-grid > .hp-row (contents) > .hp-grid__item.hp-col-sm-12 × N
 * The grid class is .hp-grid; .hp-col-sm-12 wraps each card.
 * We set display:grid on .hp-grid and make .hp-grid__item transparent wrappers.
 */
body.hp-template--requests-view-page .hp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-50);
}
body.hp-template--requests-view-page .hp-grid__item {
  display: contents; /* dissolve wrapper, card takes the grid cell */
}

@media (max-width: 1400px) and (min-width: 1025px) {
  body.hp-template--requests-view-page .hp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.hp-template--requests-view-page .hp-grid { grid-template-columns: 1fr; }
}

/* Request card */
body.hp-template--requests-view-page .hp-listing {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-50);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
body.hp-template--requests-view-page .hp-listing:hover {
  border-color: var(--color-neutral-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card: status + category row */
body.hp-template--requests-view-page .hp-listing__details,
body.hp-template--requests-view-page .hp-listing__details--primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-30);
}

/* Card title */
body.hp-template--requests-view-page .hp-listing__title,
body.hp-template--requests-view-page .hp-listing__content .hp-listing__title {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0;
  text-wrap: balance;
}
body.hp-template--requests-view-page .hp-listing__title a { color: inherit; text-decoration: none; }
body.hp-template--requests-view-page .hp-listing__title a:hover { color: var(--color-accent-1); }

/* Card excerpt */
body.hp-template--requests-view-page .hp-listing__description,
body.hp-template--requests-view-page .hp-listing__excerpt {
  font-size: var(--font-size-base);
  color: var(--color-contrast-muted);
  line-height: var(--lh-normal);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta attributes: budget, deadline, bid count */
body.hp-template--requests-view-page .hp-listing__attributes,
body.hp-template--requests-view-page .hp-listing__attributes--primary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-40);
  align-items: flex-start;
}
body.hp-template--requests-view-page .hp-listing__attribute {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.hp-template--requests-view-page .hp-listing__attribute label,
body.hp-template--requests-view-page .hp-listing__attribute .hp-attribute__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle);
  margin-bottom: 0.25rem;
  font-weight: var(--fw-semibold);
}
body.hp-template--requests-view-page .hp-listing__attribute .hp-attribute__value,
body.hp-template--requests-view-page .hp-listing__attribute a {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  text-decoration: none;
}
/* Budget attribute — accent colour */
body.hp-template--requests-view-page .hp-listing__attribute--budget .hp-attribute__value,
body.hp-template--requests-view-page .hp-listing__attribute--price .hp-attribute__value,
body.hp-template--requests-view-page .hp-listing__attribute--budget a,
body.hp-template--requests-view-page .hp-listing__attribute--price a {
  font-size: var(--font-size-md);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: var(--tracking-tight);
}

/* Card divider */
body.hp-template--requests-view-page .hp-listing__divider {
  height: 1px; background: var(--color-neutral); border: 0; margin: 0;
}

/* Footer row */
body.hp-template--requests-view-page .hp-listing__footer,
body.hp-template--requests-view-page .hp-listing__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-30);
  flex-wrap: wrap;
}
body.hp-template--requests-view-page .hp-listing__created-date {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
}

/* Category chips on cards
 * WLS-13: white-space:nowrap was already present but the chip was getting
 * crushed by the flex sibling (status badge). The top row is now
 * justify-content:space-between so both sides get their intrinsic width;
 * overflow:visible + flex-shrink:0 prevents the chip from being squashed. */
body.hp-template--requests-view-page .hp-listing__categories a,
body.hp-template--requests-view-page .hp-listing__tags a {
  display: inline-flex; align-items: center;
  height: 1.75rem; padding: 0 var(--spacing-30);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  background: var(--color-accent-weak);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-1);
  font-size: var(--font-size-sm); font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: visible;
  max-width: none;
}

/* Card top row (status badge + category pill) — WLS-13: ensure the pill is
 * never clipped. flex-wrap:nowrap only if both fit; allow wrap as last resort. */
body.hp-template--requests-view-page .hp-listing__details,
body.hp-template--requests-view-page .hp-listing__details--primary {
  justify-content: space-between;
}

/* ============================================================================
 * LIST-VIEW LAYOUT — Jobs catalog (WLS-6)
 * Activated when .hp-requests[data-view="list"] (set by view-toggle JS).
 *
 * Design target (catalog.css lines 81-88):
 *   Full-width cards, content stacked vertically EXCEPT the bottom row:
 *     badge + category row (full width)
 *     job title (full width)
 *     excerpt clamped to 1 line (full width)
 *     divider (border-top on footer)
 *     budget LEFT, poster+button RIGHT (flex-row footer)
 *
 * REAL prod card DOM (captured live — ground truth):
 *   .hp-listing
 *     .hp-listing__content
 *       .wl-project__top      (badge "Open" + category pill)
 *       h3.hp-listing__title  (job title — NOT .wl-project__title)
 *       p.hp-listing__description.wl-request-excerpt  (excerpt — NOT .wl-project__excerpt)
 *     .hp-listing__footer
 *       .wl-project__meta     (Budget · Fixed €…)
 *       .wl-project__foot     (poster avatar+name + "View Details" button)
 *
 * There is NO .wl-project__title, NO .wl-project__excerpt, NO .wl-project__divider
 * element in the prod card. The prior grid-template-areas approach with
 * display:contents on .hp-listing__content targeted those missing classes and
 * broke the layout (title squished into a 105px column, excerpt auto-placed right).
 *
 * Fix: robust flex approach — natural vertical stack for content, flex-row footer.
 * The "divider" is rendered via border-top on .hp-listing__footer.
 * ============================================================================ */

/* Switch the feed from 2-col to 1-col in list mode */
body.hp-template--requests-view-page .hp-requests[data-view="list"] {
  grid-template-columns: 1fr !important;
}

/* Card: natural vertical flow — content block then footer block.
 * display:block (not flex-column) so there is no gap between content and
 * footer; spacing is handled by the footer border-top + padding-top below.
 * Reset any flex properties carried from the grid-view card rule. */
body.hp-template--requests-view-page .hp-requests[data-view="list"] .hp-listing {
  display: block;
}

/* Content wrapper: full-width block stack.
 * .wl-project__top / .hp-listing__title / .hp-listing__description all flow
 * naturally at 100% width with the existing gap set by the grid-view flex-col. */
body.hp-template--requests-view-page .hp-requests[data-view="list"] .hp-listing__content {
  display: block;
}

/* Excerpt: clamp to 1 line in list view (NOT hidden — design shows it).
 * The global rule already sets -webkit-line-clamp:2; override to 1 here. */
body.hp-template--requests-view-page .hp-requests[data-view="list"] .hp-listing__description,
body.hp-template--requests-view-page .hp-requests[data-view="list"] .hp-listing__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer: flex-row — budget (.wl-project__meta) LEFT, poster+button (.wl-project__foot) RIGHT.
 * border-top replaces the missing .wl-project__divider element (not in prod DOM).
 * Spacing tokens match the grid-view card divider: var(--color-neutral) at 1px. */
body.hp-template--requests-view-page .hp-requests[data-view="list"] .hp-listing__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-50);
  border-top: 1px solid var(--color-neutral);
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-40);
  flex-wrap: nowrap;
}

/* Meta (budget block): stays compact on the left — no growth */
body.hp-template--requests-view-page .hp-requests[data-view="list"] .wl-project__meta {
  flex: none;
}

/* Foot (poster + CTA): pushed to the right; preserve internal layout */
body.hp-template--requests-view-page .hp-requests[data-view="list"] .wl-project__foot {
  flex: none;
  margin-left: auto;
}

/* Mobile: collapse footer to stacked layout */
@media (max-width: 640px) {
  body.hp-template--requests-view-page .hp-requests[data-view="list"] .hp-listing__footer {
    flex-wrap: wrap;
    gap: var(--spacing-30);
  }
  body.hp-template--requests-view-page .hp-requests[data-view="list"] .wl-project__foot {
    margin-left: 0;
  }
}

/* Filter form field groups */
.hp-widget--listing-filter {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}
.hp-widget--listing-filter .hp-widget__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  margin: 0 0 var(--spacing-30);
}
.hp-widget--listing-filter .hp-form--listing-filter,
.hp-widget--listing-filter .hp-form--request-filter {
  display: flex;
  flex-direction: column;
}
.hp-widget--listing-filter .hp-form__field {
  border-top: 1px solid var(--color-neutral);
  padding-block: var(--spacing-40);
  margin-bottom: 0;
}
.hp-widget--listing-filter .hp-form__field:first-of-type { border-top: 0; }
.hp-widget--listing-filter .hp-field__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--spacing-30);
}

/* Checkbox list in filter */
.hp-widget--listing-filter .hp-form__field ul,
.hp-widget--listing-filter .hp-field--checkboxes ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--spacing-10);
}
.hp-widget--listing-filter .hp-form__field li,
.hp-widget--listing-filter .hp-field--checkboxes li {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-30); min-height: 2.25rem;
}
.hp-widget--listing-filter .hp-form__field label,
.hp-widget--listing-filter label {
  display: inline-flex; align-items: center; gap: var(--spacing-30);
  font-size: var(--font-size-base); color: var(--color-contrast);
  cursor: pointer; font-weight: var(--fw-regular); margin: 0;
}
.hp-widget--listing-filter input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem; flex: none;
  appearance: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale) * 0.6);
  display: grid; place-content: center;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer; min-height: auto; padding: 0;
}
.hp-widget--listing-filter input[type="checkbox"]:checked {
  background: var(--color-accent-1); border-color: var(--color-accent-1);
}
.hp-widget--listing-filter input[type="checkbox"]:checked::after {
  content: "";
  width: 0.32rem; height: 0.62rem; margin-top: -2px;
  border: solid var(--color-accent-on); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
/* HP's native form footer (contains "Filter" submit button) is hidden via CSS
 * on both catalogs — we supply our own "Apply filters" button in the sidebar
 * PHP template. CSS-first prevents FOUC before JS hides it. (FIX 4 sweep) */
.hp-widget--listing-filter .hp-form__footer,
body.hp-template--requests-view-page .hp-form--request-filter .hp-form__footer,
body.hp-template--listings-view-page .hp-form--listing-filter .hp-form__footer {
  display: none !important;
}

/* WLS-1/7: Hide "Apply filters" button via CSS — filters auto-apply on change.
 * CSS-first prevents button flash before JS runs (FOUC prevention).
 * The button is still present in the DOM as a no-JS fallback; display:none is
 * overridden by the noscript block below if JS is disabled. */
body.hp-template--requests-view-page .wl-sidebar-filters__apply,
body.hp-template--listings-view-page .wl-sidebar-filters__apply {
  display: none;
}
/* HP's native category radios inside the filter forms are hidden via CSS
 * on Jobs — we render our own checkboxes in vendor-sidebar-filters.php.
 * Listings uses HP's native list too; JS moves/hides it there as well. */
body.hp-template--requests-view-page .hp-form--request-filter .hp-form__field--radio {
  display: none;
}

/* ============================================================================
   6. PROJECT DETAIL (body.hp-template--request-view-page)
   DOM: .hp-page > .hp-page__header + .hp-row (contents) >
        .hp-page__content (main, col 1) + .hp-page__sidebar (col 2)
   .hp-page__content holds: h1 title, details, description, bid form / offers
   ============================================================================ */

body.hp-template--request-view-page { background: var(--color-base); }

/* 2-col layout on .hp-page */
body.hp-template--request-view-page .hp-page {
  display: grid;
  grid-template-areas:
    "header header"
    "main   sidebar";
  grid-template-columns: 1fr 22rem;
  grid-template-rows: auto 1fr;
  column-gap: var(--spacing-60);
  row-gap: 0;
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}
@media (max-width: 1024px) {
  body.hp-template--request-view-page .hp-page {
    grid-template-areas: "header" "main" "sidebar";
    grid-template-columns: 1fr;
  }
}

/* Page header — breadcrumb band.
 *
 * WLS-29: full-bleed background — same technique as catalog pages.
 * .hp-page is a constrained container (width: min(..., var(--container-max)));
 * escape it with width:100vw + margin-inline:calc(50% - 50vw).
 * The breadcrumb nav inside gets the container constraint back via its own rule.
 *
 * WLS-28: z-index deliberately omitted (z-index:auto) — no stacking context
 * created, so the sticky header (z-index:200) and its dropdown remain above.
 */
body.hp-template--request-view-page .hp-page__header {
  grid-area: header;
  /* Full-bleed */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  padding-inline: 0 !important;
  background: var(--color-neutral-bg);
  border-bottom: 1px solid var(--color-neutral);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
/* Dot-pattern decoration (mirrors catalog-band treatment) */
body.hp-template--request-view-page .hp-page__header::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-contrast) 7%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(100% 120% at 70% 0%, #000, transparent 60%);
          mask-image: radial-gradient(100% 120% at 70% 0%, #000, transparent 60%);
}

/* Breadcrumb nav inside the header band: constrain to container width + vertical rhythm */
body.hp-template--request-view-page .hp-page__header .cat-breadcrumb {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
  padding-block: var(--spacing-40);
  position: relative;
  z-index: 1; /* above ::after dot pattern */
  /* Ensure no card treatment leaks in (belt-and-suspenders) */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding-inline: 0 !important;
  box-shadow: none !important;
}

/* Main column: title + content blocks */
body.hp-template--request-view-page .hp-page__content {
  grid-area: main !important;
  max-width: unset !important;
  width: 100% !important;
  min-width: 0;
  padding-block: var(--spacing-60) var(--spacing-80);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-50);
}
@media (max-width: 1024px) {
  body.hp-template--request-view-page .hp-page__content { padding-right: 0; }
}

/* Content blocks inside main column */
body.hp-template--request-view-page .hp-listing--view-page,
body.hp-template--request-view-page .hp-listing {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-50);
}
/*
 * WLS-20 fix (Issue 4): removed the blanket card treatment that was applied to
 * every .hp-listing > * child. That rule wrapped ALL children (including .cat-breadcrumb
 * and HP's own title/details blocks) in border + background, creating an unwanted
 * outer frame around the entire left column. Each individual block (.pd-block,
 * .pd-hero, .pd-bidcard etc.) already owns its own card appearance via section 37.
 * The wrapper rule is therefore redundant and visually wrong.
 */

/* Sidebar: sticky */
body.hp-template--request-view-page .hp-page__sidebar {
  grid-area: sidebar !important;
  max-width: unset !important;
  width: 100% !important;
  position: sticky !important;
  top: 5.5rem !important;
  align-self: start;
  padding-top: var(--spacing-60);
  display: flex;
  flex-direction: column;
  /*
   * WLS-25: increased from var(--spacing-50)=24px to var(--spacing-70)=48px.
   * The gap between About-the-client and Proposals-so-far cards was too tight.
   */
  gap: var(--spacing-70);
}
@media (max-width: 1024px) {
  body.hp-template--request-view-page .hp-page__sidebar {
    position: static !important;
    padding-top: 0;
    padding-bottom: var(--spacing-80);
  }
}

/* Project title */
body.hp-template--request-view-page .hp-listing__title {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0; color: var(--color-contrast);
}

/* Status + categories row */
body.hp-template--request-view-page .hp-listing__meta,
body.hp-template--request-view-page .hp-listing__details {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-30);
}

/* Meta attributes (budget, deadline, bids) */
body.hp-template--request-view-page .hp-listing__attributes--primary,
body.hp-template--request-view-page .hp-listing__details--primary {
  display: flex; flex-wrap: wrap; gap: var(--spacing-50);
  padding-top: var(--spacing-40); border-top: 1px solid var(--color-neutral);
}
body.hp-template--request-view-page .hp-listing__attribute {
  display: flex; flex-direction: column;
}
body.hp-template--request-view-page .hp-listing__attribute label,
body.hp-template--request-view-page .hp-listing__attribute .hp-attribute__label {
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-contrast-subtle);
  margin-bottom: 0.25rem; font-weight: var(--fw-semibold);
}
body.hp-template--request-view-page .hp-listing__attribute .hp-attribute__value {
  font-size: var(--font-size-md); font-weight: var(--fw-semibold); color: var(--color-contrast);
}
body.hp-template--request-view-page .hp-listing__attribute--budget .hp-attribute__value,
body.hp-template--request-view-page .hp-listing__attribute--price .hp-attribute__value {
  color: var(--color-accent-1); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight);
}

/* Description block */
body.hp-template--request-view-page .hp-listing__description {
  color: var(--color-contrast-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--font-size-base);
}
body.hp-template--request-view-page .hp-listing__description p { margin: 0 0 var(--spacing-40); }
body.hp-template--request-view-page .hp-listing__description p:last-child { margin-bottom: 0; }

/* Bid / Proposal form (hp-form--offer-make) */
body.hp-template--request-view-page .hp-form--offer-make {
  background: var(--color-base-elevated) !important;
  border: 1px solid var(--color-accent-border) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  padding: 0 !important;
}
.hp-form--offer-make .hp-form__header {
  padding: var(--spacing-50);
  background: linear-gradient(180deg, var(--color-accent-weak), transparent);
  border-bottom: 1px solid var(--color-neutral);
}
.hp-form--offer-make .hp-form__header h3,
.hp-form--offer-make .hp-form__title {
  font-size: var(--font-size-md); font-weight: var(--fw-semibold); margin: 0; color: var(--color-contrast);
}
.hp-form--offer-make .hp-form__description {
  font-size: var(--font-size-sm); color: var(--color-contrast-muted); margin: var(--spacing-20) 0 0;
}
.hp-form--offer-make .hp-form__fields {
  padding: var(--spacing-50);
  display: flex; flex-direction: column; gap: var(--spacing-40);
}
.hp-form--offer-make .hp-form__footer { padding: 0 var(--spacing-50) var(--spacing-50); }

/* Offer / Applications list (customer view) */
.hp-offers, .hp-offer-list {
  display: flex; flex-direction: column; gap: var(--spacing-40);
}
.hp-offer--view-block {
  padding: var(--spacing-50);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  background: var(--color-base-elevated);
  transition: border-color var(--transition);
}
.hp-offer--view-block:hover { border-color: var(--color-neutral-strong); }
.hp-offer__bidder { font-size: var(--font-size-md); font-weight: var(--fw-semibold); color: var(--color-contrast); }
.hp-offer__bidder a { color: inherit; text-decoration: none; }
.hp-offer__bidder a:hover { color: var(--color-accent-1); }
.hp-offer__attribute--price .hp-attribute__value {
  font-size: var(--font-size-md); font-weight: var(--fw-bold);
  color: var(--color-accent-1); letter-spacing: var(--tracking-tight);
}
.hp-offer__text { color: var(--color-contrast-muted); line-height: var(--lh-relaxed); font-size: var(--font-size-base); }
.hp-offer__footer, .hp-offer__actions--primary {
  display: flex; align-items: center; gap: var(--spacing-30);
  margin-top: var(--spacing-40); padding-top: var(--spacing-40);
  border-top: 1px solid var(--color-neutral); flex-wrap: wrap;
}
.hp-offer__created-date { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); }

/* Vendor block (customer info in sidebar) */
.hp-vendor--view-block {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-50);
}
.hp-vendor__header {
  display: flex; align-items: flex-start; gap: var(--spacing-40); margin-bottom: var(--spacing-40);
}
.hp-vendor__name a {
  font-size: var(--font-size-md); font-weight: var(--fw-semibold);
  color: var(--color-contrast); text-decoration: none;
}
.hp-vendor__name a:hover { color: var(--color-accent-1); }
.hp-vendor__details { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); }
.hp-vendor__footer {
  padding-top: var(--spacing-40); border-top: 1px solid var(--color-neutral);
  display: flex; flex-direction: column; gap: var(--spacing-30);
}

/* ============================================================================
   7. FREELANCERS CATALOG (body.hp-template--listings-view-page)
   DOM: .hp-page > .hp-page__header + .hp-row (contents) >
        .hp-page__sidebar + .hp-page__content >
          .hp-page__topbar + .hp-listings.hp-grid > .hp-row (contents) >
            .hp-grid__item.hp-col-sm-6 × N > .hp-listing--view-block
   ============================================================================ */

body.hp-template--listings-view-page { background: var(--color-base); }

/* 2-col layout on .hp-page */
body.hp-template--listings-view-page .hp-page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-columns: 17.5rem 1fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--spacing-60);
  row-gap: 0;
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}
@media (max-width: 1024px) {
  body.hp-template--listings-view-page .hp-page {
    grid-template-areas: "header" "sidebar" "main";
    grid-template-columns: 1fr;
  }
}

/* Page header — WLS-29 full-bleed (same technique as requests-view above). */
body.hp-template--listings-view-page .hp-page__header {
  grid-area: header !important;
  grid-column: 1 / -1 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  padding-block: var(--spacing-50);
  padding-inline: 0 !important;
  border-bottom: 1px solid var(--color-neutral);
  background: var(--color-neutral-bg);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
body.hp-template--listings-view-page .hp-page__header::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: .45;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-contrast) 7%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(100% 120% at 90% 0%, #000, transparent 60%);
          mask-image: radial-gradient(100% 120% at 90% 0%, #000, transparent 60%);
}
/* WLS-29: inner content centred at container width inside full-bleed band */
body.hp-template--listings-view-page .hp-page__header > * {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* Filter sidebar
 * WLS-8: removed position:sticky — sidebar scrolls with the page. */
body.hp-template--listings-view-page .hp-page__sidebar {
  grid-area: sidebar !important;
  position: static !important;
  align-self: start;
  max-width: unset !important; width: 100% !important;
  background: var(--color-base-elevated) !important;
  border: 1px solid var(--color-neutral) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  padding: var(--spacing-50) !important;
  margin-top: var(--spacing-60) !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  body.hp-template--listings-view-page .hp-page__sidebar { position: static !important; margin-right: 0 !important; margin-top: var(--spacing-50) !important; }
}

/* Show filter form inline in sidebar on desktop (same fix as requests catalog).
 * HP may set display:block via JS when user clicks "Filters" button — we must also
 * reset position, z-index, and width so it stays in-flow (not an overlay). */
@media (min-width: 1025px) {
  body.hp-template--listings-view-page .hp-page__sidebar .hp-modal,
  body.hp-template--listings-view-page .hp-page__sidebar .hp-modal--mobile {
    display: block !important;
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Prevent the overlay backdrop from showing on desktop */
  body.hp-template--listings-view-page .hp-modal-overlay { display: none !important; }
}
/* HP hides .hp-widget--listing-filter at max-width:47.99em — ensure it's visible
 * in sidebar on desktop (overriding any HP media-query specificity) */
@media (min-width: 1025px) {
  body.hp-template--listings-view-page .hp-widget--listing-filter,
  body.hp-template--requests-view-page .hp-widget--listing-filter {
    display: flex !important;
    flex-direction: column;
    gap: var(--spacing-10);
  }
}

/* Main column
 * WLS-9: reduced top padding from var(--spacing-60)=48px to var(--spacing-40)=24px. */
body.hp-template--listings-view-page .hp-page__content {
  grid-area: main !important;
  max-width: unset !important;
  width: 100% !important;
  padding-block: var(--spacing-40) var(--spacing-80);
  min-width: 0;
}

/* ============================================================================
 * TOOLBAR — WLS-10 (Freelancers catalog)
 * Same fix as WLS-5 (Jobs): flex:1 on result-count pushes sort + viewtoggle
 * to the right. Sort form is display:flex to keep label inline with select.
 * ============================================================================ */
body.hp-template--listings-view-page .hp-page__topbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
  margin-bottom: var(--spacing-50);
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  body.hp-template--listings-view-page .hp-page__topbar { flex-wrap: wrap; }
}

/* Result count: flex:1 pushes sort + toggle to the right */
body.hp-template--listings-view-page .hp-page__topbar .hp-result-count {
  flex: 1;
  margin: 0;
  line-height: 1;
}

/* Sort form — label inline with select, no block stacking */
body.hp-template--listings-view-page .hp-form--listing-sort,
body.hp-template--listings-view-page .hp-form--pivot {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  flex-wrap: nowrap;
  margin: 0;
}
body.hp-template--listings-view-page .hp-form--listing-sort label,
body.hp-template--listings-view-page .hp-form--listing-sort .hp-field__label,
body.hp-template--listings-view-page .hp-form--pivot label,
body.hp-template--listings-view-page .hp-form--pivot .hp-field__label {
  display: inline;
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  white-space: nowrap;
  line-height: 1;
}
body.hp-template--listings-view-page .hp-form--listing-sort select,
body.hp-template--listings-view-page .hp-form--pivot select {
  min-height: 2.5rem;
  min-width: 12rem;
  margin-bottom: 0;
}
/* FIX WLS-14: same :not(.hp-field--hidden) guard as the requests sort form.
 * Prevents hourly_rate[] Min/Max state-carrier fields from leaking into the toolbar. */
body.hp-template--listings-view-page .hp-form--listing-sort .hp-form__field:not(.hp-field--hidden),
body.hp-template--listings-view-page .hp-form--listing-sort .hp-field:not(.hp-field--hidden),
body.hp-template--listings-view-page .hp-form--pivot .hp-form__field:not(.hp-field--hidden),
body.hp-template--listings-view-page .hp-form--pivot .hp-field:not(.hp-field--hidden) {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
}
/* Explicit guard: keep hidden state-carrier fields invisible in the listings sort form */
body.hp-template--listings-view-page .hp-form--listing-sort .hp-field--hidden,
body.hp-template--listings-view-page .hp-form--pivot .hp-field--hidden {
  display: none !important;
}

/* View toggle button size */
body.hp-template--listings-view-page .cat-viewtoggle .cat-viewtoggle__btn {
  width: 2.5rem;
  height: 2.5rem;
}

/*
 * Freelancer cards grid.
 * HP: .hp-listings.hp-grid > .hp-row (contents) > .hp-grid__item.hp-col-sm-6 × N
 * The actual grid is .hp-listings which already has display:grid from HP.
 * We ensure our custom cols + gap override HP's defaults.
 */
body.hp-template--listings-view-page .hp-listings.hp-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-50);
}
/* .hp-grid__item.hp-col-sm-6 wraps each card — dissolve */
body.hp-template--listings-view-page .hp-grid__item { display: contents; }

@media (max-width: 1400px) and (min-width: 1025px) {
  body.hp-template--listings-view-page .hp-listings.hp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.hp-template--listings-view-page .hp-listings.hp-grid { grid-template-columns: 1fr; }
}

/* Vendor card base */
body.hp-template--listings-view-page .hp-listing--view-block {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-50);
  display: flex; flex-direction: column; gap: var(--spacing-40);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-decoration: none; color: inherit;
}
/* Kill HP's :not(:last-child) margin-bottom on card children — we use gap instead */
body.hp-template--listings-view-page .hp-listing--view-block .hp-listing__header:not(:last-child),
body.hp-template--listings-view-page .hp-listing--view-block .hp-listing__content:not(:last-child),
body.hp-template--listings-view-page .hp-listing--view-block .hp-listing__footer:not(:last-child) {
  margin-bottom: 0;
}
body.hp-template--listings-view-page .hp-listing--view-block:hover {
  border-color: var(--color-neutral-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/*
 * Vendor card internal layout.
 * Real HP DOM: .hp-listing--view-block >
 *   .hp-listing__header (avatar img)
 *   .hp-listing__content (title/name, tagline/description, attributes, rating, tags)
 *   .hp-listing__footer (actions/buttons)
 */
/* FIX FL-04/05 (2026-06-02): hp-listing__header now carries [avatar]+[identity].
 * flex-wrap:nowrap keeps them on one row (avatar left, identity right).
 * align-items:center aligns avatar vertically with the first line of name/role.
 */
body.hp-template--listings-view-page .hp-listing__header {
  display: flex; gap: var(--spacing-40); align-items: center;
  flex-wrap: nowrap;
}
/* identity column takes remaining width after the fixed-size avatar */
body.hp-template--listings-view-page .hp-listing__header .wl-vendor__id {
  min-width: 0;
  flex: 1;
}

/* Avatar — real image or initials fallback.
 * FIX FL-04 (2026-06-02): size upgraded from 3.5rem (56px) to 4.5rem (72px)
 * to match design .wl-avatar--lg. The .wl-avatar--lg class is also added in
 * listing-image.php on the <span> so the global.css .wl-avatar--lg rule applies.
 */
body.hp-template--listings-view-page .hp-listing__image {
  width: 4.5rem; height: 4.5rem; flex: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--color-neutral-strong);
  background: var(--color-surface-3);
}
body.hp-template--listings-view-page .hp-listing__image img { width: 100%; height: 100%; object-fit: cover; }

/* Initials avatar fallback (FIX 3b: no real image → .wl-avatar--card) */
body.hp-template--listings-view-page .hp-listing__image .wl-avatar-image-link {
  display: flex;
  width: 100%; height: 100%;
  text-decoration: none;
}
body.hp-template--listings-view-page .hp-listing__image .wl-avatar--card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent-weak);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-1);
  font-size: var(--font-size-base);
  font-weight: var(--fw-bold);
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  user-select: none;
}

/* Content block (rating + category meta) — stacked inside card.
 * FIX FL-05 (2026-06-02): hp-listing__header now carries identity (avatar + name/role
 * via listing-image.php). hp-listing__content holds HP's native title (= professional
 * title, duplicated in header) + details (category, date, rating). We hide the title
 * and date to avoid duplication; keep only rating and category chip.
 * hp-listing__title is hidden via display:none — it's already in the header row.
 * hp-listing__created-date is metadata noise not in the design card.
 */
body.hp-template--listings-view-page .hp-listing__content {
  min-width: 0; flex: 1;
}
/* Hide duplicated title (already in header identity block) */
body.hp-template--listings-view-page .hp-listing__content .hp-listing__title {
  display: none;
}
/* Hide "Added on…" date — not in design card */
body.hp-template--listings-view-page .hp-listing__content .hp-listing__created-date,
body.hp-template--listings-view-page .hp-listing__content .hp-listing__date {
  display: none;
}

/* Name */
body.hp-template--listings-view-page .hp-listing__title {
  font-size: var(--font-size-md); font-weight: var(--fw-semibold);
  color: var(--color-contrast); margin: 0; line-height: 1.2;
}
body.hp-template--listings-view-page .hp-listing__title a { color: inherit; text-decoration: none; }
body.hp-template--listings-view-page .hp-listing__title a:hover { color: var(--color-accent-1); }

/* Tagline / headline */
body.hp-template--listings-view-page .hp-listing__tagline,
body.hp-template--listings-view-page .hp-listing__description {
  font-size: var(--font-size-sm); color: var(--color-contrast-muted);
  margin: 0.18rem 0 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Rate — attribute shown in header area */
body.hp-template--listings-view-page .hp-listing__attribute--price,
body.hp-template--listings-view-page .hp-listing__attribute--rate {
  flex: none;
  text-align: right;
}
body.hp-template--listings-view-page .hp-listing__attribute--price .hp-attribute__value,
body.hp-template--listings-view-page .hp-listing__attribute--rate .hp-attribute__value {
  font-size: var(--font-size-md); font-weight: var(--fw-bold);
  color: var(--color-accent-1); letter-spacing: var(--tracking-tight);
}

/* Attributes row */
body.hp-template--listings-view-page .hp-listing__attributes {
  display: flex; flex-wrap: wrap; gap: var(--spacing-30); align-items: center;
}

/* Rating stars */
body.hp-template--listings-view-page .hp-listing__rating {
  display: flex; align-items: center; gap: var(--spacing-20);
}
body.hp-template--listings-view-page .hp-listing__rating .hp-rating__stars { color: var(--color-rating-star); letter-spacing: 0.1em; }
body.hp-template--listings-view-page .hp-listing__rating .hp-rating__value { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-contrast); }
body.hp-template--listings-view-page .hp-listing__rating .hp-rating__count { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); }

/* Skills / category tags */
body.hp-template--listings-view-page .hp-listing__tags,
body.hp-template--listings-view-page .hp-listing__categories {
  display: flex; flex-wrap: wrap; gap: var(--spacing-20);
}
body.hp-template--listings-view-page .hp-listing__tags a,
body.hp-template--listings-view-page .hp-listing__categories a {
  display: inline-flex; align-items: center;
  height: 1.75rem; padding: 0 var(--spacing-30);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  background: var(--color-surface-2); border: 1px solid var(--color-neutral);
  color: var(--color-contrast-muted);
  font-size: var(--font-size-sm); font-weight: var(--fw-medium);
  text-decoration: none; white-space: nowrap;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
body.hp-template--listings-view-page .hp-listing__tags a:hover,
body.hp-template--listings-view-page .hp-listing__categories a:hover {
  color: var(--color-accent-1); border-color: var(--color-accent-border); background: var(--color-accent-weak);
}

/* Availability dot */
body.hp-template--listings-view-page .hp-listing__available {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  font-size: var(--font-size-sm); color: var(--color-status-open-fg);
}
body.hp-template--listings-view-page .hp-listing__available::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-status-open-fg) 22%, transparent);
}

/* Card footer — structural container only.
 * The visual divider is carried by .wl-card-foot (border-top: 1px solid).
 * NO border-top here — that would produce a second/duplicate divider line
 * on top of .wl-card-foot's own border. (Fix 3a: 2026-06-01) */
body.hp-template--listings-view-page .hp-listing__footer {
  display: flex; align-items: stretch; flex-direction: column;
  gap: 0;
  border-top: none;  /* divider lives on .wl-card-foot */
  padding-top: 0;
  margin-top: auto; /* push to bottom of flex card */
}

/* ============================================================================
 * LIST-VIEW LAYOUT — Freelancers catalog (WLS-11)
 * Activated when .hp-listings[data-view="list"].
 *
 * Design principle (same as Jobs WLS-6): full-width cards, content stacked
 * vertically, ONLY the bottom row splits left/right.
 *
 * HP Freelancer card DOM (listings catalog):
 *   .hp-listing--view-block (flex col) →
 *     .hp-listing__header    → avatar + identity (wl-vendor__head area)
 *     .hp-listing__content   → HP rating, category chips (meta area)
 *     .hp-listing__footer    → contains .wl-card-foot →
 *       .hp-listing__tags.wl-skill-tags  (skills)
 *       .wl-card-foot__row               (rate + View Profile button)
 *
 * Grid areas:
 *   "head   head"  → header spans full width
 *   "meta   meta"  → content (rating + category) spans full width
 *   "skills foot"  → skills LEFT, rate+button RIGHT
 *
 * Skills and wl-card-foot__row live inside .hp-listing__footer > .wl-card-foot.
 * To split them left/right we turn .wl-card-foot itself into a flex row
 * so skills (.hp-listing__tags.wl-skill-tags, flex:1) and the CTA row
 * (.wl-card-foot__row, flex:none, right-aligned) sit on one line.
 * ============================================================================ */

/* 1-col grid in list mode */
body.hp-template--listings-view-page .hp-listings[data-view="list"] {
  grid-template-columns: 1fr !important;
}

/* Card: switch to CSS grid (2 columns: 1fr auto) with named areas */
body.hp-template--listings-view-page .hp-listings[data-view="list"] .hp-listing--view-block {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head   head"
    "meta   meta"
    "footer footer";
  gap: var(--spacing-30) var(--spacing-50);
  align-items: start;
  /* reset flex properties from grid-view */
  flex-direction: unset;
}

body.hp-template--listings-view-page .hp-listings[data-view="list"] .hp-listing__header  { grid-area: head; }
body.hp-template--listings-view-page .hp-listings[data-view="list"] .hp-listing__content { grid-area: meta; }
body.hp-template--listings-view-page .hp-listings[data-view="list"] .hp-listing__footer  {
  grid-area: footer;
  margin-top: 0;  /* cancel margin-top:auto from grid-view */
}

/* .wl-card-foot: turn into a flex row so skills fill left and rate+CTA sit right.
 * The border-top (visual divider) is kept from the base .wl-card-foot style. */
body.hp-template--listings-view-page .hp-listings[data-view="list"] .wl-card-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-40);
}

/* Skills: grow to fill available left space; clamp overflow tags */
body.hp-template--listings-view-page .hp-listings[data-view="list"] .hp-listing__tags.wl-skill-tags {
  flex: 1;
  min-width: 0;
  /* allow wrap on very narrow rows */
  flex-wrap: wrap;
}

/* Rate + CTA row: fixed to the right; no vertical stacking */
body.hp-template--listings-view-page .hp-listings[data-view="list"] .wl-card-foot__row {
  flex: none;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-30);
}

/* Mobile: collapse to single-column stack */
@media (max-width: 640px) {
  body.hp-template--listings-view-page .hp-listings[data-view="list"] .hp-listing--view-block {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "meta" "footer";
  }
  body.hp-template--listings-view-page .hp-listings[data-view="list"] .wl-card-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  body.hp-template--listings-view-page .hp-listings[data-view="list"] .wl-card-foot__row {
    width: 100%;
    justify-content: space-between;
  }
}

/* ============================================================================
 * PAGINATION BOTTOM SPACING — Jobs + Freelancers (WLS-3)
 * HP renders .hp-pagination inside .hp-page__content. The content column
 * already has padding-block-end: var(--spacing-80)=64px — which should be
 * sufficient. The pagination wrapper gets an explicit margin-top so there is
 * clear breathing room between the last card row and the page numbers.
 * ============================================================================ */

body.hp-template--requests-view-page .hp-pagination,
body.hp-template--listings-view-page .hp-pagination,
body.hp-template--requests-view-page .wp-pagenavi,
body.hp-template--listings-view-page .wp-pagenavi {
  margin-top: var(--spacing-60);
  margin-bottom: var(--spacing-60);
}

/* ============================================================================
   8. FREELANCER PROFILE (body.hp-template--listing-view-page)
   DOM: .hp-page.site-main >
          .hp-row.hp-listing.hp-listing--view-page (display:contents) >
            .hp-page__content.hp-col-sm-8 (profile h1/title + sections + reviews)
            .hp-page__sidebar.hp-col-sm-4 (stat card)

   Profile header band must be styled on .hp-page__content's inner area (not
   a separate header element — HP puts the title directly in content col).
   We create the dot-bg header effect on the h1 + detail area via a wrapper
   approach targeting the top of .hp-page__content.
   ============================================================================ */

body.hp-template--listing-view-page { background: var(--color-base); }

/* 2-col layout on .hp-page */
body.hp-template--listing-view-page .hp-page {
  display: grid;
  grid-template-columns: 1fr 20rem;
  column-gap: var(--spacing-60);
  row-gap: 0;
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}
@media (max-width: 900px) {
  body.hp-template--listing-view-page .hp-page { grid-template-columns: 1fr; }
}

/* Main column */
body.hp-template--listing-view-page .hp-page__content {
  min-width: 0;
  max-width: unset !important;
  width: 100% !important;
  padding-block: var(--spacing-60) var(--spacing-80);
  display: flex; flex-direction: column; gap: 0;
}

/* Profile "hero header" — the title area at top of content
 * HP puts: .hp-listing__title (h1) + .hp-listing__details--primary (meta)
 * We give it the elevated-bg + dot-pattern treatment.
 */
body.hp-template--listing-view-page .hp-page__content .hp-listing__title {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: var(--spacing-70) 0 var(--spacing-30);
  color: var(--color-contrast);
}

body.hp-template--listing-view-page .hp-listing__tagline {
  font-size: var(--font-size-md);
  color: var(--color-contrast-muted);
  margin: 0 0 var(--spacing-40);
}

body.hp-template--listing-view-page .hp-listing__details--primary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-30);
  padding-bottom: var(--spacing-50); border-bottom: 1px solid var(--color-neutral); margin-bottom: var(--spacing-50);
}

body.hp-template--listing-view-page .hp-listing__attribute {
  display: flex; flex-direction: column;
}
body.hp-template--listing-view-page .hp-listing__attribute .hp-attribute__label,
body.hp-template--listing-view-page .hp-listing__attribute label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle); margin-bottom: 0.2rem; font-weight: var(--fw-semibold);
}
body.hp-template--listing-view-page .hp-listing__attribute--price .hp-attribute__value,
body.hp-template--listing-view-page .hp-listing__attribute--rate .hp-attribute__value {
  font-size: var(--font-size-lg); font-weight: var(--fw-bold);
  color: var(--color-accent-1); letter-spacing: var(--tracking-tight);
}

/* Content sections (About, Skills, Projects, Reviews) */
body.hp-template--listing-view-page .hp-listing__section,
body.hp-template--listing-view-page .hp-block {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-60);
  margin-bottom: var(--spacing-50);
}
body.hp-template--listing-view-page .hp-listing__section:last-child,
body.hp-template--listing-view-page .hp-block:last-child { margin-bottom: 0; }
body.hp-template--listing-view-page .hp-listing__section h3,
body.hp-template--listing-view-page .hp-block h3 {
  font-size: var(--font-size-md); font-weight: var(--fw-semibold);
  margin: 0 0 var(--spacing-40); letter-spacing: var(--tracking-snug); color: var(--color-contrast);
}

/* Manage menu (tabbed nav on own profile) */
body.hp-template--listing-view-page .hp-menu--tabbed {
  display: flex; gap: var(--spacing-10);
  border-bottom: 1px solid var(--color-neutral);
  margin-bottom: var(--spacing-50); padding: 0; list-style: none;
}
body.hp-template--listing-view-page .hp-menu--tabbed li a {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  min-height: 2.75rem; padding: 0 var(--spacing-40);
  background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--color-contrast-muted);
  font-size: var(--font-size-base); font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}
body.hp-template--listing-view-page .hp-menu--tabbed li a:hover { color: var(--color-contrast); }
body.hp-template--listing-view-page .hp-menu--tabbed li.current-menu-item a,
body.hp-template--listing-view-page .hp-menu--tabbed li.hp-menu__item--current a {
  color: var(--color-accent-1); border-bottom-color: var(--color-accent-1);
}

/* About / bio text */
body.hp-template--listing-view-page .hp-listing__description {
  color: var(--color-contrast-muted); line-height: var(--lh-relaxed); font-size: var(--font-size-base); margin: 0;
}

/* Skills tags */
body.hp-template--listing-view-page .hp-listing__tags {
  display: flex; flex-wrap: wrap; gap: var(--spacing-20);
}
body.hp-template--listing-view-page .hp-listing__tags a {
  display: inline-flex; align-items: center;
  height: 1.75rem; padding: 0 var(--spacing-30);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  background: var(--color-surface-2); border: 1px solid var(--color-neutral);
  color: var(--color-contrast-muted);
  font-size: var(--font-size-sm); font-weight: var(--fw-medium);
  text-decoration: none; white-space: nowrap;
}

/* Reviews */
body.hp-template--listing-view-page .hp-review {
  padding-bottom: var(--spacing-50); border-bottom: 1px solid var(--color-neutral);
}
body.hp-template--listing-view-page .hp-review:last-child { border-bottom: 0; padding-bottom: 0; }
body.hp-template--listing-view-page .hp-review__header {
  display: flex; align-items: center; gap: var(--spacing-30); margin-bottom: var(--spacing-30);
}
body.hp-template--listing-view-page .hp-review__author { font-weight: var(--fw-semibold); color: var(--color-contrast); font-size: var(--font-size-base); }
body.hp-template--listing-view-page .hp-review__created-date { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); margin-left: auto; }
body.hp-template--listing-view-page .hp-review__text { color: var(--color-contrast-muted); line-height: var(--lh-relaxed); }

/* Sidebar */
body.hp-template--listing-view-page .hp-page__sidebar {
  max-width: unset !important;
  width: 100% !important;
  position: sticky !important; top: 5.5rem !important; align-self: start;
  padding: var(--spacing-60) 0 var(--spacing-80);
  display: flex; flex-direction: column; gap: var(--spacing-50);
}
@media (max-width: 900px) { body.hp-template--listing-view-page .hp-page__sidebar { position: static !important; padding-top: 0; } }

/* Sidebar stat card */
body.hp-template--listing-view-page .hp-vendor--view-block {
  background: var(--color-base-elevated); border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-50); display: flex; flex-direction: column; gap: var(--spacing-40);
}

/* ============================================================================
   9. HP STATUS BADGES (hp-status--*)
   HP outputs: <span class="hp-status hp-status--publish">
   ============================================================================ */

.hp-status {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  height: 1.625rem; padding: 0 var(--spacing-30);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug); border: 1px solid transparent; white-space: nowrap;
}
.hp-status::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor;
}
.hp-status--publish  { color: var(--color-status-open-fg);      background: var(--color-status-open-bg);      border-color: var(--color-status-open-border); }
.hp-status--pending  { color: var(--color-status-reviewing-fg); background: var(--color-status-reviewing-bg); border-color: var(--color-status-reviewing-border); }
.hp-status--private  { color: var(--color-status-assigned-fg);  background: var(--color-status-assigned-bg);  border-color: var(--color-status-assigned-border); }
.hp-status--draft    { color: var(--color-status-closed-fg);    background: var(--color-status-closed-bg);    border-color: var(--color-status-closed-border); }
.hp-status--trash    { color: var(--color-contrast-subtle);     background: var(--color-neutral-bg);          border-color: var(--color-neutral); }

/* ============================================================================
   10. SELECT2 DARK THEME
   ============================================================================ */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-neutral-strong) !important;
  border-radius: calc(var(--radius-sm) * var(--radius-scale)) !important;
  min-height: 2.75rem !important;
  display: flex !important; align-items: center !important;
  color: var(--color-contrast) !important;
  font-family: var(--font-sans) !important; font-size: var(--font-size-base) !important;
  transition: border-color var(--transition) !important;
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover { border-color: var(--color-accent-border) !important; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--color-accent-1) !important; box-shadow: var(--shadow-focus) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-contrast) !important; line-height: 2.75rem !important; padding-left: var(--spacing-40) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--color-contrast-subtle) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.75rem !important; right: 0.75rem !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--color-contrast-muted) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--color-accent-1) transparent !important;
}
.select2-dropdown {
  background: var(--color-base-elevated) !important;
  border: 1px solid var(--color-neutral-strong) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  box-shadow: var(--shadow-lg) !important; overflow: hidden !important;
}
.select2-search--dropdown { padding: var(--spacing-20) var(--spacing-30) !important; border-bottom: 1px solid var(--color-neutral) !important; }
.select2-search--dropdown .select2-search__field {
  background: var(--color-surface-2) !important; border: 1px solid var(--color-neutral-strong) !important;
  border-radius: calc(var(--radius-sm) * var(--radius-scale)) !important;
  color: var(--color-contrast) !important; font-family: var(--font-sans) !important;
  font-size: var(--font-size-sm) !important; padding: var(--spacing-20) var(--spacing-30) !important; outline: none !important;
}
.select2-results__option {
  padding: var(--spacing-30) var(--spacing-40) !important; color: var(--color-contrast) !important;
  font-family: var(--font-sans) !important; font-size: var(--font-size-base) !important;
  transition: background var(--transition) !important;
}
.select2-results__option:hover,
.select2-results__option--highlighted[aria-selected] { background: var(--color-surface-2) !important; color: var(--color-contrast) !important; }
.select2-results__option[aria-selected="true"] { background: var(--color-accent-weak) !important; color: var(--color-accent-1) !important; }

/* ============================================================================
   11. FLATPICKR DARK THEME
   ============================================================================ */

.flatpickr-calendar {
  background: var(--color-base-elevated) !important; border: 1px solid var(--color-neutral-strong) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  box-shadow: var(--shadow-lg) !important; color: var(--color-contrast) !important;
}
.flatpickr-months .flatpickr-month, .flatpickr-current-month {
  background: transparent !important; color: var(--color-contrast) !important; fill: var(--color-contrast) !important;
}
.flatpickr-current-month input.cur-year { color: var(--color-contrast) !important; font-family: var(--font-sans) !important; background: transparent !important; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--color-contrast-muted) !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--color-accent-1) !important; }
.flatpickr-weekdays, .flatpickr-weekday {
  background: transparent !important; color: var(--color-contrast-subtle) !important;
  font-family: var(--font-sans) !important; font-size: var(--font-size-sm) !important;
}
.flatpickr-day {
  color: var(--color-contrast) !important;
  border-radius: calc(var(--radius-sm) * var(--radius-scale)) !important;
  font-family: var(--font-sans) !important; font-size: var(--font-size-sm) !important;
  transition: background var(--transition), color var(--transition) !important;
}
.flatpickr-day:hover:not(.flatpickr-disabled) { background: var(--color-surface-3) !important; border-color: var(--color-neutral-strong) !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--color-accent-1) !important; border-color: var(--color-accent-1) !important; color: var(--color-accent-on) !important;
}
.flatpickr-day.today:not(.selected) { border-color: var(--color-accent-border) !important; color: var(--color-accent-1) !important; }
.flatpickr-day.flatpickr-disabled { color: var(--color-contrast-subtle) !important; opacity: 0.4 !important; }
.flatpickr-day.inRange { background: var(--color-accent-weak) !important; border-color: var(--color-accent-border) !important; }

/* ============================================================================
   12. HP MODAL DARK THEME
   ============================================================================ */

.hp-modal {
  background: var(--color-base-elevated) !important; border: 1px solid var(--color-neutral-strong) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  box-shadow: var(--shadow-lg) !important; color: var(--color-contrast) !important;
}
.hp-modal__title { font-size: var(--font-size-md) !important; font-weight: var(--fw-semibold) !important; color: var(--color-contrast) !important; margin: 0 0 var(--spacing-40) !important; }
.hp-modal-overlay, .mfp-bg {
  background: color-mix(in srgb, var(--color-base) 72%, transparent) !important; backdrop-filter: blur(4px) !important;
}

/* ============================================================================
   13. HP NO-RESULTS / LOADING / EMPTY STATES
   ============================================================================ */

/*
 * Empty state: HP renders <div class="hp-no-results"><h2>...</h2><p>...</p></div>
 * We style it as a centred card with an icon zone and a "Clear all filters" CTA.
 * The CTA is injected by JS in wl_jobs_catalog_a11y_script() / wl_listings_catalog_js().
 */
.hp-no-results {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-40);
  padding: var(--spacing-80) var(--spacing-50);
  background: var(--color-base-elevated); border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  color: var(--color-contrast-muted); font-size: var(--font-size-base);
  margin-top: var(--spacing-50);
}
/* Icon circle prepended by JS */
.hp-no-results__icon {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-full);
  display: grid; place-content: center;
  background: var(--color-surface-2); border: 1px solid var(--color-neutral); color: var(--color-contrast-subtle);
  margin-bottom: var(--spacing-10);
}
/* HP default h2 inside empty state */
.hp-no-results h2,
.hp-no-results__title {
  font-size: var(--font-size-md); font-weight: var(--fw-semibold); color: var(--color-contrast); margin: 0;
}
/* HP default p inside empty state */
.hp-no-results p { margin: 0; color: var(--color-contrast-muted); max-width: 36ch; }
/* "Clear all filters" link injected by JS */
.hp-no-results__clear {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  min-height: 2.75rem; padding: 0 var(--spacing-50);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  background: var(--color-surface-2);
  color: var(--color-contrast); font-size: var(--font-size-base); font-weight: var(--fw-medium);
  text-decoration: none; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
  margin-top: var(--spacing-10);
}
.hp-no-results__clear:hover {
  background: var(--color-surface-3); border-color: var(--color-accent-border); color: var(--color-accent-1);
}
.hp-icon { color: var(--color-contrast-muted); }

/* ============================================================================
   14. HP PAGINATION
   ============================================================================ */

/* .hp-pagination — outer wrapper: compact centered row of page buttons.
 * FIX JOB-05/06/07 / FL-12/13/14 (2026-06-02): was full-width (968px), margin-top:48px,
 * wrapping to 2 rows at 375px. Design: 356px max-width, centered, 0 top gap, single row.
 * max-width:356px + margin:0 auto constrains width without breaking flex-children.
 * margin-top:0 removes the 48px gap above pagination (spacing handled by content column pb).
 * flex-wrap:nowrap + overflow:hidden ensures single row at all viewports.
 */
.hp-pagination {
  display: flex; align-items: center; gap: var(--spacing-20);
  justify-content: center;
  max-width: 356px;
  margin: 0 auto;
  flex-wrap: nowrap;
  overflow: hidden;
  list-style: none; padding: 0;
}
.hp-pagination a, .hp-pagination span, a.page-numbers, span.page-numbers {
  min-width: 2.75rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--spacing-30);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  background: var(--color-base-elevated); color: var(--color-contrast-muted);
  font-size: var(--font-size-base); font-weight: var(--fw-medium);
  text-decoration: none; transition: all var(--transition);
}
.hp-pagination a:hover, a.page-numbers:hover { color: var(--color-contrast); border-color: var(--color-neutral-strong); background: var(--color-surface-2); }
.hp-pagination .hp-pagination__current, .hp-pagination .current, span.page-numbers.current {
  background: var(--color-accent-weak); border-color: var(--color-accent-border); color: var(--color-accent-1);
}
.hp-pagination .hp-pagination__dots, span.page-numbers.dots { border: 0; background: transparent; color: var(--color-contrast-subtle); }

/* ============================================================================
   15. HP WIDGET / FILTER SIDEBAR GLOBAL
   ============================================================================ */

.hp-widget { background: transparent; border: 0; padding: 0; }
.hp-widget__title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle); font-weight: var(--fw-semibold); margin: 0 0 var(--spacing-30);
}

/* ============================================================================
   16. RATING STARS (hp-rating from Reviews extension)
   Actual DOM (hivepress-reviews 1.4.x):
     <div class="hp-listing__rating hp-rating">
       <div class="hp-rating__stars hp-rating-stars" data-component="rating" data-value="4.8">
         <!-- JS inserts: <i class="fas fa-star active"></i> × 5, with active/half states -->
       </div>
       <a class="hp-rating__details" href="…#reviews">
         <span class="hp-rating__value">4.8</span>
         <span class="hp-rating__count">(12)</span>
       </a>
     </div>
   ============================================================================ */

.hp-rating { display: inline-flex; align-items: center; gap: var(--spacing-20); }

/* Container rendered by JS component="rating" */
.hp-rating-stars {
  display: inline-flex; align-items: center; gap: 0.1em;
  font-size: 0; /* reset before <i> children set their own */
  line-height: 1;
}

/* Star glyphs — Font Awesome <i> tags injected by HP's rating JS component */
.hp-rating-stars i {
  font-size: 0.875rem;
  line-height: 1;
  color: var(--color-neutral-strong); /* dim = unfilled */
}
.hp-rating-stars i:not(:first-child) { margin-left: 2px; }

/* Filled / active star */
.hp-rating-stars i.active { color: var(--color-rating-star); }

/* Half-star: filled half via clip trick (HP's own approach) */
.hp-rating-stars i.active.fa-star-half::before { position: relative; z-index: 1; }
.hp-rating-stars i.active.fa-star-half::after {
  content: '\f005'; /* fa-star */
  color: var(--color-neutral-strong);
  position: absolute; left: 0; top: 0;
}

/* Numeric value + review count */
.hp-rating__details { color: inherit; text-decoration: none; white-space: nowrap; }
.hp-rating__value { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-contrast); }
.hp-rating__count { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); margin-left: 0.15em; }

/* Legacy span-based stars (fallback for older HP renders) */
.hp-rating__stars {
  color: var(--color-neutral-strong); letter-spacing: 0.08em; font-size: 0.875rem; line-height: 1;
  position: relative; display: inline-block;
}
.hp-rating__stars .hp-rating__stars-fill {
  position: absolute; top: 0; left: 0; overflow: hidden;
  color: var(--color-rating-star); white-space: nowrap;
}

/* ============================================================================
   17. WL FREELANCER CARD EXTRAS
   Elements injected by wl_alter_listing_view_block_blocks() via the theme
   template part hivepress/listing/view/block/listing-footer.php.
   The outer wrapper is now a <div class="wl-card-foot"> (not <footer>) to
   avoid nested <footer> elements (P5 fix: invalid HTML5).
   ============================================================================ */

/* HP outer container (now <div> not <footer> — P5 fix).
 * HP frontend.min.css sets .hp-listing--view-block .hp-listing__footer to
 * display:flex; justify-content:space-between; align-items:center (row).
 * We override to column + align-items:stretch so child rows (wl-project__meta,
 * wl-project__foot) fill the full card width instead of shrinking to content
 * width and being centred. */
.hp-listing__footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Our inner content wrapper — identity → skills → rate+button row */
.wl-card-foot {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-30);
  padding-top: var(--spacing-40);
  border-top: 1px solid var(--color-neutral);
  margin-top: auto;
}

/* ---- Freelancer identity block (P1) ---- */
.wl-vendor__id {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.wl-vendor__name {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  margin: 0;
  line-height: 1.3;
}
.wl-vendor__role {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  font-weight: var(--fw-medium);
  margin: 0;
  line-height: 1.3;
}
.wl-vendor__avail {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  margin-top: 0.1rem;
}
.wl-vendor__loc {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  font-weight: var(--fw-regular);
  margin-top: 0.1rem;
}

/* Skill tags wrapper — single compact row.
 * FIX FL-08/09 (2026-06-02): was flex-wrap:wrap (2 rows at 60px). Design shows 1 row
 * (28px). flex-wrap:nowrap + overflow:hidden clips extra tags at container edge.
 * max-height:1.75rem = one row of h=1.625rem tags + small buffer. Text overflow on
 * individual tags via .wl-tag max-width below.
 */
.wl-skill-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-20);
  overflow: hidden;
  max-height: 1.75rem;
}

/* Skill tag chip.
 * FIX FL-09 (2026-06-02): design tags ≈66px avg. Live was 93–165px (text wrapping
 * because white-space:nowrap + full text). Adding max-width:8rem (128px) with
 * overflow:hidden + text-overflow:ellipsis clips long skill names to a compact width.
 * flex-shrink:0 prevents tags from collapsing below readable size.
 */
.wl-tag {
  display: inline-flex; align-items: center;
  height: 1.625rem; padding: 0 var(--spacing-30);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral);
  color: var(--color-contrast-muted);
  font-size: var(--font-size-sm); font-weight: var(--fw-medium);
  white-space: nowrap;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.wl-tag--more {
  background: transparent;
  border-color: transparent;
  color: var(--color-contrast-subtle);
  padding: 0;
}

/* Rate + View Profile row */
.wl-card-foot__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-30);
  flex-wrap: wrap;
}

/* Hourly rate display */
.wl-listing-rate {
  display: inline-flex; align-items: baseline; gap: 0.05em;
  line-height: 1;
}
/* Currency symbol — sits flush left of the number */
.wl-listing-rate__cur {
  font-size: var(--font-size-md);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: 0;
}
.wl-listing-rate__value {
  font-size: var(--font-size-md);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: var(--tracking-tight);
}
.wl-listing-rate__per {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  font-weight: var(--fw-medium);
  margin-left: 0.1em;
}

/* View Profile button — inherits .hp-button.hp-button--secondary; just size tweak */
.wl-view-profile-btn {
  min-height: 2.25rem;
  padding: 0 var(--spacing-40);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}
/* Invite to Project button — primary CTA for logged-in customers (P2) */
.wl-invite-btn {
  min-height: 2.25rem;
  padding: 0 var(--spacing-40);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

/* "New" badge — shown on freelancer cards instead of <3-review star rating */
.wl-badge-new {
  display: inline-flex; align-items: center;
  height: 1.5rem; padding: 0 var(--spacing-30);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent-1) 12%, transparent);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-1);
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug); white-space: nowrap;
}

/* ============================================================================
   18. PROJECT DETAIL — CTA and layout polish
   Primary CTA (Submit Proposal / Make an Offer) must be emerald.
   The HP form submit button inside .hp-form--offer-make should always be
   --primary (accent-1). We also ensure the customer-sidebar vendor block
   and the offers list look right.
   ============================================================================ */

/* Ensure the submit button in offer-make form is primary-coloured.
 * Override in case HP adds hp-button--secondary class to it. */
.hp-form--offer-make .hp-form__button input[type="submit"],
.hp-form--offer-make .hp-form__button button[type="submit"],
.hp-form--offer-make .hp-form__footer .hp-button--primary {
  background: var(--color-accent-1) !important;
  color: var(--color-accent-on) !important;
  border-color: var(--color-accent-1) !important;
  width: 100%;
  justify-content: center;
}
.hp-form--offer-make .hp-form__button input[type="submit"]:hover,
.hp-form--offer-make .hp-form__button button[type="submit"]:hover,
.hp-form--offer-make .hp-form__footer .hp-button--primary:hover {
  background: var(--color-accent-1-hover) !important;
  border-color: var(--color-accent-1-hover) !important;
}

/* Remove default HP card treatment on listing > * so content blocks don't double-border */
body.hp-template--request-view-page .hp-page__content .hp-listing > *:first-child {
  border-top: 0;
}

/* Tighten vertical spacing in main content column */
body.hp-template--request-view-page .hp-page__content .hp-listing {
  gap: var(--spacing-40);
}

/* Skills row in project detail */
body.hp-template--request-view-page .hp-listing__tags {
  display: flex; flex-wrap: wrap; gap: var(--spacing-20);
}
body.hp-template--request-view-page .hp-listing__tags a,
body.hp-template--request-view-page .hp-listing__tags span {
  display: inline-flex; align-items: center;
  height: 1.75rem; padding: 0 var(--spacing-30);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  background: var(--color-surface-2); border: 1px solid var(--color-neutral);
  color: var(--color-contrast-muted);
  font-size: var(--font-size-sm); font-weight: var(--fw-medium);
  text-decoration: none; white-space: nowrap;
}

/* Customer vendor block avatar */
body.hp-template--request-view-page .hp-vendor__image {
  width: 3rem; height: 3rem; flex: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--color-neutral-strong);
  background: var(--color-surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: var(--fw-semibold); color: var(--color-contrast-muted);
}
body.hp-template--request-view-page .hp-vendor__image img { width: 100%; height: 100%; object-fit: cover; }

/* Vendor block layout polish */
body.hp-template--request-view-page .hp-vendor--view-block {
  overflow: hidden;
}
body.hp-template--request-view-page .hp-vendor__header {
  padding-bottom: var(--spacing-40);
  border-bottom: 1px solid var(--color-neutral);
  margin-bottom: 0;
}
body.hp-template--request-view-page .hp-vendor__footer {
  gap: var(--spacing-30);
}

/* ============================================================================
   19. FREELANCER PROFILE — header band + sections polish
   Our wl_alter_listing_view_page() filter injects wl_profile_header part at
   order 5, removes HP's listing_title (order 10) and listing_details_primary
   (order 20). The remaining HP content (listing_images → listing_description
   override with About/Skills/Details → Reviews) follows from order 40+.
   ============================================================================ */

/* ── Profile header band ──────────────────────────────────────────────────── */

/* WLS-31: .wl-avatar--xl canonical definition moved to global.css (6rem circle).
 * Removed the 5rem definition that was here — it conflicted with the 6rem one
 * below and both were missing on non-HP pages (dashboard). See global.css. */

.wl-prof-header {
  background: var(--color-neutral-bg);
  border-bottom: 1px solid var(--color-neutral);
  padding: var(--spacing-60) var(--spacing-50);
  margin-bottom: var(--spacing-60);
  position: relative;
  overflow: hidden;
}
/* Dot pattern decoration */
.wl-prof-header::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: .3;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-contrast) 8%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(80% 100% at 100% 0%, #000, transparent 70%);
          mask-image: radial-gradient(80% 100% at 100% 0%, #000, transparent 70%);
}

.wl-prof-header__in {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: var(--spacing-50); flex-wrap: wrap;
}

.wl-prof-avatar {
  margin-top: var(--spacing-10);
}

.wl-prof-id {
  flex: 1; min-width: 0;
}

.wl-prof-name {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--color-contrast);
  margin: 0 0 var(--spacing-20);
}

.wl-prof-headline {
  font-size: var(--font-size-md);
  color: var(--color-contrast-muted);
  margin: 0 0 var(--spacing-30);
  line-height: 1.3;
}

.wl-prof-metarow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--spacing-30);
}

.wl-prof-loc {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  font-size: var(--font-size-sm); color: var(--color-contrast-muted);
}
.wl-prof-loc svg { color: var(--color-contrast-subtle); flex-shrink: 0; }

/* Accent tag variant for English level badge */
.wl-tag--accent {
  background: var(--color-accent-weak);
  border-color: var(--color-accent-border);
  color: var(--color-accent-1);
}

.wl-prof-rate {
  flex-shrink: 0; text-align: right; margin-top: var(--spacing-10);
}
.wl-prof-rate__amount {
  display: flex; align-items: baseline; gap: 0.1em; line-height: 1;
}
.wl-prof-rate__cur {
  font-size: var(--font-size-md); font-weight: var(--fw-semibold);
  color: var(--color-accent-1);
}
.wl-prof-rate__val {
  font-size: var(--font-size-2xl, 2rem); font-weight: var(--fw-bold);
  color: var(--color-accent-1); letter-spacing: var(--tracking-tight);
}
.wl-prof-rate__per {
  font-size: var(--font-size-sm); color: var(--color-contrast-subtle);
  font-weight: var(--fw-medium); margin-left: 0.15em;
}

@media (max-width: 640px) {
  .wl-prof-header__in { flex-direction: column; }
  .wl-prof-rate { text-align: left; margin-top: 0; }
}

/* Profile content area padding — wl-prof-header is full-width, no padding needed at top */
body.hp-template--listing-view-page .hp-page__content {
  padding-top: 0;
}

/* Hide the "Details" single-tab topbar — adds no UI value when only one tab exists */
body.hp-template--listing-view-page .hp-page__topbar.hp-page__topbar--separate {
  display: none !important;
}

/* Rating on profile page */
body.hp-template--listing-view-page .hp-listing__rating {
  gap: var(--spacing-30);
}
body.hp-template--listing-view-page .hp-listing__rating .hp-rating-stars i {
  font-size: 1rem;
}

/* Reviews section polish */
body.hp-template--listing-view-page .hp-review__header {
  gap: var(--spacing-40);
}
/* .hp-review__image now wraps a .wl-avatar (initials badge) via theme override */
body.hp-template--listing-view-page .hp-review__image {
  flex: none;
}
/* WL-11: the wl-stars inside .hp-review__rating (our override) already has margin-bottom
   from inline style; keep the HP container transparent so spacing is correct. */
body.hp-template--listing-view-page .hp-review__details {
  display: flex; flex-direction: column; gap: var(--spacing-10);
}
body.hp-template--listing-view-page .hp-review__created-date { color: var(--color-contrast-subtle); font-size: var(--font-size-sm); }

/* Skills section — profile page .hp-listing__tags and .wl-skill-tags on profile */
body.hp-template--listing-view-page .hp-listing__tags a,
body.hp-template--listing-view-page .wl-skill-tags .wl-tag {
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
body.hp-template--listing-view-page .hp-listing__tags a:hover {
  color: var(--color-accent-1); border-color: var(--color-accent-border); background: var(--color-accent-weak);
}

/* About / Skills / Details sections injected by listing-description.php override */
body.hp-template--listing-view-page .wl-about-block,
body.hp-template--listing-view-page .wl-skills-block,
body.hp-template--listing-view-page .wl-details-block {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-60);
  margin-bottom: var(--spacing-50);
}

/* Profile details key-value pairs */
.wl-profile-details-row {
  display: flex; flex-direction: column; gap: var(--spacing-30);
}
.wl-profile-detail {
  display: flex; align-items: baseline; gap: var(--spacing-30);
  padding-block: var(--spacing-20);
  border-bottom: 1px solid var(--color-neutral);
}
.wl-profile-detail:last-child { border-bottom: 0; }
.wl-profile-detail__label {
  font-size: var(--font-size-sm); font-weight: var(--fw-medium);
  color: var(--color-contrast-subtle); min-width: 8rem; flex: none;
  text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 0.7rem;
}
.wl-profile-detail__value {
  font-size: var(--font-size-base); font-weight: var(--fw-medium); color: var(--color-contrast);
}

/* Sidebar stat card */
.wl-profile-stat-card {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-50);
  display: flex; flex-direction: column; gap: var(--spacing-40);
}
.wl-profile-stat-card__rate {
  padding-bottom: var(--spacing-40);
  border-bottom: 1px solid var(--color-neutral);
}
.wl-profile-stat-card__rate .wl-listing-rate__value {
  font-size: var(--font-size-xl);
}
.wl-profile-stat-card__rating {
  gap: var(--spacing-20);
}
.wl-profile-stat-card__detail {
  display: flex; align-items: baseline;
  gap: var(--spacing-30);
  font-size: var(--font-size-sm);
}
.wl-profile-stat-card__detail .wl-profile-detail__label { min-width: 5rem; }

/* Actions on profile page */
body.hp-template--listing-view-page .hp-listing__actions--primary {
  display: flex; flex-direction: column; gap: var(--spacing-20);
}
body.hp-template--listing-view-page .hp-listing__action--message[class*="button--primary"] {
  width: 100%; justify-content: center; text-align: center;
}

/* Hide HP's empty attributes block in sidebar (no HP attributes configured) */
body.hp-template--listing-view-page .hp-listing__attributes--primary:empty,
body.hp-template--listing-view-page [data-block="listing_attributes_primary"]:empty {
  display: none;
}

/* ============================================================================
   20. FREELANCER PROFILE — HEADER BAND (.wl-prof-header)
   Injected by hivepress/listing/view/page/listing-profile-header.php
   Mirrors the design: full-width elevated band with dot-bg pattern.
   Avatar slot is a placeholder (deferred by Andrew).
   ============================================================================ */

/*
 * Profile header band.
 * Rendered inside .hp-page__content (left grid column of the profile page grid).
 * We cannot escape to full viewport width from inside a grid column without
 * disrupting layout — instead we render an elevated card that spans the full
 * content column and carries the dot-pattern background.
 */
.wl-prof-header {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-50);
  box-sizing: border-box;
}

/* Dot pattern overlay */
.wl-prof-header::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: .45;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-contrast) 7%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(100% 120% at 88% 0%, #000, transparent 60%);
          mask-image: radial-gradient(100% 120% at 88% 0%, #000, transparent 60%);
}

/* Inner — padding only (no width constraint: card already constrains width) */
.wl-prof-header__in {
  padding: var(--spacing-70) var(--spacing-60) var(--spacing-60);
  position: relative; /* above ::after dot layer */
  display: flex;
  gap: var(--spacing-60);
  align-items: flex-start;
  flex-wrap: wrap;
}

/* WLS-31: .wl-avatar--xl canonical definition is now in global.css.
 * Second duplicate removed from here to eliminate the 5rem vs 6rem conflict. */

/* Avatar placeholder */
.wl-prof-avatar {
  flex: none;
}

/* Identity column */
.wl-prof-id {
  min-width: 0; flex: 1;
  display: flex; flex-direction: column; gap: var(--spacing-20);
}

/* Name (h1) */
.wl-prof-name {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--color-contrast);
  margin: 0;
}

/* Tagline / profession */
.wl-prof-headline {
  font-size: var(--font-size-md);
  color: var(--color-contrast-muted);
  margin: 0;
}

/* Meta row: location · english badge · stars */
.wl-prof-metarow {
  display: flex;
  align-items: center;
  gap: var(--spacing-50);
  flex-wrap: wrap;
  margin-top: var(--spacing-20);
}

/* Location chip */
.wl-prof-loc {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
}
.wl-prof-loc svg { flex: none; color: var(--color-contrast-subtle); }

/* Stars in header — inherit global .wl-stars */
/* (wl-stars is defined in global.css / components) */

/* Rate block — pushes to right on wide, wraps below on mobile */
.wl-prof-rate {
  margin-left: auto;
  text-align: right;
  flex: none;
}
.wl-prof-rate__amount {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: var(--tracking-tight);
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
}
.wl-prof-rate__cur {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: 0;
}
.wl-prof-rate__val {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: var(--tracking-tight);
}
.wl-prof-rate__per {
  font-size: var(--font-size-base);
  color: var(--color-contrast-subtle);
  font-weight: var(--fw-medium);
  margin-left: 0.1em;
}

/* Sidebar stat card: rate value larger */
.wl-profile-stat-card__rate .wl-listing-rate__cur,
.wl-profile-stat-card__rate .wl-listing-rate__value {
  font-size: var(--font-size-xl);
}

/* Remove the CSS :before synthetic spacer that was added before the custom header band */
body.hp-template--listing-view-page .hp-page__content::before {
  display: none;
}

/* Profile page content starts right at the band — no extra top margin */
body.hp-template--listing-view-page .hp-page__content {
  padding-top: 0;
}

/* profile h1 injected by HP (listing_title block) is now removed via blocks filter;
 * as a safety net hide it if it somehow still renders */
body.hp-template--listing-view-page .hp-listing__title:not(.wl-prof-name) {
  display: none;
}

@media (max-width: 768px) {
  .wl-prof-rate { margin-left: 0; text-align: left; }
  .wl-prof-header__in { gap: var(--spacing-40); }
}

/* ============================================================================
   RESPONSIVE SAFETY
   ============================================================================ */

@media (max-width: 640px) {
  .hp-form--offer-make .hp-form__fields,
  .hp-form--offer-make .hp-form__footer { padding: var(--spacing-40); }

  body.hp-template--requests-view-page .hp-page__content,
  body.hp-template--listings-view-page .hp-page__content,
  body.hp-template--request-view-page .hp-page__content,
  body.hp-template--listing-view-page .hp-page__content {
    padding-block: var(--spacing-50) var(--spacing-70);
  }

  .wl-card-foot__row { flex-direction: column; align-items: flex-start; }
  .wl-view-profile-btn { width: 100%; justify-content: center; }
  /* .wl-view-details-btn is inside .wl-project__foot (space-between row with
   * poster left + btn right) — do NOT set width:100% here; that collapses
   * the poster to zero width on narrow screens. Button stays compact. */
}

/* ============================================================================
   21. JOBS CATALOG CARD — EXCERPT + VIEW DETAILS BUTTON
   FIX 1: The design card = status badge + category + title + excerpt +
   attributes divider + budget/deadline + "View Details" button.
   Injected via wl_alter_request_view_block_blocks() filter.
   ============================================================================ */

/*
 * Excerpt text (injected part wl_request_excerpt, class hp-listing__description).
 * hp-listing__description is already styled in section 5 for the catalog page.
 * The additional class wl-request-excerpt lets us target it specifically here
 * without colliding with the page-level description on the detail view.
 */
.wl-request-excerpt {
  font-size: var(--font-size-base);
  color: var(--color-contrast-muted);
  line-height: var(--lh-normal);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * "View Details" secondary button — sits in the card footer next to
 * the offer_make_link (which becomes icon-only after section 4 button reset).
 * The footer is a flex row; the button pushes to the right via margin-left:auto
 * when inside the actions container.
 */
.wl-view-details-btn {
  min-height: 2.25rem;
  padding: 0 var(--spacing-40);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  /* margin-left:auto removed — btn sits in .wl-project__foot which uses
   * justify-content:space-between; auto-margin is redundant there. */
}

/*
 * Footer row — make the actions area a proper flex row so the offer icon +
 * View Details button sit on the right.
 */
body.hp-template--requests-view-page .hp-listing__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-30);
  padding-top: var(--spacing-40);
  border-top: 1px solid var(--color-neutral);
  margin-top: auto;
  flex-wrap: wrap;
}

body.hp-template--requests-view-page .hp-listing__actions--primary {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
  margin-left: auto;
}

/*
 * The offer-make icon link (hp-listing__action--offer) is a modal trigger.
 * Show it as a compact icon-only secondary button so it does not compete
 * visually with "View Details" but remains accessible.
 */
body.hp-template--requests-view-page .hp-listing__action--offer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  width: 2.25rem;
  padding: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  color: var(--color-contrast-muted);
  font-size: 0.85rem;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  text-decoration: none;
}
body.hp-template--requests-view-page .hp-listing__action--offer:hover {
  background: var(--color-surface-3);
  border-color: var(--color-accent-border);
  color: var(--color-accent-1);
}

/* Poster/date row — sits left in the card footer */
body.hp-template--requests-view-page .hp-listing__footer .hp-listing__created-date {
  margin-right: auto;
}

/* ============================================================================
   22. FREELANCER PROFILE — CURRENT PROJECTS SECTION
   FIX 3: "Current Projects" section injected at order 55 via
   wl_alter_listing_view_page() → listing-current-projects.php part.
   Renders projects (hp_request posts) where the freelancer has an accepted offer.
   ============================================================================ */

/* Section wrapper — same card treatment as About / Skills */
.wl-current-projects-block {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-60);
  margin-bottom: var(--spacing-50);
}

.wl-current-projects-block h3 {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--spacing-40);
  letter-spacing: var(--tracking-snug);
  color: var(--color-contrast);
}

/* Empty state text */
.wl-section-empty {
  font-style: italic;
  color: var(--color-contrast-subtle);
  font-size: var(--font-size-base);
  margin: 0;
}

/* Project list */
.wl-proj-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual project row */
.wl-proj-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-50);
  padding-block: var(--spacing-40);
  border-bottom: 1px solid var(--color-neutral);
}
.wl-proj-row:last-child { border-bottom: 0; padding-bottom: 0; }
.wl-proj-row:first-child { padding-top: 0; }

.wl-proj-row__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

/* Project title link */
.wl-proj-row__title {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  text-decoration: none;
  line-height: var(--lh-tight);
  transition: color var(--transition);
}
.wl-proj-row__title:hover { color: var(--color-accent-1); }

/* Brief sub-line */
.wl-proj-row__sub {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  margin: 0;
  line-height: var(--lh-normal);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Status badge — flex-none on the right */
.wl-proj-row .wl-badge {
  flex: none;
  margin-top: 0.1rem; /* optical alignment with title baseline */
}

/* ============================================================================
   23. JOBS CATALOG — Page hero header (.wl-cat-pagehead)
   Injected by request/view/page/request-catalog-header.php into
   .hp-page__header (body.hp-template--requests-view-page) at _order 5.
   The HP search form follows at _order 10, visually below the hero band.
   ============================================================================ */

/*
 * Hero band container — lives inside .hp-page__header which already has
 * the dot-pattern background and border-bottom treatment (Section 5 above).
 * We just need padding + typography for the text content.
 */
body.hp-template--requests-view-page .wl-cat-pagehead {
  padding: var(--spacing-60) 0 var(--spacing-50);
  position: relative;
  z-index: 1; /* above ::after dot pattern */
}

/* Breadcrumb nav */
.wl-cat-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  margin-bottom: var(--spacing-30);
}
.wl-cat-breadcrumb a {
  color: var(--color-contrast-subtle);
  text-decoration: none;
  transition: color var(--transition);
}
.wl-cat-breadcrumb a:hover { color: var(--color-accent-1); }
.wl-cat-breadcrumb__sep {
  color: var(--color-neutral-strong);
  font-size: var(--font-size-sm);
}
.wl-cat-breadcrumb [aria-current="page"] {
  color: var(--color-contrast-muted);
}

/* Page title h1
 * FIX JOB-02 / FL-02 (2026-06-02): design = 48px / fw600 at 1440, 32px at 375.
 * Previous: clamp(1.6rem, 2.2vw+1rem, 2.25rem)=36px, fw700.
 * New: clamp(2rem, 2.2vw+1.2rem, 3rem) → 32px@375 / 48px@1440, fw600.
 */
.wl-cat-pagetitle {
  font-size: clamp(2rem, 2.2vw + 1.2rem, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-contrast);
  margin: 0 0 var(--spacing-30);
}
.wl-cat-pagetitle em {
  font-style: normal;
  color: var(--color-accent-1);
}

/* Subtitle */
.wl-cat-pagesub {
  font-size: var(--font-size-base);
  color: var(--color-contrast-muted);
  margin: 0 0 var(--spacing-40);
  max-width: 46rem;
  line-height: var(--lh-normal);
}

/* Separator between hero text and the HP search form */
body.hp-template--requests-view-page .hp-form--request-search,
body.hp-template--requests-view-page .hp-form--listing-search {
  padding-top: var(--spacing-40);
  border-top: 1px solid var(--color-neutral);
}

/* Search form layout: input + button side by side */
body.hp-template--requests-view-page .hp-form--request-search .hp-form__fields {
  display: flex;
  gap: var(--spacing-30);
  align-items: stretch;
  flex-wrap: wrap;
}
body.hp-template--requests-view-page .hp-form--request-search .hp-form__field--search {
  flex: 1;
  min-width: 0;
  margin: 0;
}
body.hp-template--requests-view-page .hp-form--request-search .hp-form__footer {
  flex-shrink: 0;
}

/* Mobile/tablet: filter toggle button — hide on desktop, show on <= 1024px.
 * HP frontend.css hides it at min-width:48em (768px) — override with !important
 * to ensure it's visible on tablet (768–1024px) where the sidebar is off-canvas.
 */
body.hp-template--requests-view-page .hp-button--mobile {
  display: none !important;
}
@media (max-width: 1024px) {
  body.hp-template--requests-view-page .hp-button--mobile {
    display: inline-flex !important;
    margin-top: var(--spacing-30);
    width: auto !important;
    align-items: center;
    gap: var(--spacing-20);
  }
}

/* Suppress the "Posts pagination" visually-hidden h2 HP/WP emits */
body.hp-template--requests-view-page .screen-reader-text,
body.hp-template--requests-view-page nav > h2.screen-reader-text {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ============================================================================
   24. JOBS CATALOG — wl-amount multi-currency in request cards
   The budget attribute is replaced by request-budget-amount.php which renders
   .wl-budget-attr containing a .wl-amount element with data-eur/usd/gbp.
   page-chrome.js handles switching; wl_jobs_catalog_a11y_script() handles init.
   ============================================================================ */

/* Budget attribute wrapper — mirrors native hp-listing__attribute layout */
.wl-budget-attr {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wl-budget-attr .hp-attribute__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle);
  margin-bottom: 0.25rem;
  font-weight: var(--fw-semibold);
}
.wl-budget-attr .hp-attribute__value {
  display: flex;
  align-items: baseline;
  gap: 0;
}

/* wl-amount inside a request card (catalog view) */
body.hp-template--requests-view-page .hp-listing__footer .wl-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: var(--font-size-md);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
body.hp-template--requests-view-page .hp-listing__footer .wl-amount__cur {
  font-size: 0.9em;
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  margin-right: 0.05em;
}
body.hp-template--requests-view-page .hp-listing__footer .wl-amount__val {
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
}

/* Ensure the footer attributes area is a flex row */
body.hp-template--requests-view-page .hp-listing__attributes--primary,
body.hp-template--requests-view-page .hp-listing__footer .hp-listing__attributes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-40);
  align-items: flex-start;
}

/* ============================================================================
   25. JOBS CATALOG — empty state + pagination polish
   ============================================================================ */

/*
 * HP .hp-no-results renders as an empty div by default — HP injects its message
 * via JS. We add a CSS fallback that shows when .hp-no-results:empty so the
 * page never shows a raw empty box.
 */
body.hp-template--requests-view-page .hp-no-results:empty {
  display: none;
}

/* Pagination — one centered horizontal row of bordered square buttons.
 *
 * DOM on Jobs: .hp-pagination (our wrapper in pagination.php)
 *                nav.navigation.pagination
 *                  .nav-links
 *                    span.page-numbers.current / a.page-numbers / span.page-numbers.dots
 *
 * .hp-pagination is styled globally (§14) as display:flex; justify-content:center.
 * nav is its only flex child — make it full-width so .nav-links centers inside it.
 * .nav-links is the actual flex row of buttons.
 */
/* FIX JOB-05/06/07 (2026-06-02): compact centered pagination.
 * .hp-pagination global §14 now constrains max-width:356px + margin:0 auto.
 * nav-links: flex-wrap nowrap for single-row at all viewports.
 */
body.hp-template--requests-view-page .navigation.pagination {
  margin-top: 0;
}
body.hp-template--requests-view-page .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-20);
  flex-wrap: nowrap;
}

/* ============================================================================
   26. JOBS CATALOG — Rich card elements (P2.3)
   Status badge + category, budget type label, poster row, proposals count.
   ============================================================================ */

/* wl-project__top — badge + category tag row at card top */
body.hp-template--requests-view-page .wl-project__top {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
  margin-bottom: var(--spacing-30);
  flex-wrap: wrap;
}

/* wl-budget-attr becomes a metaitem inside the footer meta row */
body.hp-template--requests-view-page .wl-budget-attr {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
body.hp-template--requests-view-page .wl-project__metalabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle);
  font-weight: var(--fw-semibold);
  display: block;
}

/* wl-project__foot — poster + proposals row.
 * width:100% ensures poster (left) + View Details button (right) span the full
 * card width via justify-content:space-between. */
body.hp-template--requests-view-page .wl-project__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-30);
  margin-top: var(--spacing-40);
  width: 100%;
}
body.hp-template--requests-view-page .wl-project__poster {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
  min-width: 0;
}
body.hp-template--requests-view-page .wl-project__postername {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-contrast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9rem;
  display: block;
}
body.hp-template--requests-view-page .wl-project__postersub {
  font-size: 0.7rem;
  color: var(--color-contrast-subtle);
  display: block;
}
body.hp-template--requests-view-page .wl-project__proposals {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* wl-project__meta — row wrapper: Budget metaitem LEFT, Deadline metaitem RIGHT.
 * Both .wl-project__metaitem children sit side by side, left-aligned.
 * Previously the two metaitems were injected as separate HP blocks with no
 * shared container — this wrapper (emitted by request-meta-row.php) fixes that.
 * width:100% ensures the row spans the full card width (parent footer is
 * flex-direction:column + align-items:stretch, so 100% = full card content box). */
body.hp-template--requests-view-page .wl-project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-40);
  align-items: flex-start;
  width: 100%;
}

/* wl-project__metaitem — pairs metalabel + value (budget row) */
body.hp-template--requests-view-page .wl-project__metaitem {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Stack meta items in footer as flex row */
body.hp-template--requests-view-page .hp-listing__footer .hp-listing__attributes,
body.hp-template--requests-view-page .hp-listing__attributes--primary {
  display: flex;
  gap: var(--spacing-40);
  flex-wrap: wrap;
  align-items: flex-start;
}

/* wl-project__skills — skill tag chip strip between excerpt and meta divider */
body.hp-template--requests-view-page .wl-project__skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
  margin-top: var(--spacing-20);
  margin-bottom: var(--spacing-10);
}

/* wl-project__divider — visual separator between excerpt/skills and meta row */
body.hp-template--requests-view-page .hp-listing__footer {
  border-top: 1px solid var(--color-neutral);
  margin-top: var(--spacing-30);
  padding-top: var(--spacing-30);
}

/* wl-deadline-attr / wl-budget-attr side-by-side in the meta row */
body.hp-template--requests-view-page .wl-deadline-attr {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* ============================================================================
   27. JOBS CATALOG — Sidebar filter extras (P2.4)
   h2 Filters heading, Status/Project type controls, Clear all / Apply buttons.
   ============================================================================ */

.wl-sidebar-filters {
  margin-bottom: var(--spacing-50);
}

.cat-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-50);
}

.cat-filters__title {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  margin: 0;
}

.cat-filters__clear {
  font-size: var(--font-size-sm);
  color: var(--color-accent-1);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.cat-filters__clear:hover {
  text-decoration: underline;
}
.cat-filters__clear--disabled {
  color: var(--color-contrast-subtle);
  cursor: default;
}

.cat-fgroup {
  margin-bottom: var(--spacing-50);
}

.cat-fgroup__label {
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle);
  margin-bottom: var(--spacing-30);
}

.cat-fgroup__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.cat-frow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Count badge next to filter label (category + status) */
.cat-frow__count {
  font-size: 0.72rem;
  color: var(--color-contrast-subtle);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: var(--spacing-20);
}

.wl-sidebar-filters__apply {
  width: 100%;
}

/* ============================================================================
   28. VIEW TOGGLE — shared styles for both catalogs
   The per-catalog size overrides live in the WLS-5/WLS-10 toolbar sections above.
   ============================================================================ */

/* Toggle button group wrapper */
.cat-viewtoggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Individual toggle button base styles */
.cat-viewtoggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* default size — overridden to 2.5rem by per-catalog topbar rules */
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  color: var(--color-contrast-muted);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.cat-viewtoggle__btn[aria-pressed="true"],
.cat-viewtoggle__btn:hover {
  background: var(--color-surface-3);
  border-color: var(--color-accent-border);
  color: var(--color-accent-1);
}

/* ============================================================================
   28b. JOBS CATALOG — Active filter chips (B4) + "Sort by" label (B6)
   Active chips render below the topbar, above the card feed.
   ============================================================================ */

/* Active filter chips container */
body.hp-template--requests-view-page .wl-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-20);
  margin-bottom: var(--spacing-40);
}

/* Individual chip */
body.hp-template--requests-view-page .wl-activechip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  background: var(--color-accent-weak);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-accent-1);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* × remove button inside chip */
body.hp-template--requests-view-page .wl-activechip button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity var(--transition);
}
body.hp-template--requests-view-page .wl-activechip button:hover {
  opacity: 1;
}

/* "Sort by" label injected before HP sort select */
body.hp-template--requests-view-page .wl-sort-label {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
/* NOTE: sort form flex rules are now in the WLS-5 toolbar section above —
 * the old duplicate inline-flex here has been removed to avoid conflicts. */

/* ============================================================================
   29. FREELANCERS CATALOG — Page hero header (.wl-cat-pagehead)
   Injected by vendor/view/page/vendor-catalog-header.php into
   .hp-page__header (body.hp-template--listings-view-page) at _order 5.
   Shares .wl-cat-pagetitle / .wl-cat-breadcrumb / .wl-cat-pagesub with Jobs.
   ============================================================================ */

body.hp-template--listings-view-page .wl-cat-pagehead {
  padding: var(--spacing-60) 0 var(--spacing-50);
  position: relative;
  z-index: 1;
}

/* Separator between hero text and HP search form */
body.hp-template--listings-view-page .hp-form--listing-search {
  padding-top: var(--spacing-40);
  border-top: 1px solid var(--color-neutral);
}

/* Search form layout: input + button side by side */
body.hp-template--listings-view-page .hp-form--listing-search .hp-form__fields {
  display: flex;
  gap: var(--spacing-30);
  align-items: stretch;
  flex-wrap: wrap;
}
body.hp-template--listings-view-page .hp-form--listing-search .hp-form__field--search {
  flex: 1;
  min-width: 0;
  margin: 0;
}
body.hp-template--listings-view-page .hp-form--listing-search .hp-form__footer {
  flex-shrink: 0;
}

/* Mobile filter toggle */
body.hp-template--listings-view-page .hp-button--mobile {
  display: none !important;
}
@media (max-width: 1024px) {
  body.hp-template--listings-view-page .hp-button--mobile {
    display: inline-flex !important;
    margin-top: var(--spacing-30);
    width: auto !important;
    align-items: center;
    gap: var(--spacing-20);
  }
}

/* Suppress screen-reader pagination heading */
body.hp-template--listings-view-page .screen-reader-text,
body.hp-template--listings-view-page nav > h2.screen-reader-text {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ============================================================================
   30. FREELANCERS CATALOG — wl-amount multi-currency in listing cards
   listing-footer.php renders .wl-amount.wl-listing-rate with data-eur/usd/gbp.
   page-chrome.js handles switching; wl_listings_catalog_js() handles init.
   ============================================================================ */

/* wl-amount in listing card footer */
body.hp-template--listings-view-page .hp-listing__footer .wl-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: var(--font-size-md);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
body.hp-template--listings-view-page .hp-listing__footer .wl-amount__cur {
  font-size: 0.9em;
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  margin-right: 0.05em;
}
body.hp-template--listings-view-page .hp-listing__footer .wl-amount__val {
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
}
body.hp-template--listings-view-page .hp-listing__footer .wl-amount__per {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin-left: 0.15em;
  font-weight: var(--fw-medium);
}

/* NOTE: Section 31 (old Freelancers topbar) has been replaced by the WLS-10
 * toolbar block in section 7 (body.hp-template--listings-view-page topbar). */

/* Empty state: hide bare .hp-no-results container */
body.hp-template--listings-view-page .hp-no-results:empty {
  display: none;
}

/* Pagination — compact centered row.
 * FIX FL-12/13/14 (2026-06-02): margin-top:0 (was spacing-70=48px), nav-links nowrap.
 * .hp-pagination global §14 already constrains max-width:356px + margin:0 auto.
 */
body.hp-template--listings-view-page .navigation.pagination {
  margin-top: 0;
}
body.hp-template--listings-view-page .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-20);
  flex-wrap: nowrap;
}

/* NOTE: Section 32 (old Freelancers flex-row list layout) has been replaced
 * by the WLS-11 grid-template-areas block in section 7 above. */

/* ============================================================================
   33. FREELANCERS CATALOG — Sidebar filter extras (Availability, Rating)
   Shares cat-fgroup / cat-frow / cat-filters__head etc. with Jobs (section 27).
   Extra: .wl-rating-star for inline star icon in rating radio labels.
   ============================================================================ */

/* Star icon in rating filter labels */
.wl-rating-star {
  color: var(--color-rating-star);
  font-style: normal;
}

/* ============================================================================
   34. FREELANCERS CATALOG — role-gating redirect prevention
   The catalog is customer-only; freelancers are redirected by FME Access layer.
   No CSS needed — this is a purely server-side concern.
   ============================================================================ */

/* Ensure aside has the labelled role exposed by JS (aria-label="Filters").
   We cannot set it server-side because HP renders the aside without it. */
body.hp-template--listings-view-page .hp-page__sidebar[aria-label="Filters"] {
  /* Confirmed labelled at runtime by wl_listings_catalog_js() */
}

@media (max-width: 768px) {
  body.hp-template--listings-view-page .hp-listings[data-view="list"] .hp-listing--view-block {
    flex-direction: column;
  }
  body.hp-template--listings-view-page .hp-listings[data-view="list"] .hp-listing__footer {
    border-left: none;
    border-top: 1px solid var(--color-neutral);
    padding-left: 0;
    padding-top: var(--spacing-40);
    margin-top: var(--spacing-30);
    min-width: 0;
  }
}

/* ============================================================================
   GATE NOTICE BANNER (?gate_notice= query param)
   Injected by Viktor's FME role-gate on redirect to catalog pages.
   Rendered by wl_gate_notice_banner() in inc/hivepress.php at wp_body_open.
   ============================================================================ */
.wl-gate-notice {
  display: flex; align-items: flex-start; gap: var(--spacing-30);
  padding: var(--spacing-30) var(--spacing-50);
  background: color-mix(in srgb, var(--color-accent-1) 10%, transparent);
  border-bottom: 1px solid var(--color-accent-border);
  font-size: var(--font-size-sm); color: var(--color-contrast);
  line-height: var(--lh-normal);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}
.wl-gate-notice__icon {
  flex: none; width: 1.1rem; height: 1.1rem;
  color: var(--color-accent-1); margin-top: 0.1rem;
}
.wl-gate-notice__text { flex: 1; }
.wl-gate-notice__dismiss {
  flex: none; background: transparent; border: 0; padding: 0.2rem;
  cursor: pointer; color: var(--color-contrast-subtle); line-height: 1;
  font-size: 1rem; border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.wl-gate-notice__dismiss:hover { color: var(--color-contrast); }
.wl-gate-notice__dismiss:focus-visible { outline: 2px solid var(--color-accent-1); outline-offset: 2px; }

/* ============================================================================
   35. HP NATIVE FILTER FORM — Category radios + number-range (budget / hourly rate)
   Applies to: .hp-form--request-filter  (Jobs /requests/)
               .hp-form--listing-filter  (Freelancers /listings/)

   HP's frontend.min.css sets (confirmed 2026-06-01):
     .hp-field--radio           { max-height: 24.33rem; overflow-y: auto }
     .hp-field--number-range    { display: flex; flex-wrap: wrap; margin: 0 -.5rem }
     .hp-field--number-range input[type=number] { width: 100%; margin: 0 .5rem; flex: 1 }
     .hp-field--number-range > div { flex: 0 1 100%; margin: 1rem .5rem 0 }  ← noUiSlider

   DOM (scoped to .hp-widget--listing-filter, confirmed from HP PHP source):
     .hp-form__field.hp-form__field--radio
       .hp-field__label              ← "Category" heading
       .hp-field.hp-field--radio
         ul > li > label[for]
           input[type=radio]
           span                      ← category name text

     .hp-form__field.hp-form__field--number-range
       .hp-field__label              ← "Budget (EUR)" / "Hourly rate (EUR)"
       .hp-field.hp-field--number-range[data-component="range-slider"]
         input[type=number] name="budget[]"  placeholder="Min"
         input[type=number] name="budget[]"  placeholder="Max"
         div.noUi-target             ← injected by HP JS range-slider component
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   A. Category radio list
   ────────────────────────────────────────────────────────────────────────── */

/*
 * HP sets max-height: 24.33rem + overflow-y: auto on .hp-field--radio,
 * creating a scrollable box that clips category labels.
 * Override: remove scroll cap entirely so the full list is in normal flow
 * and parent containers expand naturally.
 */
.hp-widget--listing-filter .hp-field--radio {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

/* Single-column flex list — override any HP column/wrap behaviour */
.hp-widget--listing-filter .hp-field--radio ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  overflow: visible;
}

/* Each row: block, full width — no flex justify-content that clips labels */
.hp-widget--listing-filter .hp-field--radio li {
  display: block;
  width: 100%;
  margin: 0 !important; /* override HP's li:not(:last-child) { margin-bottom } */
}

/*
 * <label> — mirrors wl-check layout:
 * [ radio-disc ][ label text (wraps) ]
 * Full width prevents text truncation on narrow sidebar.
 */
.hp-widget--listing-filter .hp-field--radio label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-30);
  min-height: 2.25rem;
  width: 100%;
  cursor: pointer;
  white-space: normal;
  overflow: visible;
  margin: 0;
}

/* Label text — wraps at word boundary, never clips */
.hp-widget--listing-filter .hp-field--radio label span {
  font-size: var(--font-size-base);
  color: var(--color-contrast);
  font-weight: var(--fw-regular);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

/*
 * Native radio input → hide browser chrome; draw custom wl-check__box--radio.
 * HP sets visibility:visible !important in its CSS — we use appearance:none
 * instead of visibility:hidden to keep the element in the accessibility tree.
 */
.hp-widget--listing-filter .hp-field--radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  /* custom disc */
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: var(--radius-full);
  display: grid;
  place-content: center;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
  margin: 0 !important; /* override HP's input[type=radio] { margin-right:.5rem } */
  padding: 0;
}
.hp-widget--listing-filter .hp-field--radio input[type="radio"]:checked {
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
}
.hp-widget--listing-filter .hp-field--radio input[type="radio"]:checked::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-accent-on);
}
.hp-widget--listing-filter .hp-field--radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────────
   B. Number-range field (budget / hourly-rate)
   ────────────────────────────────────────────────────────────────────────── */

/*
 * HP layout: flex-wrap:wrap + margin:0 -.5rem on wrapper + margin:0 .5rem on
 * each input → two inputs stacked (each 100% wide after wrapping).
 * noUiSlider > div also full-width.
 * We replace with: noUiSlider track full-width on row 1, then [Min]—[Max] on row 2.
 */
.hp-widget--listing-filter .hp-field--number-range {
  display: flex;
  flex-wrap: wrap;          /* keep wrap for slider row + inputs row */
  align-items: center;
  gap: var(--spacing-20) var(--spacing-30);
  margin: 0 !important;     /* cancel HP's negative margin */
  overflow: visible;
}

/*
 * Each number input: half-width in the inputs row.
 * HP sets flex:1 width:100% margin:0 .5rem — we override with flex:1 + no margin.
 * The dash (—) is injected via ::after between inputs using flex order.
 */
.hp-widget--listing-filter .hp-field--number-range input[type="number"] {
  flex: 1;
  min-width: 0;
  width: auto !important;   /* cancel HP's width:100% that forces each input to full row */
  margin: 0 !important;     /* cancel HP's margin:0 .5rem */
  min-height: 2.5rem;
  padding: var(--spacing-20) var(--spacing-30);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  transition: border-color var(--transition), background var(--transition);
  -moz-appearance: textfield;
  order: 2; /* default; first-child gets order:1, last-child gets order:3 */
}
.hp-widget--listing-filter .hp-field--number-range input[type="number"]::-webkit-inner-spin-button,
.hp-widget--listing-filter .hp-field--number-range input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hp-widget--listing-filter .hp-field--number-range input[type="number"]::placeholder {
  color: var(--color-contrast-subtle);
}
.hp-widget--listing-filter .hp-field--number-range input[type="number"]:hover {
  border-color: var(--color-accent-border);
}
.hp-widget--listing-filter .hp-field--number-range input[type="number"]:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 1px;
  border-color: var(--color-accent-1);
}

/* Explicit flex order so the layout is: [Min input] [—] [Max input] */
.hp-widget--listing-filter .hp-field--number-range input[type="number"]:first-of-type { order: 1; }
.hp-widget--listing-filter .hp-field--number-range input[type="number"]:last-of-type  { order: 3; }

/* Em-dash via ::after, positioned between the two inputs */
.hp-widget--listing-filter .hp-field--number-range::after {
  content: "—";
  color: var(--color-contrast-subtle);
  flex: none;
  font-size: var(--font-size-base);
  line-height: 1;
  order: 2;
}

/*
 * noUiSlider .noUi-target (HP's > div rule = flex:0 1 100%):
 * Keep it full-width (own row at order:0 so it sits above the inputs row).
 * Restyle the track + handle to match design tokens.
 */
.hp-widget--listing-filter .hp-field--number-range > div {
  order: 0;
  flex: 0 0 100%;
  margin: 0 !important;     /* cancel HP's margin:1rem .5rem 0 */
  margin-bottom: var(--spacing-30) !important;
}
/* noUiSlider track */
.hp-widget--listing-filter .hp-field--number-range .noUi-target {
  height: 0.375rem;
  border: none;
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
  box-shadow: none;
}
.hp-widget--listing-filter .hp-field--number-range .noUi-connect {
  background: var(--color-accent-1);
}
.hp-widget--listing-filter .hp-field--number-range .noUi-handle {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-contrast);
  border: 2px solid var(--color-accent-1);
  box-shadow: var(--shadow-sm);
  top: -0.3rem;
  right: -0.5rem;
  cursor: grab;
}
.hp-widget--listing-filter .hp-field--number-range .noUi-handle::before,
.hp-widget--listing-filter .hp-field--number-range .noUi-handle::after {
  display: none;
}

/*
 * jQuery UI slider — HP range-slider component uses $().slider({range:true})
 * which injects:
 *   div.ui-slider.ui-widget.ui-widget-content.ui-corner-all  ← track
 *     div.ui-slider-range.ui-widget-header.ui-corner-all     ← fill
 *     span.ui-slider-handle (×2)                             ← knobs
 *
 * HP also wraps the whole slider in an extra <div> (slider.wrap('<div />')):
 *   .hp-field--number-range > div > div.ui-slider
 *
 * Confirmed via HP frontend.js (2026-06-01). noUiSlider rules above do not
 * fire because the actual widget is jQuery UI, not noUiSlider.
 */

/* Wrapper div HP injects around the slider */
.hp-widget--listing-filter .hp-field--number-range > div {
  position: relative;          /* ensure slider is positioned correctly inside */
}

/*
 * jQuery UI slider theme override.
 *
 * CRITICAL SELECTOR NOTE (discovered 2026-06-01):
 * HP's sidebar JS moves the budget/rate number-range field OUT of
 * .hp-widget--listing-filter into a custom .cat-fgroup wrapper (#wl-fgroup-budget).
 * After the move the slider DOM is no longer a descendant of .hp-widget--listing-filter,
 * so any selector starting with .hp-widget--listing-filter will NOT match.
 *
 * After the move the DOM path is:
 *   #wl-fgroup-budget > .hp-form__field--number-range
 *                         .hp-field--number-range
 *                           div (wrap)
 *                             div.ui-slider  ← slider track
 *                               div.ui-slider-range  ← fill
 *                               span.ui-slider-handle (×2)  ← knobs
 *
 * For listings, the field stays inside .hp-widget--listing-filter (not moved by JS).
 * We therefore use two independent rule groups:
 *   A) .hp-field--number-range .ui-slider* — broad, catches both moved and unmoved
 *   B) body.hp-template--* .hp-page__sidebar .ui-slider* — belt+suspenders for listings
 *
 * HP's jquery-ui.min.css loads AFTER hivepress.css (plugin CSS after theme CSS).
 * jQuery UI CSS does NOT use !important (except .ui-state-disabled cursor).
 * Our !important rules win over same-selector-specificity later rules.
 */

/* Track */
.hp-field--number-range .ui-slider {
  height: 0.375rem !important;
  border-radius: var(--radius-full) !important;
  background: var(--color-surface-3) !important;
  border: none !important;
  box-shadow: none !important;
  margin: var(--spacing-30) 0.5rem;
}

/* Range fill between handles */
.hp-field--number-range .ui-slider-range {
  background: var(--color-accent-1) !important;
  border-radius: var(--radius-full) !important;
  border: none !important;
}

/* Knob */
.hp-field--number-range .ui-slider-handle {
  top: 50% !important;
  transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 50% !important;
  background: var(--color-contrast) !important;
  border: 2px solid var(--color-accent-1) !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: grab !important;
  margin-left: -0.5rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.hp-field--number-range .ui-slider-handle:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 2px;
}
.hp-field--number-range .ui-slider-handle:active {
  cursor: grabbing !important;
  background: var(--color-contrast) !important;
  border-color: var(--color-accent-1) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-1) 25%, transparent) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   C. hp-form__field wrappers — overflow and separator
   ────────────────────────────────────────────────────────────────────────── */

/* Both field wrappers: no overflow clip */
.hp-widget--listing-filter .hp-form__field--radio,
.hp-widget--listing-filter .hp-form__field--number-range {
  overflow: visible;
}

/* "All categories" option is just another <li> — no special treatment needed */

/* ──────────────────────────────────────────────────────────────────────────
   D. Hourly-rate group: HP-native label + inputs rendered as one cat-fgroup
   ────────────────────────────────────────────────────────────────────────── */

/*
 * Before this fix, vendor-sidebar-filters.php emitted an orphaned .cat-fgroup
 * label "HOURLY RATE (EUR)" with no inputs under it, because the actual inputs
 * live inside HP's .hp-form--listing-filter further down in the sidebar.
 *
 * Fix: the orphaned .cat-fgroup has been removed from vendor-sidebar-filters.php.
 * The HP-native .hp-field__label inside .hp-form__field--number-range is now the
 * single label for the rate group. We style it to match .cat-fgroup__label and
 * add spacing/layout so the .hp-form__field--number-range block looks identical
 * to the other filter groups in the sidebar.
 */

/*
 * The .hp-form__field--number-range wrapper already receives border-top +
 * padding-block from the generic .hp-widget--listing-filter .hp-form__field rule
 * at line ~581. No extra box-model overrides needed here.
 *
 * The .hp-field__label inside number-range already inherits the generic
 * .hp-widget--listing-filter .hp-field__label styles (uppercase, small, muted)
 * at line ~587.  No additional label rules needed here.
 *
 * The .hp-field--number-range flex layout (inputs row) is already handled in
 * section B above.  This section D is intentionally empty — it exists as a
 * comment anchor so future editors know the orphaned-label issue was resolved
 * by removing the duplicate .cat-fgroup in vendor-sidebar-filters.php rather
 * than by adding CSS here.
 */

/* ============================================================================
   27. FREELANCER PROFILE PAGE — prof-* design-system classes
   Implements the .prof-header / .prof-layout / .prof-block / .prof-statcard
   design from deliverables/design/catalog.css (lines ~221–266) adapted for
   the HP template shell.

   HP DOM on listing-view-page:
     .hp-page (display:grid, 1fr 20rem) >
       .hp-row (display:contents) >
         .hp-page__content  → contains: .prof-header + .prof-block×N + HP Reviews
         .hp-page__sidebar  → contains: .prof-statcard

   Strategy:
   - .prof-header is a full-column-width band inside .hp-page__content.
     True full-viewport-width is a Phase-2 polish item (requires HP tree change).
     First pass: spans the full content column with elevated bg + dot pattern.
   - .hp-page__content is already display:flex flex-direction:column (section 8).
     .prof-block children have gap via .hp-page__content gap or own margin-bottom.
   - .hp-page__sidebar already sticky (section 8); .prof-statcard lives directly
     in it without additional wrapper.
   - HP Reviews extension injects reviews_container (type=section, .hp-section)
     into page_content at _order 100. We style it as a .prof-block equivalent.
   ============================================================================ */

/* ── Layout: override section 8 content column to use flex gap ───────────── */

body.hp-template--listing-view-page .hp-page__content {
  gap: var(--spacing-50); /* space between prof-header, prof-blocks, reviews */
}

/* ── Profile header band ─────────────────────────────────────────────────── */

/*
 * .prof-header occupies the full width of .hp-page__content (the left column).
 * For first-pass, it's a styled card — not a true full-viewport band.
 * True full-bleed would require moving this block to a separate HP template
 * area above the two-column grid (Phase-2 polish task).
 */
.prof-header {
  background: var(--color-base-elevated);
  border-bottom: 1px solid var(--color-neutral);
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Dot-pattern decoration */
.prof-header::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-contrast) 7%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(100% 120% at 88% 0%, #000, transparent 60%);
          mask-image: radial-gradient(100% 120% at 88% 0%, #000, transparent 60%);
}

.prof-header__in {
  padding: var(--spacing-70) var(--spacing-60) var(--spacing-60);
  position: relative; z-index: 1;
  display: flex;
  gap: var(--spacing-60);
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Avatar — uses global .wl-avatar; 6rem for profile */
.prof-avatar {
  width: 6rem !important;
  height: 6rem !important;
  font-size: var(--font-size-lg) !important;
  font-weight: var(--fw-bold) !important;
  flex: none;
}

/* Identity column */
.prof-id {
  min-width: 0; flex: 1;
  display: flex; flex-direction: column; gap: var(--spacing-20);
}

.prof-name {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--color-contrast);
  margin: 0;
}

.prof-headline {
  font-size: var(--font-size-md);
  color: var(--color-contrast-muted);
  margin: 0;
}

.prof-metarow {
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
  flex-wrap: wrap;
  margin-top: var(--spacing-20);
}

.prof-loc {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  font-size: var(--font-size-sm); color: var(--color-contrast-subtle);
}
.prof-loc svg { flex: none; color: var(--color-contrast-subtle); }

/* Rate — right-aligned, wraps to own row on small screens */
.prof-rate {
  margin-left: auto; flex: none; text-align: right;
}
.prof-rate__amount {
  display: flex; align-items: baseline; gap: 0.05em;
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

@media (max-width: 768px) {
  .prof-rate { margin-left: 0; text-align: left; }
  .prof-header__in { gap: var(--spacing-40); }
}

/* ── Profile content blocks ──────────────────────────────────────────────── */

.prof-block {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-60);
}

/* Headings inside blocks — h2 for first-pass (replaces old h3 from wl-*) */
.prof-block__title {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--spacing-40);
  letter-spacing: var(--tracking-snug);
  color: var(--color-contrast);
}

/* About (bio) text */
.prof-bio {
  color: var(--color-contrast-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--font-size-base);
  margin: 0;
}

/* Empty state */
.prof-empty {
  color: var(--color-contrast-subtle);
  font-style: italic;
  margin: 0;
  font-size: var(--font-size-base);
}

/* Skills tag cloud */
.prof-skills {
  display: flex; flex-wrap: wrap; gap: var(--spacing-20);
}

/* Current Projects list */
.prof-projlist {
  display: flex; flex-direction: column; gap: var(--spacing-30);
}

.prof-projrow {
  display: flex; align-items: center; gap: var(--spacing-40);
  padding: var(--spacing-40);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
}

.prof-projrow__id {
  min-width: 0; flex: 1;
}

.prof-projrow__title {
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  text-decoration: none;
  font-size: var(--font-size-base);
  display: block;
}
.prof-projrow__title:hover { color: var(--color-accent-1); }

.prof-projrow__sub {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin: 0.15rem 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Reviews section: HP Reviews injects reviews_container as .hp-section ── */
/*
 * HP Reviews extension adds a <section class="hp-section"> around the reviews.
 * We style it with the same .prof-block look so it matches the design system.
 * The inner .hp-review items retain HP's own classes (styled in Section 8 above).
 */
body.hp-template--listing-view-page .hp-section {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-60);
}

/* HP section title (<h2> or <h3> that HP renders for "Reviews") */
body.hp-template--listing-view-page .hp-section__title,
body.hp-template--listing-view-page .hp-section > h2,
body.hp-template--listing-view-page .hp-section > h3 {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--spacing-40);
  letter-spacing: var(--tracking-snug);
  color: var(--color-contrast);
}

/* ── Sidebar stat card ───────────────────────────────────────────────────── */

.prof-statcard {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-50);
  display: flex; flex-direction: column; gap: var(--spacing-40);
}

.prof-statrow {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--spacing-30);
  font-size: var(--font-size-base);
}

.prof-statrow__label {
  color: var(--color-contrast-subtle);
  font-size: var(--font-size-sm);
}

.prof-statrow__value {
  color: var(--color-contrast);
  font-weight: var(--fw-semibold);
}

.prof-statcard__sep {
  height: 1px; background: var(--color-neutral); border: 0; margin: 0;
}

/* Sidebar sticky wrapper — .hp-page__sidebar already handles sticky in section 8 */

/* ── Availability dot indicator ─────────────────────────────────────────── */
/*
 * .wl-vendor__avail is defined in Section 17 (freelancer card extras) as a
 * flex label. On the profile header and sidebar we inherit those rules.
 * Override colour to match "Available for work" green from design.
 */
.prof-metarow .wl-vendor__avail,
.prof-statcard .wl-vendor__avail {
  color: var(--color-status-open-fg);
}
.prof-metarow .wl-vendor__avail::before,
.prof-statcard .wl-vendor__avail::before {
  content: "";
  display: inline-block;
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.3em;
  vertical-align: middle;
}

/* ── Responsive adjustments ─────────────────────────────────────────────── */

@media (max-width: 640px) {
  .prof-header__in { flex-direction: column; gap: var(--spacing-40); }
  .prof-rate { margin-left: 0; text-align: left; }
}

/* Remove top padding from hp-page__content — prof-header provides its own spacing */
body.hp-template--listing-view-page .hp-page__content {
  padding-top: 0 !important;
}

/* Safety: hide legacy wl-prof-header if it somehow still renders (migration guard) */
.wl-prof-header { display: none; }

/* ── HP listing_actions_primary in profile sidebar ──────────────────────── */
/*
 * HP Messages injects message_send_link (→ "Contact") and
 * HP Reviews injects review_submit_link (→ "Write a Review") into
 * listing_actions_primary, which renders as .hp-listing__actions--primary
 * inside .hp-page__sidebar on the listing-view-page.
 * Style these as a vertical stack of full-width buttons below the prof-statcard.
 */
body.hp-template--listing-view-page .hp-page__sidebar .hp-listing__actions--primary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  margin-top: 0;
  padding-top: 0;
}

/* Primary CTA — "Contact" / "Reply to Listing" */
body.hp-template--listing-view-page .hp-page__sidebar .hp-listing__actions--primary .hp-button--primary,
body.hp-template--listing-view-page .hp-page__sidebar .hp-listing__actions--primary .hp-listing__action--message {
  width: 100%;
  justify-content: center;
}

/* Secondary CTA — "Write a Review" (review_submit_link) */
body.hp-template--listing-view-page .hp-page__sidebar .hp-listing__actions--primary .hp-button--secondary {
  width: 100%;
  justify-content: center;
}

/* ============================================================================
   36. JOBS CATALOG — Budget number inputs dark fix
   Root cause: the Listings catalog sidebar uses .hp-widget--listing-filter which
   gets the dark input styles in section 35B. The Jobs catalog sidebar renders the
   hp-form--request-filter OUTSIDE .hp-widget--listing-filter (HP moves the budget
   number-range field into #wl-fgroup-budget via JS). The resulting selectors in
   section 35B only match .hp-widget--listing-filter, so the number inputs inside
   #wl-fgroup-budget inherit the default white/light browser background instead of
   var(--color-surface-2).

   Fix: duplicate the input styling for the moved budget group (#wl-fgroup-budget)
   and for the request-filter form's number-range field directly (belt+suspenders).
   DO NOT touch noUiSlider/jQuery UI slider rules — those are handled by the
   .hp-field--number-range .ui-slider* rules above (section 35B) which are already
   broad enough.
   ============================================================================ */

/* Budget number inputs in Jobs sidebar — dark fill to match Listings rate inputs */
#wl-fgroup-budget .hp-field--number-range input[type="number"],
body.hp-template--requests-view-page .hp-form--request-filter .hp-field--number-range input[type="number"] {
  flex: 1;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  min-height: 2.5rem;
  padding: var(--spacing-20) var(--spacing-30);
  background: var(--color-surface-2) !important;   /* dark fill — was white */
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast) !important;          /* light text on dark bg */
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  transition: border-color var(--transition), background var(--transition);
  -moz-appearance: textfield;
}
#wl-fgroup-budget .hp-field--number-range input[type="number"]::-webkit-inner-spin-button,
#wl-fgroup-budget .hp-field--number-range input[type="number"]::-webkit-outer-spin-button,
body.hp-template--requests-view-page .hp-form--request-filter .hp-field--number-range input[type="number"]::-webkit-inner-spin-button,
body.hp-template--requests-view-page .hp-form--request-filter .hp-field--number-range input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#wl-fgroup-budget .hp-field--number-range input[type="number"]::placeholder,
body.hp-template--requests-view-page .hp-form--request-filter .hp-field--number-range input[type="number"]::placeholder {
  color: var(--color-contrast-subtle);
}
#wl-fgroup-budget .hp-field--number-range input[type="number"]:hover,
body.hp-template--requests-view-page .hp-form--request-filter .hp-field--number-range input[type="number"]:hover {
  border-color: var(--color-accent-border);
}
#wl-fgroup-budget .hp-field--number-range input[type="number"]:focus-visible,
body.hp-template--requests-view-page .hp-form--request-filter .hp-field--number-range input[type="number"]:focus-visible {
  outline: 2px solid var(--color-accent-1);
  outline-offset: 1px;
  border-color: var(--color-accent-1);
}

/* ============================================================================
   37. PROJECT DETAIL PAGE — pd-* design-system classes
   Implements .pd-layout / .pd-hero / .pd-bidcard / .pd-customer / .pd-proposals /
   .pd-similar from deliverables/design/catalog.css (lines ~95-215).

   HP DOM on request-view-page (after our wl_alter_request_view_page injection):
     .hp-page (display:grid, 1fr 22rem — set in section 6) >
       .hp-page__content  → .pd-main: .pd-hero + .pd-block(description)
       .hp-page__sidebar  → .pd-bidcard + .pd-customer + proposals + similar

   Strategy: section 6 already sets up the 2-col grid. We add the pd-* visual
   layer on top: card blocks, bid card accent border, customer card, proposals,
   similar items. The HP offer_make form is styled to look like .pd-bidcard__body.
   ============================================================================ */

/* ── pd-block: standard card treatment ─────────────────────────────────────── */

/*
 * Each injected block uses .pd-block for its own card appearance (background,
 * border, border-radius, padding). Section 6's blanket .hp-listing > * card
 * treatment has been removed (WLS-20) — it was producing an outer frame around
 * the entire left column by wrapping every child in an extra border layer.
 * If HP native blocks (vendor, offers) need card treatment, add targeted rules.
 */
body.hp-template--request-view-page .pd-block {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-60);
}
body.hp-template--request-view-page .pd-block__title {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--spacing-40);
  letter-spacing: var(--tracking-snug);
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}
body.hp-template--request-view-page .pd-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-30);
}
/* WLS-20 fix (Issue 3): category pill was clipped because .wl-tag global rule sets
 * max-width:8rem (intended for skill tag overflow). The category pill must show
 * its full text — override max-width and ensure nowrap + no underline (it is a
 * <span>, but guard against link-wrapping too). */
body.hp-template--request-view-page .pd-hero__top .wl-tag--accent {
  max-width: none;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
body.hp-template--request-view-page .pd-hero__posted {
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
}
body.hp-template--request-view-page .pd-hero__title {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
  color: var(--color-contrast);
}
body.hp-template--request-view-page .pd-hero__metarow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-50);
  padding-top: var(--spacing-40);
  border-top: 1px solid var(--color-neutral);
}
body.hp-template--request-view-page .pd-metaitem {
  display: flex;
  flex-direction: column;
}
/* R1: icons removed — meta row is label + value only (per design). */
body.hp-template--request-view-page .pd-metaitem__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle);
  margin-bottom: 0.25rem;
  font-weight: var(--fw-semibold);
}
body.hp-template--request-view-page .pd-metaitem__value {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
}
body.hp-template--request-view-page .pd-metaitem__value--accent {
  color: var(--color-accent-1);
}

/* ── Description prose ─────────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-prose {
  color: var(--color-contrast-muted);
  line-height: var(--lh-relaxed);
  font-size: var(--font-size-base);
}
body.hp-template--request-view-page .pd-prose p { margin: 0 0 var(--spacing-40); }
body.hp-template--request-view-page .pd-prose p:last-child { margin-bottom: 0; }
body.hp-template--request-view-page .pd-prose h3 {
  color: var(--color-contrast);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  margin: var(--spacing-50) 0 var(--spacing-20);
}
body.hp-template--request-view-page .pd-prose ul {
  margin: 0 0 var(--spacing-40);
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-30);
}
body.hp-template--request-view-page .pd-prose li {
  display: flex;
  gap: var(--spacing-30);
  align-items: flex-start;
}
body.hp-template--request-view-page .pd-prose li::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.18rem;
  border-radius: 50%;
  background: var(--color-accent-weak);
  border: 1px solid var(--color-accent-border);
  background-image: linear-gradient(var(--color-accent-1), var(--color-accent-1));
  background-size: 0.45rem 0.2rem;
  background-position: center;
  background-repeat: no-repeat;
}

/* Skills section heading */
body.hp-template--request-view-page .pd-skills__heading {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--spacing-30);
  font-weight: var(--fw-semibold);
}
body.hp-template--request-view-page .pd-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-20);
}

/* ── Bid card ───────────────────────────────────────────────────────────────── */
/*
 * WLS-27: the escrow note (.pd-bidcard__escrow) must appear AFTER the cover-letter
 * field but BEFORE the Submit Proposal button.
 *
 * DOM challenge: the HP offer_make form (.hp-form--offer-make) is injected between
 * the .pd-bidcard head (order 5) and the close tag (order 90), so .pd-bidcard__escrow
 * is a sibling of .hp-form--offer-make, not of .hp-form__footer inside it.
 *
 * Solution: dissolve .hp-form--offer-make with display:contents so that
 * .hp-form__fields and .hp-form__footer become direct children of .pd-bidcard (flex
 * container). Then use flex order to sequence:
 *   head (0) → form fields (1) → escrow note (2) → submit footer (3).
 *
 * Side-effect of display:contents: background/border/padding CSS on
 * .hp-form--offer-make are ignored (no visual box). Those properties were already
 * reset to transparent/none/0 in the rule below — no visible change.
 * .pd-bidcard keeps overflow:hidden to clip child border-radius at the card edge.
 */
body.hp-template--request-view-page .pd-bidcard {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-accent-border);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* WLS-27: flex column so we can reorder head / fields / escrow / submit */
  display: flex;
  flex-direction: column;
}
body.hp-template--request-view-page .pd-bidcard__head {
  padding: var(--spacing-50);
  background: linear-gradient(180deg, var(--color-accent-weak), transparent);
  border-bottom: 1px solid var(--color-neutral);
}
body.hp-template--request-view-page .pd-bidcard__lead {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  margin: 0 0 var(--spacing-20);
}
body.hp-template--request-view-page .pd-bidcard__amount {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-20);
}
body.hp-template--request-view-page .pd-bidcard__big {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-contrast);
}
/* WLS-27 (revised): dissolve the intermediate container(s) between .pd-bidcard and
 * the form so that .hp-form__fields and .hp-form__footer become direct flex-children
 * of .pd-bidcard. Two layers may exist:
 *
 *   Layer A — request_actions_primary HP container block renders as
 *             .hp-request__actions--primary (HP BEM naming for request_actions_primary).
 *             Dissolve it with display:contents so the form rises to .pd-bidcard level.
 *
 *   Layer B — the <form> element itself (.hp-form--offer-make).
 *             Dissolve so .hp-form__fields / .hp-form__footer become pd-bidcard flex-items.
 *
 * After dissolving both layers:
 *   .pd-bidcard flex column order sequence:
 *     pd-bidcard__head (implicit order 0)
 *     hp-form__fields  (order 1)
 *     pd-bidcard__escrow (order 2)   ← rendered last in DOM by request-pd-bidcard-close.php
 *     hp-form__footer  (order 3)
 *
 * JS safety net: wl_request_view_page_script() also moves .pd-bidcard__escrow
 * before .hp-form__footer in the DOM — catches any browser that does not honour
 * display:contents on <form> or on an intermediate block container. */
body.hp-template--request-view-page .pd-bidcard .hp-request__actions--primary {
  display: contents !important; /* dissolve request_actions_primary container wrapper */
}
body.hp-template--request-view-page .pd-bidcard .hp-form--offer-make {
  display: contents !important; /* dissolve <form> wrapper — children become flex siblings */
}
body.hp-template--request-view-page .pd-bidcard .hp-form--offer-make .hp-form__header {
  display: none !important; /* head is provided by pd-bidcard__head above */
}
body.hp-template--request-view-page .pd-bidcard .hp-form--offer-make .hp-form__fields {
  padding: var(--spacing-50);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  order: 1; /* WLS-27: after head (order 0), before escrow (order 2) */
}
body.hp-template--request-view-page .pd-bidcard .hp-form--offer-make .hp-form__footer {
  padding: 0 var(--spacing-50) var(--spacing-50);
  display: block !important; /* override section 5's hide rule for this specific location */
  order: 3; /* WLS-27: after escrow note (order 2) */
}
/* WLS-26: hide browser number-spinner arrows on the bid price field.
 * HP renders the price input as input[type="number"] (name=price).
 * Scoped to the bid card so other number inputs on the page are unaffected. */
body.hp-template--request-view-page .pd-bidcard input[type="number"] {
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}
body.hp-template--request-view-page .pd-bidcard input[type="number"]::-webkit-outer-spin-button,
body.hp-template--request-view-page .pd-bidcard input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Submit button full-width (already in section 18 but reinforce here) */
body.hp-template--request-view-page .pd-bidcard .hp-form--offer-make .hp-form__button input[type="submit"],
body.hp-template--request-view-page .pd-bidcard .hp-form--offer-make .hp-form__button button[type="submit"] {
  width: 100%;
  justify-content: center;
  background: var(--color-accent-1) !important;
  color: var(--color-accent-on) !important;
  border-color: var(--color-accent-1) !important;
}

/* WLS-27: escrow note — now rendered by request-pd-bidcard-close.php (moved
 * from the head area in request-pd-bidcard.php to after the form fields).
 * order:2 places it between .hp-form__fields (order:1) and .hp-form__footer (order:3).
 * Styled as a bordered callout matching the design's bordered escrow box. */
body.hp-template--request-view-page .pd-bidcard__escrow {
  order: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-30);
  margin: 0 var(--spacing-50);
  padding: var(--spacing-40);
  background: var(--color-accent-weak);
  border: 1px solid var(--color-accent-border);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  line-height: var(--lh-normal);
}
body.hp-template--request-view-page .pd-bidcard__escrow svg {
  color: var(--color-accent-1);
  flex: none;
  margin-top: 1px; /* optical alignment with first text line */
}

/* WL-8 §2: closed-project notice inside bid card (rendered when status != open) */
body.hp-template--request-view-page .pd-bidcard__closed-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-30);
  padding: var(--spacing-50);
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
}
body.hp-template--request-view-page .pd-bidcard__closed-notice svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-neutral);
}
body.hp-template--request-view-page .pd-bidcard__closed-notice p {
  margin: 0;
  line-height: 1.5;
}

/* ── Customer card ──────────────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-customer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}
body.hp-template--request-view-page .pd-customer__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
}
body.hp-template--request-view-page .pd-customer__name {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  margin: 0;
  color: var(--color-contrast);
}
body.hp-template--request-view-page .pd-customer__meta {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin: 0.15rem 0 0;
}
body.hp-template--request-view-page .pd-verify {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-20);
  font-size: var(--font-size-sm);
  color: var(--color-status-open-fg);
}
body.hp-template--request-view-page .pd-customer__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-30);
  padding-top: var(--spacing-40);
  border-top: 1px solid var(--color-neutral);
}
body.hp-template--request-view-page .pd-cstat {
  display: flex;
  flex-direction: column;
}
body.hp-template--request-view-page .pd-cstat__num {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  margin-bottom: 0.15rem;
}
body.hp-template--request-view-page .pd-cstat__label {
  font-size: 0.72rem;
  color: var(--color-contrast-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-snug);
}

/* ── Proposals strip ────────────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-proposals {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
}
body.hp-template--request-view-page .pd-proposals__avs {
  display: flex;
}
body.hp-template--request-view-page .pd-proposals__avs .wl-avatar {
  margin-left: -0.5rem;
  border: 2px solid var(--color-base-elevated);
}
body.hp-template--request-view-page .pd-proposals__avs .wl-avatar:first-child {
  margin-left: 0;
}

/* ── Similar projects ────────────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-similar {
  display: grid;
  gap: var(--spacing-40);
}
body.hp-template--request-view-page .pd-similar__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  padding: var(--spacing-40);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
body.hp-template--request-view-page .pd-similar__item:hover {
  border-color: var(--color-accent-border);
  background: var(--color-surface-2);
}
body.hp-template--request-view-page .pd-similar__title {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  line-height: var(--lh-tight);
}
body.hp-template--request-view-page .pd-similar__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
}

/* ── Suppress HP blocks we replace ──────────────────────────────────────────── */

/*
 * HP renders its own listing title (h2) and details_primary in page_content.
 * We remove these via wl_remove_request_view_page_blocks(). CSS guard as
 * belt-and-suspenders in case the block filter order doesn't fully unset them.
 */
body.hp-template--request-view-page .hp-page__content > .hp-listing__title:first-child,
body.hp-template--request-view-page .hp-page__content > .hp-listing__details--primary:first-child {
  display: none;
}

/* Remove any default top padding on main content now that pd-hero provides it */
body.hp-template--request-view-page .hp-page__content {
  padding-top: var(--spacing-60);
}
body.hp-template--request-view-page .hp-page__content > *:first-child {
  margin-top: 0;
}

/* Sidebar padding override — pd-bidcard and pd-block handle their own spacing */
body.hp-template--request-view-page .hp-page__sidebar {
  padding-top: var(--spacing-60);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.hp-template--request-view-page .pd-hero__metarow {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
}
@media (max-width: 480px) {
  body.hp-template--request-view-page .pd-hero__title {
    font-size: var(--font-size-md);
  }
}


/* =============================================================================
   38. PROJECT DETAIL — CUSTOMER (OWNER) VIEW
   Implements the owner-facing tab interface + applications list + sidecard.
   CSS classes sourced from deliverables/design/catalog.css (lines 165–216).
   These rules scope to body.hp-template--request-view-page to avoid bleeding
   into catalog or profile pages.
   ============================================================================= */

/* ── Action bar (ready-for-review state) ─────────────────────────────────────── */
body.hp-template--request-view-page .pd-actionbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
  flex-wrap: wrap;
  padding: var(--spacing-50);
  background: linear-gradient(160deg, var(--color-accent-weak), var(--color-base-elevated));
  border: 1px solid var(--color-accent-border);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  margin-bottom: var(--spacing-50);
}
body.hp-template--request-view-page .pd-actionbar__text {
  min-width: 0;
  flex: 1;
}
body.hp-template--request-view-page .pd-actionbar__title {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  margin: 0;
  color: var(--color-contrast);
}
body.hp-template--request-view-page .pd-actionbar__sub {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  margin: 0.2rem 0 0;
}
body.hp-template--request-view-page .pd-actionbar__btns {
  margin-left: auto;
  display: flex;
  gap: var(--spacing-30);
  flex-wrap: wrap;
}

/* ── Tabs container block ────────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-tabs-block {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-50);
  margin-top: var(--spacing-50);
}

/* ── Tab list + tab buttons ─────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-tabs {
  display: flex;
  gap: var(--spacing-10);
  border-bottom: 1px solid var(--color-neutral);
  margin-bottom: var(--spacing-50);
}
body.hp-template--request-view-page .pd-tab {
  position: relative;
  min-height: 2.75rem;
  padding: 0 var(--spacing-40);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--color-contrast-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-20);
  transition: color var(--transition), border-color var(--transition);
}
body.hp-template--request-view-page .pd-tab:hover {
  color: var(--color-contrast);
}
body.hp-template--request-view-page .pd-tab[aria-selected="true"],
body.hp-template--request-view-page .pd-tab.pd-tab--active {
  color: var(--color-accent-1);
  border-bottom-color: var(--color-accent-1);
}
body.hp-template--request-view-page .pd-tab__count {
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  display: grid;
  place-content: center;
  background: var(--color-surface-3);
  color: var(--color-contrast-muted);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
}
body.hp-template--request-view-page .pd-tab[aria-selected="true"] .pd-tab__count,
body.hp-template--request-view-page .pd-tab.pd-tab--active .pd-tab__count {
  background: var(--color-accent-1);
  color: var(--color-accent-on);
}

/* ── Tab panels ─────────────────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-tabpanel[hidden] {
  display: none;
}

/* ── Empty state in applications panel ──────────────────────────────────────── */
body.hp-template--request-view-page .wl-state {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-40);
  padding: var(--spacing-60) var(--spacing-40);
}
body.hp-template--request-view-page .wl-state__icon {
  color: var(--color-contrast-subtle);
  flex: none;
}
body.hp-template--request-view-page .wl-state__title {
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--spacing-20);
}
body.hp-template--request-view-page .wl-state__text {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  margin: 0;
}

/* ── Applications list ───────────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-applist {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

body.hp-template--request-view-page .pd-application {
  padding: var(--spacing-50);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  background: var(--color-base-elevated);
  transition: border-color var(--transition);
}
body.hp-template--request-view-page .pd-application--accepted {
  border-color: var(--color-accent-border);
  background: linear-gradient(160deg, var(--color-accent-weak), var(--color-base-elevated));
}
body.hp-template--request-view-page .pd-application--muted {
  opacity: 0.55;
}

/* Application head: avatar + identity + bid (space-between layout) */
body.hp-template--request-view-page .pd-application__head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-40);
}
body.hp-template--request-view-page .pd-application__id {
  min-width: 0;
  flex: 1;
}
body.hp-template--request-view-page .pd-application__name {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  margin: 0;
  line-height: 1.2;
}
body.hp-template--request-view-page .pd-application__name a {
  color: var(--color-contrast);
  text-decoration: none;
}
body.hp-template--request-view-page .pd-application__name a:hover {
  color: var(--color-accent-1);
}
body.hp-template--request-view-page .pd-application__role {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  margin: 0.15rem 0 0;
}
body.hp-template--request-view-page .pd-application__bid {
  text-align: right;
  flex: none;
}
body.hp-template--request-view-page .pd-application__amount {
  font-size: var(--font-size-md);
  font-weight: var(--fw-bold);
  color: var(--color-accent-1);
  letter-spacing: var(--tracking-tight);
}
body.hp-template--request-view-page .pd-application__timeline {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin: 0.15rem 0 0;
}

/* Cover letter: 2-line clamp when data-clamped="true" */
body.hp-template--request-view-page .pd-application__letter {
  color: var(--color-contrast-muted);
  line-height: var(--lh-relaxed);
  margin: var(--spacing-40) 0 0;
  font-size: var(--font-size-base);
}
body.hp-template--request-view-page .pd-application__letter[data-clamped="true"] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read-more button */
body.hp-template--request-view-page .pd-application__more {
  background: none;
  border: 0;
  padding: var(--spacing-20) 0 0;
  color: var(--color-accent-1);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
body.hp-template--request-view-page .pd-application__more:hover {
  text-decoration: underline;
}

/* Application foot: status badge + action buttons */
body.hp-template--request-view-page .pd-application__foot {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-40);
  border-top: 1px solid var(--color-neutral);
  flex-wrap: wrap;
}
body.hp-template--request-view-page .pd-application__actions {
  margin-left: auto;
  display: flex;
  gap: var(--spacing-20);
  flex-wrap: wrap;
}

/* ── Customer sidecard ───────────────────────────────────────────────────────── */
body.hp-template--request-view-page .pd-sidecard {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-50);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  margin-bottom: var(--spacing-40);
}
body.hp-template--request-view-page .pd-sidecard__statusrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-30);
}
body.hp-template--request-view-page .pd-sidecard__statuslbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle);
  font-weight: var(--fw-semibold);
}
body.hp-template--request-view-page .pd-sidecallout {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--spacing-40);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
}
body.hp-template--request-view-page .pd-sidecallout__label {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
}
body.hp-template--request-view-page .pd-sidecallout__value {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
}
body.hp-template--request-view-page .pd-sidecallout__value--accent {
  color: var(--color-accent-1);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
body.hp-template--request-view-page .pd-sidecard__sep {
  height: 1px;
  background: var(--color-neutral);
  border: 0;
  margin: 0;
}
body.hp-template--request-view-page .pd-sidecard__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-30);
}

/* wl-link inside sidecard actions */
body.hp-template--request-view-page .pd-sidecard__actions .wl-link {
  color: var(--color-accent-1);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
}
body.hp-template--request-view-page .pd-sidecard__actions .wl-link:hover {
  text-decoration: underline;
}

/* ── Owner view: suppress freelancer-only blocks ──────────────────────────────
   When the owner branch is active the bid-card blocks and freelancer-only
   sidebar parts are removed via PHP (wl_remove_request_view_page_blocks).
   These CSS rules are belt-and-suspenders for any partial HP re-renders.
   Also hides HP's native offer list (#offers) which HP renders inside
   request_content — not exposed as a removable block via the filter. */
body.hp-template--request-view-page.wl-owner-view .pd-bidcard,
body.hp-template--request-view-page.wl-owner-view .pd-proposals,
body.hp-template--request-view-page.wl-owner-view .pd-customer {
  display: none;
}
/* HP's native offer list inside request_content — hidden for owner (our tabs replace it) */
body.hp-template--request-view-page.wl-owner-view #offers,
body.hp-template--request-view-page.wl-owner-view .hp-section--offers,
body.hp-template--request-view-page.wl-owner-view .hp-offers {
  display: none;
}

/* ── Responsive (owner view) ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.hp-template--request-view-page .pd-application__head {
    flex-wrap: wrap;
  }
  body.hp-template--request-view-page .pd-application__bid {
    text-align: left;
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-30);
  }
  body.hp-template--request-view-page .pd-application__actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  body.hp-template--request-view-page .pd-actionbar {
    flex-direction: column;
    align-items: flex-start;
  }
  body.hp-template--request-view-page .pd-actionbar__btns {
    margin-left: 0;
    width: 100%;
  }
}

/* ============================================================================
   39. CONSOLIDATION PASS 2026-06-01 — WL8/WL9/WL11 defect CSS fixes
   ============================================================================ */

/* ── WL9-003: hide HP offer-delete forms in customer project view ─────────────
   HP renders hp-form--offer-delete forms in the request-view-page DOM with
   display:block. These are accidental-delete risks and accessibility hazards.
   Hide visually; JS also adds aria-hidden. Viktor wires delete via a proper
   Reject flow later. */
body.hp-template--request-view-page .hp-form--offer-delete {
  display: none !important;
}
body.hp-template--request-view-page [data-block="offer_delete_modal"],
body.hp-template--request-view-page [data-block="offer_delete_form"] {
  display: none !important;
}

/* ── WL11-KI-3: hide HP "Write a Review" and "Report Listing" sidebar btns ───
   These HP stock sidebar actions are not in the Worklane design. Hidden here;
   the "Message" (Contact) CTA remains visible. */
body.hp-template--listing-view-page .hp-listing__action--review,
body.hp-template--listing-view-page .hp-listing__action--report,
body.hp-template--listing-view-page .hp-listing__action--report-listing {
  display: none !important;
}

/* ── WL8-011 / WL9-007 / WL11-005 / WLS-28: header overflow fix ─────────────
   Root cause (mobile): .wl-header__actions renders at scrollWidth 428 when viewport
   = 375. The hamburger button and its SVG extend 53px past the viewport edge.
   Fix (mobile): clip overflow only at ≤768px where the hamburger drawer is used.

   WLS-28 correction: the original rules were unconditional — they clipped the
   desktop account dropdown (.wl-menu, position:absolute hanging BELOW the header)
   because overflow:hidden on .wl-header__in acts as an overflow-clipping ancestor
   regardless of z-index. The REAL cause of the dropdown clipping on HP pages was
   this file overriding the intentional DROP-1 removal of overflow:hidden in
   global.css (2026-06-03). Fixed by scoping overflow containment to mobile only.

   Desktop (≥769px): overflow must be visible so .wl-menu can escape downward.
   Mobile  (≤768px): clipping prevents horizontal page scroll from hamburger layout. */

/* Desktop explicit reset — ensure global.css DROP-1 fix is not overridden here. */
@media (min-width: 769px) {
  .wl-header {
    max-width: none;
    overflow-x: visible;
  }
  .wl-header__in {
    overflow: visible;
  }
}

/* Mobile only: contain horizontal overflow from hamburger/actions layout. */
@media (max-width: 768px) {
  .wl-header {
    max-width: 100vw;
    overflow-x: hidden;
  }
  .wl-header__in {
    /* At 375px: 100% - 2.5rem = 335px — correct container width.
       Clip so absolute/flex children don't contribute to page scroll. */
    overflow: hidden;
  }
}

/* At 375px: aggressively collapse header gap to prevent overflow */
@media (max-width: 400px) {
  .wl-header__in {
    gap: var(--spacing-20);
    width: calc(100% - 2rem);  /* tighter side padding */
  }
  .wl-header__actions {
    gap: var(--spacing-20);
    /* Ensure hamburger + notification icon don't overflow */
    flex-wrap: nowrap;
    max-width: 100%;
  }
  /* Reduce iconbtn size slightly on very small screens */
  .wl-iconbtn {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ── WL11-02 / Vera P1: sticky mobile CTA on freelancer profile ──────────────
   A fixed bottom bar with "Message" button, visible only on mobile (≤768px).
   On desktop the sidebar already provides the sticky CTA. */
.wl-mobile-cta {
  display: none; /* hidden by default; shown by media query below */
}
@media (max-width: 768px) {
  body.hp-template--listing-view-page .wl-mobile-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-base) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-neutral);
    padding: var(--spacing-30) var(--spacing-50);
    /* a11y: remove aria-hidden that we set on the element; it should be visible on mobile */
    pointer-events: auto;
  }
  body.hp-template--listing-view-page .wl-mobile-cta[aria-hidden="true"] {
    /* Override the aria-hidden set on server — JS should remove it; CSS can't */
    /* The element renders correctly; JS should toggle aria-hidden on scroll */
  }
}
/* Note: aria-hidden state on .wl-mobile-cta is managed by JS in wl_profile_reviews_a11y,
   not via CSS (CSS cannot set ARIA attributes). The element renders without aria-hidden
   from the server-side PHP; desktop hides it purely via display:none. */

/* ── Breadcrumb strip (WL8-001 / WL9-001 / WL11-06) ─────────────────────────
   .cat-breadcrumb renders above the hero on project detail + profile pages.
   Minimal styling — inherits from catalog breadcrumb if already defined in catalog.
   Duplicate definition here for belt-and-suspenders on PD/profile pages. */
.cat-breadcrumb {
  padding: var(--spacing-30) 0;
}
.cat-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.cat-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
}
.cat-breadcrumb__link {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  text-decoration: none;
  transition: color var(--transition);
}
.cat-breadcrumb__link:hover {
  color: var(--color-accent-1);
}
.cat-breadcrumb__sep {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-strong);
  user-select: none;
}
.cat-breadcrumb__current {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  /* Truncate long titles */
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── WL-11 profile: bid card "Submit a proposal" h2 ─────────────────────────
   Injected by JS in request-view-a11y-script; styled to sit above form fields. */
.pd-bidcard__title {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  margin: 0 0 var(--spacing-20);
  padding: var(--spacing-50) var(--spacing-50) 0;
}

/* ── WL8-007: platform-fee hint under bid price field ────────────────────────
   .pd-bidcard__feehint is injected by JS after the price field. */
.pd-bidcard__feehint {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin: calc(-1 * var(--spacing-20)) 0 0;
  line-height: var(--lh-relaxed);
}

/* ── WL9-004: small star rating in application cards ─────────────────────────
   .wl-stars--sm is the compact variant for use inside card rows. */
.wl-stars.wl-stars--sm {
  font-size: var(--font-size-sm);
  gap: var(--spacing-10);
}
.wl-stars.wl-stars--sm .wl-stars__track {
  font-size: 0.75rem;
}
.wl-stars.wl-stars--sm .wl-stars__value {
  font-size: var(--font-size-sm);
}
.wl-stars.wl-stars--sm .wl-stars__count {
  font-size: 0.7rem;
}

/* ── WL8-010: pd-customer__stats grid with CSS variable col count ─────────────
   Supports 1–4 stat tiles; --pd-cstat-cols defaults to 2. */
.pd-customer__stats {
  display: grid;
  grid-template-columns: repeat(var(--pd-cstat-cols, 2), 1fr);
  gap: var(--spacing-30);
}
@media (max-width: 400px) {
  .pd-customer__stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── WL11-08 / global: skip-link focus ring visible on dark theme ─────────────
   The skip-link uses var(--wp--preset--color--accent-on, #fff) as outline.
   On the dark theme, this should be the accent green, not near-black.
   Override in hivepress.css scope so it applies on HP pages too.
   The fix in global.css (below) is the canonical location; this override ensures
   HP pages don't lose it due to specificity. */
.hp-page .skip-link:focus,
.hp-page .skip-link:focus-visible {
  outline-color: var(--color-accent-1);
}

/* ── WL9-009 / WL9-13: Description content duplicate below tabs ───────────────
   HP may render request_content (.hp-listing__content) as a DOM sibling after
   our tabs block. JS sets hidden=true; this CSS hides it belt-and-suspenders. */
body.hp-template--request-view-page .hp-listing__content:not([class*="pd-"]) {
  display: none;
}
/* But do NOT hide content INSIDE our description panel */
body.hp-template--request-view-page #pd-panel-desc .hp-listing__content {
  display: block;
}

/* ── WL9-013: H3 before H2 heading hierarchy fix ─────────────────────────────
   The HP "Skills" section in the description renders as H3 inside the Description
   panel, which is correct (H1 → Description tab region → H3 Skills is acceptable
   if Description is treated as a sub-section). The "Offers" H2 from HP's native
   offer list is now hidden via the owner-view rule (display:none for .hp-offers).
   Nothing more needed here; the owner-view hides the errant HP H2. */

/* ── WL11-KI-3: "Write a Review" and "Report Listing" hiding (duplicate / belt) */
body.hp-template--listing-view-page a.hp-listing__action--report,
body.hp-template--listing-view-page a[href*="report"],
body.hp-template--listing-view-page .hp-listing__action[class*="report"] {
  display: none !important;
}
body.hp-template--listing-view-page a.hp-listing__action--review {
  display: none !important;
}

/* ── WL11-BUG007 sidebar: availability dot glow fix ──────────────────────────
   The glow box-shadow on .wl-vendor__avail::before may be clipped if a parent
   has overflow:hidden. Add overflow:visible on the containing .prof-statrow. */
.prof-statrow:has(.wl-vendor__avail) {
  overflow: visible;
}
.wl-vendor__avail {
  overflow: visible; /* let the glow pseudo-element breathe */
}

/* ── WL11-007: sidebar mobile stacking below 900px ───────────────────────────
   Already set in line 1320 of hivepress.css: position:static !important.
   Ensure the prof-layout grid also stacks on mobile. */
@media (max-width: 900px) {
  body.hp-template--listing-view-page .hp-page {
    /* HP page already handles this via its grid system; confirm display:block */
    display: block;
  }
  body.hp-template--listing-view-page .hp-page__sidebar {
    /* Sidebar positioned below main content column on mobile */
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
  }
}

/* ── WL11-BUG002: Reviews section — SVG stars fix ────────────────────────────
   HP Reviews renders rating stars as FontAwesome icon spans (fa-star) which
   fail when the FA CDN font is absent. Override with CSS .wl-stars component.
   The JS/PHP in wl_profile_reviews_a11y patches the DOM. This CSS ensures
   any .hp-review__rating stars are hidden if they don't render (font missing),
   so broken boxes don't show. The proper fix is a PHP template override (ADR:
   template override for review cards deferred to Viktor's #18 data pass since
   the review data itself is sparse). */
.hp-review__rating .fa-star,
.hp-review__rating [class*="fa-star"] {
  /* If FA icon font fails to load, hide to avoid □ placeholder characters */
  font-family: inherit; /* break FA font dependency */
}
/* If HP renders .hp-rating-stars with data-rating, use CSS-only stars as fallback */
.hp-review__rating[data-component="rating"]:empty::before {
  content: "★★★★★";
  font-size: 0.85rem;
  color: var(--color-accent-1);
  letter-spacing: 0.05em;
}

/* ── Mobile CTA aria-hidden JavaScript fix note ──────────────────────────────
   .wl-mobile-cta is rendered with aria-hidden="true" on server (PHP). The JS
   in wl_listing_mobile_cta and wl_profile_reviews_a11y removes aria-hidden on
   DOMContentLoaded when the element is shown by media query. CSS alone cannot
   toggle aria attributes. */
@media (max-width: 768px) {
  body.hp-template--listing-view-page #wl-mobile-cta {
    /* Remove server-side aria-hidden via CSS is not possible.
       The wp_footer script handles this. Selector kept for reference. */
  }
}

/* ── WL-11 Reviews: prof-revsum + prof-review layout ─────────────────────────
   .prof-revsum: big avg-number + star row, injected before HP's listing_reviews.
   .prof-review: individual review card (design uses HP's .hp-review; these
   selectors are for elements added by our template overrides if needed). */

.prof-revsum {
  display: flex; align-items: center; gap: var(--spacing-50);
  padding-bottom: var(--spacing-50); margin-bottom: var(--spacing-50);
  border-bottom: 1px solid var(--color-neutral);
}

.prof-revsum__big {
  font-size: 3rem; font-weight: var(--fw-bold); line-height: 1;
  color: var(--color-contrast); letter-spacing: -0.02em;
}

/* HP's .hp-review__content holds the review text — remove default padding if present */
body.hp-template--listing-view-page .hp-review__content {
  padding: 0;
}

/* Ensure .wl-stars inside review rating block is display:flex */
body.hp-template--listing-view-page .hp-review__details .wl-stars {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
}

/* Remove HP's native .hp-rating-stars component fallback — our override replaces it */
body.hp-template--listing-view-page .hp-review__rating[data-component="rating"] {
  display: none;
}

/* ============================================================================
   MSG-1 — HP MESSAGES PAGES
   Applies to:
     body.hp-template--messages-thread-page  → /account/messages/   (thread list)
     body.hp-template--messages-view-page    → /account/messages/N/ (conversation)

   HP renders these via User_Account_Page (sidebar-left layout).
   The sidebar carries .hp-menu--user-account (HP account nav).
   The content area carries .hp-messages.hp-grid.hp-block.

   Thread list DOM:
     .hp-messages.hp-grid > .hp-message.hp-message--thread-block × N
       .hp-message__sender  (partner name / link)
       .hp-message__text    (last message snippet)
       .hp-message__sent-date
       .hp-message__listing (related listing link, optional)

   Conversation DOM:
     .hp-messages.hp-grid > .hp-message.hp-message--view-block × N
       own messages: .hp-message--sent (right-aligned bubble)
       partner msgs: (default, left-aligned)
       each bubble has:
         .hp-message__header > .hp-message__sender + .hp-message__sent-date
         .hp-message__text
         .hp-message__attachment (optional)
         .hp-message__action--delete (on hover)
     .hp-form--message-send  (compose field at bottom)

   HP's own frontend.min.css uses light-blue/light-green bubbles. We override
   with dark-theme card surfaces from the design token system.
   ============================================================================ */

/* ---- Shared page-level baseline ---- */
body.hp-template--messages-thread-page,
body.hp-template--messages-view-page {
  background: var(--color-base);
}

/*
 * Page layout: HP renders messages pages through User_Account_Page which
 * uses Page_Sidebar_Left. The .hp-page gets the same 2-col grid treatment
 * as other HP pages. We apply the same container pattern.
 */
body.hp-template--messages-thread-page .hp-page,
body.hp-template--messages-view-page .hp-page {
  display: grid;
  grid-template-columns: 17.5rem 1fr;
  column-gap: var(--spacing-60);
  row-gap: 0;
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}
@media (max-width: 900px) {
  body.hp-template--messages-thread-page .hp-page,
  body.hp-template--messages-view-page .hp-page {
    grid-template-columns: 1fr;
  }
}

/* Sidebar: HP account navigation menu */
body.hp-template--messages-thread-page .hp-page__sidebar,
body.hp-template--messages-view-page .hp-page__sidebar {
  max-width: unset !important;
  width: 100% !important;
  position: sticky !important;
  top: 5.5rem !important;
  align-self: start;
  padding-top: var(--spacing-60);
}
@media (max-width: 900px) {
  body.hp-template--messages-thread-page .hp-page__sidebar,
  body.hp-template--messages-view-page .hp-page__sidebar {
    position: static !important;
    padding-top: var(--spacing-50);
  }
}

/* Sidebar account menu — same dark-card treatment as profile/dashboard sidebars */
body.hp-template--messages-thread-page .hp-page__sidebar .hp-menu--user-account,
body.hp-template--messages-view-page .hp-page__sidebar .hp-menu--user-account {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-40);
  list-style: none; margin: 0;
}
body.hp-template--messages-thread-page .hp-page__sidebar .hp-menu__item a,
body.hp-template--messages-view-page .hp-page__sidebar .hp-menu__item a,
body.hp-template--messages-thread-page .hp-page__sidebar .hp-widget_nav_menu a,
body.hp-template--messages-view-page .hp-page__sidebar .hp-widget_nav_menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--spacing-40);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast-muted);
  font-size: var(--font-size-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
body.hp-template--messages-thread-page .hp-page__sidebar .hp-menu__item a:hover,
body.hp-template--messages-view-page .hp-page__sidebar .hp-menu__item a:hover {
  background: var(--color-surface-2);
  color: var(--color-contrast);
}
body.hp-template--messages-thread-page .hp-page__sidebar .current-menu-item a,
body.hp-template--messages-view-page .hp-page__sidebar .current-menu-item a {
  background: var(--color-accent-weak);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-1);
}

/* Main content column */
body.hp-template--messages-thread-page .hp-page__content,
body.hp-template--messages-view-page .hp-page__content {
  max-width: unset !important;
  width: 100% !important;
  min-width: 0;
  padding-block: var(--spacing-60) var(--spacing-80);
}

/* Page content heading — HP renders the page title as h2 before .hp-messages */
body.hp-template--messages-thread-page .hp-page__content h1,
body.hp-template--messages-thread-page .hp-page__content h2,
body.hp-template--messages-view-page .hp-page__content h1,
body.hp-template--messages-view-page .hp-page__content h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-contrast);
  margin: 0 0 var(--spacing-50);
}

/* ---- Thread list (.hp-message--thread-block) ---- */
/*
 * HP renders the list as .hp-messages.hp-grid.hp-block
 * Each row is .hp-message.hp-message--thread-block
 */
body.hp-template--messages-thread-page .hp-messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

body.hp-template--messages-thread-page .hp-message--thread-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  padding: var(--spacing-50);
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  text-decoration: none;
  color: var(--color-contrast);
  transition: border-color var(--transition), box-shadow var(--transition);
  /* Override HP's inline table display */
  display: block !important;
  background-color: var(--color-base-elevated) !important;
}
body.hp-template--messages-thread-page .hp-message--thread-block:hover {
  border-color: var(--color-neutral-strong);
  box-shadow: var(--shadow-sm);
}

/* Unread: sender name bold */
body.hp-template--messages-thread-page .hp-message--thread-block:not(.hp-message--read) .hp-message__sender {
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
}

/* Thread sender name */
body.hp-template--messages-thread-page .hp-message__sender {
  font-size: var(--font-size-base);
  font-weight: var(--fw-medium);
  color: var(--color-contrast);
  margin: 0 0 var(--spacing-10);
}
body.hp-template--messages-thread-page .hp-message__sender a {
  color: inherit;
  text-decoration: none;
}
body.hp-template--messages-thread-page .hp-message__sender a:hover {
  color: var(--color-accent-1);
}

/* Thread last message snippet */
body.hp-template--messages-thread-page .hp-message__text {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
  line-height: var(--lh-normal);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.hp-template--messages-thread-page .hp-message__text p {
  margin: 0;
}

/* Thread date */
body.hp-template--messages-thread-page .hp-message__sent-date {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  display: block;
  margin-top: var(--spacing-20);
}

/* Thread related listing link */
body.hp-template--messages-thread-page .hp-message__listing a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-20);
  font-size: var(--font-size-sm);
  color: var(--color-accent-1);
  text-decoration: none;
  margin-top: var(--spacing-10);
}
body.hp-template--messages-thread-page .hp-message__listing a:hover {
  text-decoration: underline;
}

/* ---- Conversation view (.hp-message--view-block) ---- */

body.hp-template--messages-view-page .hp-messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin-bottom: var(--spacing-50);
}

/*
 * Override HP's light-blue/green bubble colours with dark-theme tokens.
 * HP's CSS: .hp-message--view-block { background:#eff5fb; margin-right:2rem }
 *           .hp-message--sent { background:#effaf5; margin-left:2rem }
 */
body.hp-template--messages-view-page .hp-message--view-block {
  background: var(--color-base-elevated) !important;
  border: 1px solid var(--color-neutral) !important;
  border-radius: calc(var(--radius-md) * var(--radius-scale)) !important;
  padding: var(--spacing-40) var(--spacing-50) !important;
  /* Incoming: left-aligned, indented right */
  margin-right: 4rem !important;
  margin-left: 0 !important;
  position: relative;
}
/* HP triangle pointer — hide it (not in design aesthetic) */
body.hp-template--messages-view-page .hp-message--view-block::before,
body.hp-template--messages-view-page .hp-message--view-block::after {
  display: none !important;
}

/* Sent (own) messages: right-aligned with accent tint */
body.hp-template--messages-view-page .hp-message--view-block.hp-message--sent {
  background: var(--color-accent-weak) !important;
  border-color: var(--color-accent-border) !important;
  margin-left: 4rem !important;
  margin-right: 0 !important;
}

/* Message header (sender + date row) */
body.hp-template--messages-view-page .hp-message__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  margin-bottom: var(--spacing-30);
  padding-right: 0 !important; /* override HP's padding-right:1.5rem / 3rem */
}

/* Sender name */
body.hp-template--messages-view-page .hp-message__sender {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast);
  margin: 0;
}
body.hp-template--messages-view-page .hp-message__sender a {
  color: var(--color-accent-1);
  text-decoration: none;
}
body.hp-template--messages-view-page .hp-message__sender a:hover {
  text-decoration: underline;
}

/* Sent date */
body.hp-template--messages-view-page .hp-message__sent-date {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-subtle);
  margin-left: auto;
}

/* Message body text */
body.hp-template--messages-view-page .hp-message__text {
  color: var(--color-contrast);
  font-size: var(--font-size-base);
  line-height: var(--lh-relaxed);
  margin: 0;
}
body.hp-template--messages-view-page .hp-message__text p {
  margin: 0 0 var(--spacing-20);
}
body.hp-template--messages-view-page .hp-message__text p:last-child {
  margin-bottom: 0;
}

/* Attachment link */
body.hp-template--messages-view-page .hp-message__attachment {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-20);
  font-size: var(--font-size-sm);
  color: var(--color-accent-1);
  text-decoration: none;
  margin-top: var(--spacing-30);
}
body.hp-template--messages-view-page .hp-message__attachment:hover {
  text-decoration: underline;
}

/* Delete link (hover-reveal) */
body.hp-template--messages-view-page .hp-message__action--delete {
  position: absolute;
  top: var(--spacing-40);
  right: var(--spacing-40);
  color: var(--color-contrast-subtle);
  opacity: 0;
  transition: opacity var(--transition), color var(--transition);
}
body.hp-template--messages-view-page .hp-message--view-block:hover .hp-message__action--delete {
  opacity: 1;
}
body.hp-template--messages-view-page .hp-message__action--delete:hover {
  color: var(--color-error-fg);
}

/* Read receipt check icon — sent messages (::after in HP CSS is a FontAwesome icon) */
body.hp-template--messages-view-page .hp-message--view-block.hp-message--sent::after {
  /* HP shows FA check icon via ::after content — we let it render but recolour it */
  color: var(--color-accent-1) !important;
  opacity: 0.45 !important;
  right: var(--spacing-40) !important;
  display: block !important;
}

/* ---- Message compose form (.hp-form--message-send) ---- */

body.hp-template--messages-view-page .hp-form--message-send {
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  padding: var(--spacing-50);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

body.hp-template--messages-view-page .hp-form--message-send textarea {
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-relaxed);
  padding: var(--spacing-40);
  min-height: 7rem;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
body.hp-template--messages-view-page .hp-form--message-send textarea:focus {
  outline: none;
  border-color: var(--color-accent-1);
  box-shadow: var(--shadow-focus);
}
body.hp-template--messages-view-page .hp-form--message-send textarea::placeholder {
  color: var(--color-contrast-subtle);
}

/* File attachment field */
body.hp-template--messages-view-page .hp-form--message-send input[type="file"] {
  font-size: var(--font-size-sm);
  color: var(--color-contrast-muted);
}

/* Send button */
body.hp-template--messages-view-page .hp-form--message-send .hp-form__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0;
}

/* Empty state: no messages yet */
body.hp-template--messages-thread-page .hp-messages:empty::after,
body.hp-template--messages-thread-page .hp-no-results {
  padding: var(--spacing-80) var(--spacing-50);
  text-align: center;
  color: var(--color-contrast-muted);
  font-size: var(--font-size-base);
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
}

/* Mobile adjustments */
@media (max-width: 640px) {
  body.hp-template--messages-view-page .hp-message--view-block {
    margin-right: 1.5rem !important;
  }
  body.hp-template--messages-view-page .hp-message--view-block.hp-message--sent {
    margin-left: 1.5rem !important;
    margin-right: 0 !important;
  }
}

/* ============================================================================
   WLS-13/14: Category pill on Jobs card — clickable, never clipped.
   The pill is rendered as <a class="wl-tag wl-tag--accent wl-cat-pill"> by
   request-status-badge.php (WLS-14: links to catalog filtered by category).
   WLS-13: flex-shrink:0 + white-space:nowrap prevent the pill from being
   compressed by the flex sibling (status badge) in .wl-project__top.
   max-width:none overrides any inherited constraint from .wl-tag (global.css
   sets max-width:8rem on skill tags — we need no cap on the category pill).
   overflow:visible ensures text is never cut by a parent clip boundary.
   ============================================================================ */
.wl-cat-pill {
  flex-shrink: 0;
  white-space: nowrap;
  max-width: none;
  overflow: visible;
  text-decoration: none; /* pill is a link but must look like a chip, not underlined text */
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.wl-cat-pill:hover,
.wl-cat-pill:focus {
  background: var(--color-accent-1) !important;
  border-color: var(--color-accent-1) !important;
  color: var(--color-accent-on) !important;
  text-decoration: none;
}

/* ============================================================================
   VIEW TOGGLE — shared styles for .cat-viewtoggle on both catalogs.
   The toggle buttons sit in the topbar alongside the sort select.
   WLS-5/10: align-self:center ensures they sit at the same vertical midline
   as the sort form and result count. The group itself is display:flex with
   a shared background track (like a tab bar).
   ============================================================================ */
.cat-viewtoggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  overflow: hidden;
  flex-shrink: 0;
  align-self: center;
}
.cat-viewtoggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  color: var(--color-contrast-subtle);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cat-viewtoggle__btn:hover {
  background: var(--color-surface-3);
  color: var(--color-contrast);
}
.cat-viewtoggle__btn[aria-pressed="true"] {
  background: var(--color-accent-weak);
  color: var(--color-accent-1);
}