/*
Theme Name:   ZJELL Models
Theme URI:    https://zjellmodels.com
Description:  Premium child theme for ZJELL Models — Global Model Discovery & Booking Marketplace. Built on ListingHive (HivePress). Mobile-first, no page builder on profile/directory templates.
Author:       ZJELL Models
Author URI:   https://www.zjell.com
Template:     listinghive
Version:      0.7.6
License:      GNU General Public License v2 or later
Text Domain:  zjell-models
*/

/* =================================================================
   1. DESIGN TOKENS
   Provisional palette/type pairing until brand mood references are
   reviewed — see ZJELL-Models-Build-Log-13-09-2026.md §"Needs Wedge".
   Everything below is built on these tokens; swapping the palette
   or fonts later means editing only this block.
   ================================================================= */
:root {
  /* Colour — editorial neutrals, black/white brand, single warm accent for status only */
  --zm-ink:        #111111;   /* primary text / brand ink */
  --zm-ink-2:      #4a4a4a;   /* secondary text */
  --zm-ink-3:      #8a8a8a;   /* meta / tertiary text */
  --zm-ink-4:      #c7c2ba;   /* disabled / placeholder */
  --zm-paper:      #ffffff;
  --zm-paper-2:    #f6f4f1;   /* warm off-white surface */
  --zm-paper-3:    #efece6;   /* slightly deeper warm surface (hover, chips) */
  --zm-line:       #e6e2dc;
  --zm-line-2:     #d7d1c7;

  --zm-accent:     #111111;   /* brand accent = ink (black/white identity) */
  --zm-accent-ink: #ffffff;
  --zm-gold:       #b8894a;   /* Featured / premium tier only — never a CTA colour */
  --zm-gold-tint:  #f4ead9;
  --zm-verified:   #1f7a5a;
  --zm-verified-tint: #e6f2ee;
  --zm-danger:     #b3261e;
  --zm-danger-tint:#fbe9e7;
  --zm-info:       #1e5b8c;
  --zm-whatsapp:   #25d366;

  /* Type */
  --zm-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --zm-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (mobile → desktop via clamp) */
  --zm-text-xs:    0.8125rem;                         /* 13px, fixed */
  --zm-text-sm:    0.9375rem;                         /* 15px, fixed */
  --zm-text-base:  1rem;                               /* 16px, fixed */
  --zm-text-lg:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --zm-text-xl:    clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --zm-text-2xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --zm-text-3xl:   clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --zm-text-4xl:   clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --zm-leading-tight: 1.1;
  --zm-leading-snug:  1.3;
  --zm-leading-body:  1.6;

  /* Spacing scale (4px base) */
  --zm-space-1:  4px;
  --zm-space-2:  8px;
  --zm-space-3:  12px;
  --zm-space-4:  16px;
  --zm-space-5:  20px;
  --zm-space-6:  24px;
  --zm-space-8:  32px;
  --zm-space-10: 40px;
  --zm-space-12: 48px;
  --zm-space-16: 64px;
  --zm-space-20: 80px;
  --zm-gap:      var(--zm-space-4);

  /* Radius, shadow, motion */
  --zm-radius-sm:  6px;
  --zm-radius:     10px;
  --zm-radius-lg:  16px;
  --zm-radius-pill:999px;
  --zm-shadow-sm:  0 1px 3px rgba(17, 17, 17, .06);
  --zm-shadow:     0 6px 24px rgba(17, 17, 17, .08);
  --zm-shadow-lg:  0 16px 48px rgba(17, 17, 17, .14);
  --zm-ease:       cubic-bezier(.4, 0, .2, 1);
  --zm-speed:      160ms;

  /* Layout */
  --zm-max:        1280px;
  --zm-max-narrow: 760px;
  --zm-gutter:     20px;
  --zm-card-ratio: 3 / 4;     /* portrait model cards */
  --zm-header-h:   64px;
}
@media (max-width: 767px) {
  :root { --zm-gutter: 16px; --zm-header-h: 56px; }
}

/* =================================================================
   2. RESET & BASE
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--zm-font-body);
  font-size: var(--zm-text-base);
  line-height: var(--zm-leading-body);
  color: var(--zm-ink);
  background: var(--zm-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--zm-ink); text-decoration: none; transition: color var(--zm-speed) var(--zm-ease); }
a:hover { color: var(--zm-ink-2); }

h1, h2, h3, h4, .zm-display {
  font-family: var(--zm-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: var(--zm-leading-tight);
  color: var(--zm-ink);
  margin: 0 0 var(--zm-space-3);
}
h1, .zm-h1 { font-size: var(--zm-text-4xl); }
h2, .zm-h2 { font-size: var(--zm-text-3xl); }
h3, .zm-h3 { font-size: var(--zm-text-2xl); }
h4, .zm-h4 { font-size: var(--zm-text-xl); font-family: var(--zm-font-body); font-weight: 600; }
p { margin: 0 0 var(--zm-space-4); }
.zm-lede { font-size: var(--zm-text-lg); color: var(--zm-ink-2); line-height: var(--zm-leading-snug); }
.zm-eyebrow {
  display: block; font-size: var(--zm-text-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--zm-ink-3); margin-bottom: var(--zm-space-2);
}

/* Focus states — never remove outline, only restyle it */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--zm-ink);
  outline-offset: 2px;
  border-radius: var(--zm-radius-sm);
}

/* =================================================================
   3. LAYOUT UTILITIES
   ================================================================= */
.zm-container {
  max-width: var(--zm-max);
  margin-inline: auto;
  padding-inline: var(--zm-gutter);
}
.zm-container--narrow { max-width: var(--zm-max-narrow); }
.zm-section { padding-block: var(--zm-space-12); }
@media (max-width: 767px) { .zm-section { padding-block: var(--zm-space-8); } }

.zm-grid { display: grid; gap: var(--zm-gap); }
.zm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.zm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.zm-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .zm-grid--3, .zm-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .zm-grid--2, .zm-grid--3, .zm-grid--4 { grid-template-columns: 1fr; } }

.zm-flex { display: flex; align-items: center; }
.zm-flex--between { justify-content: space-between; }
.zm-flex--wrap { flex-wrap: wrap; }
.zm-flex--gap-1 { gap: var(--zm-space-1); }
.zm-flex--gap-2 { gap: var(--zm-space-2); }
.zm-flex--gap-3 { gap: var(--zm-space-3); }
.zm-flex--gap-4 { gap: var(--zm-space-4); }
.zm-stack > * + * { margin-top: var(--zm-space-4); }

.zm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.zm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zm-aspect { position: relative; overflow: hidden; }
.zm-aspect > img, .zm-aspect > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zm-aspect--card { aspect-ratio: var(--zm-card-ratio); }
.zm-aspect--wide { aspect-ratio: 16 / 9; }
.zm-aspect--square { aspect-ratio: 1 / 1; }

hr, .zm-divider { border: 0; border-top: 1px solid var(--zm-line); margin: var(--zm-space-6) 0; }

/* =================================================================
   4. BUTTONS
   ================================================================= */
.zm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--zm-space-2);
  font-family: var(--zm-font-body); font-weight: 600; font-size: var(--zm-text-sm);
  padding: 12px 22px; border-radius: var(--zm-radius-pill); border: 0; cursor: pointer;
  transition: background-color var(--zm-speed) var(--zm-ease), color var(--zm-speed) var(--zm-ease),
              box-shadow var(--zm-speed) var(--zm-ease), transform var(--zm-speed) var(--zm-ease);
  line-height: 1; white-space: nowrap;
}
.zm-btn:active { transform: scale(.98); }
.zm-btn--sm { padding: 8px 16px; font-size: var(--zm-text-xs); }
.zm-btn--lg { padding: 15px 28px; font-size: var(--zm-text-base); }
.zm-btn--block { display: flex; width: 100%; }

/* Neutralise the parent theme's default yellow background/border on any <button type="submit">
   or <input type="submit"> so .zm-btn variants (ghost, subtle, etc.) can style it themselves. */
button[type="submit"].zm-btn, input[type="submit"].zm-btn {
  background: transparent; border-color: transparent;
}

.zm-btn--primary, .button--primary, .hp-form__button.button--primary,
button[type="submit"].zm-btn--primary, input[type="submit"].zm-btn--primary {
  background: var(--zm-ink) !important; color: #fff !important;
}
.zm-btn--primary:hover, .button--primary:hover,
button[type="submit"].zm-btn--primary:hover { background: var(--zm-ink-2) !important; color: #fff !important; }

.zm-btn--ghost {
  background: transparent; color: var(--zm-ink); box-shadow: inset 0 0 0 1.5px var(--zm-ink);
}
.zm-btn--ghost:hover { background: var(--zm-paper-2); }

.zm-btn--subtle { background: var(--zm-paper-2); color: var(--zm-ink); }
.zm-btn--subtle:hover { background: var(--zm-paper-3); }

.zm-btn--whatsapp { background: var(--zm-whatsapp); color: #fff; }
.zm-btn--whatsapp:hover { background: #1fb355; color: #fff; }

.zm-btn--danger-ghost { background: transparent; color: var(--zm-danger); box-shadow: inset 0 0 0 1.5px var(--zm-danger); }

.zm-btn[disabled], .zm-btn--disabled {
  background: var(--zm-paper-3); color: var(--zm-ink-4); box-shadow: none; cursor: not-allowed;
}

.zm-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--zm-radius-pill);
  background: var(--zm-paper); box-shadow: var(--zm-shadow-sm); border: 1px solid var(--zm-line);
  color: var(--zm-ink); cursor: pointer;
}
.zm-icon-btn:hover { background: var(--zm-paper-2); }

/* =================================================================
   5. FORMS (aligned to HivePress form markup)
   ================================================================= */
.zm-field { margin-bottom: var(--zm-space-4); }
.zm-label, label {
  display: block; font-size: var(--zm-text-sm); font-weight: 600; color: var(--zm-ink);
  margin-bottom: var(--zm-space-2);
}
.zm-hint { font-size: var(--zm-text-xs); color: var(--zm-ink-3); margin-top: var(--zm-space-1); }
.zm-error-text { font-size: var(--zm-text-xs); color: var(--zm-danger); margin-top: var(--zm-space-1); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="date"], input[type="search"], input[type="url"],
select, textarea,
.hp-form input[type="text"], .hp-form input[type="email"], .hp-form select, .hp-form textarea {
  width: 100%; font-family: var(--zm-font-body); font-size: var(--zm-text-base);
  color: var(--zm-ink); background: var(--zm-paper); border: 1.5px solid var(--zm-line-2);
  border-radius: var(--zm-radius); padding: 12px 14px; transition: border-color var(--zm-speed) var(--zm-ease);
  min-height: 48px; /* mobile tap target */
}
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--zm-ink-4); }
input:hover, select:hover, textarea:hover { border-color: var(--zm-ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--zm-ink); outline: none; }
.zm-field--error input, .zm-field--error select, .zm-field--error textarea { border-color: var(--zm-danger); }

.zm-checkbox, .zm-radio { display: flex; align-items: flex-start; gap: var(--zm-space-2); font-size: var(--zm-text-sm); }
.zm-checkbox input, .zm-radio input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }

/* Chip-style multi-select (work types, languages, etc.) */
.zm-chip-group { display: flex; flex-wrap: wrap; gap: var(--zm-space-2); }
.zm-chip {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--zm-radius-pill);
  background: var(--zm-paper-2); border: 1.5px solid transparent; font-size: var(--zm-text-sm);
  color: var(--zm-ink-2); cursor: pointer; transition: all var(--zm-speed) var(--zm-ease);
}
.zm-chip:hover { background: var(--zm-paper-3); }
.zm-chip.is-selected, .zm-chip--active {
  background: var(--zm-ink); color: #fff; border-color: var(--zm-ink);
}

/* =================================================================
   6. BADGES & STATUS
   ================================================================= */
.zm-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--zm-radius-pill);
  line-height: 1.4;
}
.zm-badge--verified { background: var(--zm-verified-tint); color: var(--zm-verified); }
.zm-badge--featured { background: var(--zm-gold-tint); color: var(--zm-gold); }
.zm-badge--new      { background: var(--zm-paper-3); color: var(--zm-ink-2); }
.zm-badge--elite    { background: var(--zm-ink); color: #fff; }
.zm-badge--danger   { background: var(--zm-danger-tint); color: var(--zm-danger); }

/* Plan tier chips (Free / Basic / Pro / Elite — pricing & profile) */
.zm-tier { font-weight: 700; font-size: var(--zm-text-xs); text-transform: uppercase; letter-spacing: .06em; }
.zm-tier--free  { color: var(--zm-ink-3); }
.zm-tier--basic { color: var(--zm-info); }
.zm-tier--pro   { color: var(--zm-ink); }
.zm-tier--elite { color: var(--zm-gold); }

/* =================================================================
   7. RATE DISPLAY (₹ first, USD alongside — project output standard)
   ================================================================= */
.zm-rate { font-weight: 600; font-family: var(--zm-font-body); }
.zm-rate__usd { color: var(--zm-ink-3); font-weight: 400; font-size: .88em; margin-left: 4px; }
.zm-rate--lg { font-size: var(--zm-text-xl); }
.zm-rate-band { color: var(--zm-ink-2); font-size: var(--zm-text-sm); }
.zm-rate-locked { color: var(--zm-ink-3); font-size: var(--zm-text-sm); font-style: italic; }

/* =================================================================
   8. CARDS (model card — HivePress listing view-block)
   Plan spec: photo, name, city, height, category chips, rate band,
   Verified/Featured badges, shortlist heart. Nothing else.
   ================================================================= */
.zm-card {
  background: var(--zm-paper); border-radius: var(--zm-radius-lg); overflow: hidden;
  box-shadow: var(--zm-shadow-sm); transition: box-shadow var(--zm-speed) var(--zm-ease), transform var(--zm-speed) var(--zm-ease);
}
.zm-card:hover { box-shadow: var(--zm-shadow); }

.hp-listing--view-block {
  border: 0; border-radius: var(--zm-radius-lg); box-shadow: none; background: transparent;
  position: relative; overflow: visible;
}

/* --- Image: models are shot portrait. Override HivePress's inline 4:3. --- */
.hp-listing--view-block .hp-listing__image {
  position: relative; aspect-ratio: 3 / 4 !important; border-radius: var(--zm-radius-lg);
  overflow: hidden; background: var(--zm-paper-2); margin: 0;
}
.hp-listing--view-block .hp-listing__image a,
.hp-listing--view-block .hp-listing__image img {
  width: 100%; height: 100%; display: block;
}
.hp-listing--view-block .hp-listing__image img {
  object-fit: cover; transition: transform 420ms var(--zm-ease);
}
.hp-listing--view-block:hover .hp-listing__image img { transform: scale(1.04); }
.hp-listing--view-block .hp-listing__image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.42) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hp-listing--view-block:hover .hp-listing__image img { transform: none; }
}

/* --- Verified badge: pulled out of the footer and floated over the photo. --- */
.hp-listing--view-block .hp-listing__attribute--verified {
  position: absolute; top: var(--zm-space-3); left: var(--zm-space-3); z-index: 3;
  margin: 0; padding: 4px 10px 4px 8px; border-radius: var(--zm-radius-pill);
  background: rgba(255,255,255,.94); color: var(--zm-verified, #0f7a4d);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.hp-listing--view-block .hp-listing__attribute--verified::before { content: "\2713"; font-size: 10px; font-weight: 900; }

/* Featured listings (HivePress core) get a gold bar + label. */
.hp-listing--view-block.hp-listing--featured .hp-listing__image { box-shadow: inset 0 0 0 2px var(--zm-gold); }
.hp-listing--view-block .hp-listing__featured-badge {
  position: absolute; top: var(--zm-space-3); right: var(--zm-space-3); z-index: 3;
  background: var(--zm-gold); color: var(--zm-ink); font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--zm-radius-pill); line-height: 1;
}

/* --- Content --- */
.hp-listing--view-block .hp-listing__content { padding: var(--zm-space-3) 2px 0; }

/* Category = the micro eyebrow above the name. */
.hp-listing--view-block .hp-listing__categories {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  color: var(--zm-ink-3); margin: 0 0 2px;
}
.hp-listing--view-block .hp-listing__categories a { color: inherit; text-decoration: none; }
.hp-listing--view-block .hp-listing__categories a:hover { color: var(--zm-ink); }

.hp-listing--view-block .hp-listing__title {
  font-family: var(--zm-font-display); font-size: var(--zm-text-lg); font-weight: 600;
  margin: 0 0 4px; line-height: 1.2;
}
.hp-listing--view-block .hp-listing__title a { color: var(--zm-ink); text-decoration: none; }

/* "Added on 13-09-2026" is noise in a model directory. */
.hp-listing--view-block .hp-listing__created-date,
.hp-listing--view-block .hp-listing__details--primary:empty { display: none; }

/* --- Stats line: inline, dot-separated, one quiet row. --- */
.hp-listing--view-block .hp-listing__attributes--secondary {
  color: var(--zm-ink-3); font-size: var(--zm-text-xs); line-height: 1.5; margin: 0; display: block;
}
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0;
}
/* Each attribute sits in a .hp-col-* wrapper with its own padding and height —
   flatten those so the stats read as one baseline-aligned line. */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > * {
  margin: 0; padding: 0; width: auto; flex: none; max-width: 100%;
  display: inline-flex; align-items: center; min-height: 0; line-height: inherit;
}
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > * > * { margin: 0; }
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > * + *::before {
  content: "\00B7"; margin-right: 6px; color: var(--zm-ink-4);
}
/* Availability gets its own line — no leading separator when it wraps. */
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > *:has(.hp-listing__attribute--available-now) {
  flex-basis: 100%;
}
.hp-listing--view-block .hp-listing__attributes--secondary .hp-row > *:has(.hp-listing__attribute--available-now)::before {
  content: none;
}
/* Availability reads as a live signal, not another stat. */
.hp-listing--view-block .hp-listing__attribute--available-now {
  color: var(--zm-verified, #0f7a4d); font-weight: 600;
}
.hp-listing--view-block .hp-listing__attribute--available-now::after {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-left: 5px; vertical-align: middle;
}

/* --- Footer: city + rate on one line, actions right. --- */
.hp-listing--view-block .hp-listing__footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--zm-space-2);
  border: 0; padding: 6px 2px 0; margin: 0;
}
.hp-listing--view-block .hp-listing__attributes--primary { margin: 0; min-width: 0; display: block; }
.hp-listing--view-block .hp-listing__attributes--primary .hp-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0;
}
.hp-listing--view-block .hp-listing__attributes--primary .hp-row > * {
  margin: 0; padding: 0; width: auto; flex: none; min-height: 0; line-height: 1.35;
}
.hp-listing--view-block .hp-listing__attributes--primary .hp-row > * > * { margin: 0; }
.hp-listing--view-block .hp-listing__attribute--city {
  font-size: var(--zm-text-xs); color: var(--zm-ink-3); margin: 0;
}
.hp-listing--view-block .hp-listing__attribute--rate-band {
  font-size: var(--zm-text-sm); font-weight: 600; color: var(--zm-ink); margin: 0; white-space: nowrap;
}

.hp-listing--view-block .hp-listing__actions--primary {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin: 0;
}
.hp-listing--view-block .hp-listing__action {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--zm-ink-3); font-size: 14px;
  transition: background var(--zm-speed) var(--zm-ease), color var(--zm-speed) var(--zm-ease);
}
.hp-listing--view-block .hp-listing__action:hover { background: var(--zm-paper-2); color: var(--zm-ink); }
.hp-listing--view-block .hp-listing__action--favorite:hover,
.hp-listing--view-block .hp-listing__action--favorite.hp-listing__action--favorite-active { color: #d33a5c; }

/* --- Grid. HivePress nests .hp-listings > .hp-row > .hp-grid__item (flexbox
   columns, 1-up phone / 2-up tablet). Move the grid onto .hp-row and
   neutralise the column widths: 2-up on phones, 3-up from tablet. --- */
.hp-listings > .hp-row {
  display: grid; gap: var(--zm-space-6) var(--zm-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
}
@media (min-width: 1024px) { .hp-listings > .hp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-listings > .hp-row > .hp-grid__item {
  width: 100% !important; max-width: none !important; flex: none !important;
  padding: 0 !important; margin: 0 !important;
}

/* =================================================================
   9. HEADER & NAVIGATION
   ================================================================= */
.custom-logo-link { display: inline-block; line-height: 0; }
.custom-logo { width: auto !important; height: 40px !important; max-width: 200px; }
@media (max-width: 767px) { .custom-logo { height: 28px !important; max-width: 140px; } }

.header-navbar {
  border-bottom: 1px solid var(--zm-line);
  background: var(--zm-paper);
}
.header-navbar__item > a, .header-menu a {
  font-size: var(--zm-text-sm); font-weight: 500; color: var(--zm-ink-2);
}
.header-navbar__item > a:hover, .header-menu a:hover { color: var(--zm-ink); }

/* =================================================================
   10. FILTER BAR / MOBILE DIRECTORY
   ================================================================= */
@media (max-width: 767px) {
  .hp-listings > .hp-row { gap: var(--zm-space-5) 12px; }
  .zm-filter-bar {
    position: sticky; bottom: 0; z-index: 20; background: var(--zm-paper);
    border-top: 1px solid var(--zm-line); padding: 10px var(--zm-gutter);
    display: flex; gap: var(--zm-space-3);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}
.zm-filter-sheet {
  position: fixed; inset: auto 0 0 0; background: var(--zm-paper); border-radius: 20px 20px 0 0;
  box-shadow: var(--zm-shadow-lg); max-height: 85vh; overflow-y: auto; padding: var(--zm-space-6) var(--zm-gutter);
  padding-bottom: calc(var(--zm-space-6) + env(safe-area-inset-bottom));
}

/* =================================================================
   11. STICKY MOBILE CTA BAR (profile pages — Send Brief / WhatsApp)
   ================================================================= */
.zm-sticky-cta {
  position: sticky; bottom: 0; z-index: 30; display: none;
  background: var(--zm-paper); border-top: 1px solid var(--zm-line);
  padding: 10px var(--zm-gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom));
  gap: var(--zm-space-3);
}
@media (max-width: 767px) { .zm-sticky-cta { display: flex; } }
.zm-sticky-cta .zm-btn { flex: 1; }

/* =================================================================
   12. EMPTY STATES & LOADING
   ================================================================= */
.zm-empty { text-align: center; padding: var(--zm-space-16) var(--zm-gutter); color: var(--zm-ink-3); }
.zm-skeleton {
  background: linear-gradient(90deg, var(--zm-paper-2) 25%, var(--zm-paper-3) 37%, var(--zm-paper-2) 63%);
  background-size: 400% 100%; animation: zm-shimmer 1.4s ease infinite; border-radius: var(--zm-radius);
}
@keyframes zm-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .zm-skeleton { animation: none; } }

/* =================================================================
   13. FOOTER
   ================================================================= */
.zm-footer { background: var(--zm-ink); color: var(--zm-paper-2); }
.zm-footer a { color: var(--zm-paper-2); }
.zm-footer a:hover { color: #fff; }
.zm-footer__meta { color: var(--zm-ink-4); font-size: var(--zm-text-xs); }

/* =================================================================
   14. PARENT-THEME OVERRIDES (kill ListingHive's default yellow accent)
   ================================================================= */
.button--primary, .hp-form__button, .hp-listing__action--primary, .hp-request__action--primary,
.header-navbar__button, .hp-button--primary, button.button, .wp-block-button__link {
  background-color: var(--zm-ink) !important; border-color: var(--zm-ink) !important; color: #fff !important;
  border-radius: var(--zm-radius-pill) !important;
}
.button--primary:hover, .hp-form__button:hover { background-color: var(--zm-ink-2) !important; border-color: var(--zm-ink-2) !important; }
.hp-listing__title a:hover { color: var(--zm-ink-2); }

/* Never show the page H1 twice on single profile pages */
.hp-listing--view-page .hp-listing__title { font-size: var(--zm-text-3xl); }

/* =================================================================
   15. HOMEPAGE (front-page.php)
   ================================================================= */
.zm-home { overflow-x: clip; }
.zm-section { padding: var(--zm-space-16) 0; }

/* --- Hero --- */
.zm-hero {
  padding: var(--zm-space-16) 0 var(--zm-space-12);
  background: linear-gradient(180deg, var(--zm-paper-2) 0%, var(--zm-paper) 100%);
  text-align: center;
}
.zm-hero__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--zm-gutter); }
.zm-eyebrow {
  display: inline-block; font-size: var(--zm-text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--zm-ink-3); font-weight: 600; margin-bottom: var(--zm-space-3);
}
.zm-hero__title {
  font-family: var(--zm-font-display); font-weight: 600; line-height: 1.08;
  font-size: var(--zm-text-4xl); color: var(--zm-ink); margin: 0 0 var(--zm-space-4);
}
.zm-hero__lede {
  font-size: var(--zm-text-lg); color: var(--zm-ink-3); max-width: 560px; margin: 0 auto var(--zm-space-8);
}

.zm-search { margin: 0 auto var(--zm-space-6); max-width: 640px; }
.zm-search__row {
  display: flex; flex-direction: column; gap: var(--zm-space-3);
  background: var(--zm-paper); border: 1px solid var(--zm-line); border-radius: var(--zm-radius-lg);
  padding: var(--zm-space-3); box-shadow: var(--zm-shadow-sm);
}
.zm-search__field { flex: 1; text-align: left; }
.zm-search__field select {
  width: 100%; border: 1px solid var(--zm-line); border-radius: var(--zm-radius);
  padding: var(--zm-space-3); font-size: var(--zm-text-sm); background: var(--zm-paper); color: var(--zm-ink);
}
.zm-search__submit { width: 100%; }
@media (min-width: 640px) {
  .zm-search__row { flex-direction: row; align-items: center; }
  .zm-search__submit { width: auto; white-space: nowrap; }
}

.zm-hero__actions {
  display: flex; flex-direction: column; gap: var(--zm-space-3); align-items: center; justify-content: center;
}
@media (min-width: 480px) { .zm-hero__actions { flex-direction: row; } }

/* --- Trust strip --- */
.zm-trust { padding: var(--zm-space-10) 0; border-bottom: 1px solid var(--zm-line); }
.zm-trust__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--zm-space-6); padding: 0 var(--zm-gutter);
  text-align: center;
}
@media (min-width: 768px) { .zm-trust__grid { grid-template-columns: repeat(4, 1fr); } }
.zm-trust__item p { font-size: var(--zm-text-sm); color: var(--zm-ink-3); margin: var(--zm-space-2) 0 0; }

/* --- Browse by city / category --- */
.zm-browse { text-align: center; }
.zm-browse--alt { background: var(--zm-paper-2); }
.zm-h3 { font-family: var(--zm-font-display); font-size: var(--zm-text-2xl); font-weight: 600; margin: 0 0 var(--zm-space-6); }
.zm-h4 { font-family: var(--zm-font-display); font-size: var(--zm-text-xl); font-weight: 600; margin: 0 0 var(--zm-space-2); }
.zm-browse .zm-chip-group, .zm-browse__cities {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--zm-space-2);
}
a.zm-chip {
  display: inline-block; padding: var(--zm-space-2) var(--zm-space-4); border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-pill); font-size: var(--zm-text-sm); color: var(--zm-ink); text-decoration: none;
  background: var(--zm-paper); transition: background 0.15s ease, border-color 0.15s ease;
}
a.zm-chip:hover { background: var(--zm-ink); color: #fff; border-color: var(--zm-ink); }

/* --- How it works --- */
.zm-steps { text-align: center; }
.zm-steps__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--zm-space-8); margin-top: var(--zm-space-8);
}
@media (min-width: 640px) { .zm-steps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .zm-steps__grid { grid-template-columns: repeat(4, 1fr); } }
.zm-step__n {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto var(--zm-space-3);
  border-radius: 50%; background: var(--zm-ink); color: #fff; font-family: var(--zm-font-display); font-weight: 600;
}
.zm-step h4 { margin: 0 0 var(--zm-space-2); font-size: var(--zm-text-base); }
.zm-step p { margin: 0; }

/* --- Dual audience CTA --- */
.zm-audience__card {
  background: var(--zm-paper); border: 1px solid var(--zm-line); border-radius: var(--zm-radius-lg);
  padding: var(--zm-space-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--zm-space-3);
}
.zm-audience__card h3 { font-family: var(--zm-font-display); font-size: var(--zm-text-xl); margin: 0; }
.zm-audience__card--dark {
  background: var(--zm-ink); color: var(--zm-paper-2); border-color: var(--zm-ink);
}
.zm-audience__card--dark .zm-eyebrow, .zm-audience__card--dark h3 { color: #fff; }
.zm-audience__card--dark .zm-lede { color: var(--zm-ink-4); }

/* --- Studio upsell banner --- */
.zm-studio-banner {
  background: var(--zm-paper-2); border-top: 1px solid var(--zm-line); border-bottom: 1px solid var(--zm-line);
}
.zm-studio-banner .zm-eyebrow { color: var(--zm-gold, var(--zm-ink-3)); }

/* =================================================================
   16. MODEL PROFILE PAGE (single-hp_listing.php)
   ================================================================= */
.zm-profile { padding-bottom: var(--zm-space-16); }

.zm-breadcrumb {
  font-size: var(--zm-text-xs); color: var(--zm-ink-3);
  padding: var(--zm-space-4) 0 var(--zm-space-2); display: flex; gap: 8px; flex-wrap: wrap;
}
.zm-breadcrumb a { color: inherit; text-decoration: none; }
.zm-breadcrumb a:hover { color: var(--zm-ink); text-decoration: underline; }

/* --- Two-column shell: portfolio left, booking card right. --- */
.zm-profile__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zm-space-8); }
@media (min-width: 1024px) {
  .zm-profile__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--zm-space-10); align-items: start; }
}

/* --- Hero gallery --- */
.zm-hero-gallery__main {
  position: relative; margin: 0; border-radius: var(--zm-radius-lg); overflow: hidden;
  background: var(--zm-paper-2); aspect-ratio: 4 / 5;
}
.zm-hero-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zm-hero-gallery__badge { position: absolute; top: var(--zm-space-4); left: var(--zm-space-4); }

.zm-hero-gallery__thumbs {
  display: flex; gap: var(--zm-space-2); margin-top: var(--zm-space-2);
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;
}
.zm-hero-gallery__thumb {
  flex: 0 0 72px; width: 72px; height: 90px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--zm-radius); overflow: hidden; background: var(--zm-paper-2);
  opacity: .62; transition: opacity var(--zm-speed) var(--zm-ease), box-shadow var(--zm-speed) var(--zm-ease);
}
.zm-hero-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zm-hero-gallery__thumb:hover { opacity: .85; }
.zm-hero-gallery__thumb.is-active { opacity: 1; box-shadow: inset 0 0 0 2px var(--zm-ink); }

/* --- Identity --- */
.zm-profile__identity { margin-top: var(--zm-space-6); }
.zm-profile__name {
  font-family: var(--zm-font-display); font-size: var(--zm-text-3xl); font-weight: 600;
  line-height: 1.1; margin: 0 0 var(--zm-space-2); display: flex; align-items: center; gap: var(--zm-space-3); flex-wrap: wrap;
}
.zm-profile__headline { margin: 0 0 var(--zm-space-2); }
.zm-profile__city { font-size: var(--zm-text-sm); color: var(--zm-ink-3); margin: 0; }

/* --- Stats strip: the numbers a casting decision actually turns on. --- */
.zm-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  /* Paper, not line, as the grid backing: an odd number of stats leaves an empty
     cell, and a line-coloured backing renders that orphan as a grey block. */
  background: var(--zm-paper); border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius-lg); overflow: hidden; margin: var(--zm-space-6) 0;
}
@media (min-width: 560px) { .zm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zm-stat { background: var(--zm-paper); padding: var(--zm-space-4) var(--zm-space-3); text-align: center;
  box-shadow: inset -1px -1px 0 var(--zm-line); }
.zm-stat__label {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zm-ink-3); font-weight: 600; margin-bottom: 2px;
}
.zm-stat__value { display: block; font-size: var(--zm-text-base); font-weight: 600; color: var(--zm-ink); }

/* --- Content sections --- */
.zm-section-block { margin-top: var(--zm-space-8); }
.zm-section-block .zm-h4 { margin: 0 0 var(--zm-space-3); }
.zm-profile__about p { color: var(--zm-ink-2); }

.zm-deflist { margin: 0; display: grid; gap: 0; }
.zm-deflist__row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--zm-space-4);
  padding: var(--zm-space-3) 0; border-bottom: 1px solid var(--zm-line);
}
.zm-deflist__row:last-child { border-bottom: 0; }
.zm-deflist dt { font-size: var(--zm-text-xs); color: var(--zm-ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin: 0; }
.zm-deflist dd { margin: 0; font-size: var(--zm-text-sm); color: var(--zm-ink); }
@media (max-width: 479px) {
  .zm-deflist__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --- Portfolio grid --- */
.zm-portfolio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zm-space-3); }
@media (min-width: 768px) { .zm-portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zm-portfolio__item { margin: 0; border-radius: var(--zm-radius); overflow: hidden; background: var(--zm-paper-2); aspect-ratio: 3 / 4; }
.zm-portfolio__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zm-reels iframe, .zm-reels video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--zm-radius); }

/* --- Booking card: sticky on desktop, the whole point of the page. --- */
.zm-book-card {
  background: var(--zm-paper); border: 1px solid var(--zm-line); border-radius: var(--zm-radius-lg);
  padding: var(--zm-space-6); box-shadow: var(--zm-shadow-sm);
}
@media (min-width: 1024px) { .zm-book-card { position: sticky; top: var(--zm-space-6); } }

.zm-book-card__rates { display: grid; gap: var(--zm-space-3); }
.zm-book-card__rate { display: flex; align-items: baseline; justify-content: space-between; gap: var(--zm-space-3); }
.zm-book-card__rate-label { font-size: var(--zm-text-xs); color: var(--zm-ink-3); }
.zm-book-card__rate-value { font-size: var(--zm-text-lg); font-weight: 600; color: var(--zm-ink); text-align: right; }

.zm-book-card__availability {
  list-style: none; margin: var(--zm-space-5) 0 0; padding: var(--zm-space-4) 0 0;
  border-top: 1px solid var(--zm-line); display: grid; gap: var(--zm-space-2);
}
.zm-book-card__availability li {
  font-size: var(--zm-text-sm); color: var(--zm-ink-2); padding-left: 20px; position: relative;
}
.zm-book-card__availability li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--zm-verified, #0f7a4d); font-weight: 700; font-size: 12px;
}

.zm-book-card__actions { display: grid; gap: var(--zm-space-2); margin-top: var(--zm-space-5); }
.zm-book-card__note { font-size: var(--zm-text-xs); color: var(--zm-ink-3); margin: var(--zm-space-4) 0 0; line-height: 1.5; }
.zm-book-card__trust {
  font-size: 11px; color: var(--zm-ink-3); margin: var(--zm-space-4) 0 0;
  padding-top: var(--zm-space-4); border-top: 1px solid var(--zm-line); line-height: 1.5;
}

/* --- Similar models --- */
.zm-similar { background: var(--zm-paper-2); margin-top: var(--zm-space-12); }
.zm-similar__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zm-space-4); }
@media (min-width: 768px) { .zm-similar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zm-similar__card { text-decoration: none; color: inherit; display: block; }
.zm-similar__img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: var(--zm-radius-lg); background: var(--zm-paper-3);
}
.zm-similar__name {
  display: block; font-family: var(--zm-font-display); font-size: var(--zm-text-base);
  margin-top: var(--zm-space-2); color: var(--zm-ink);
}
.zm-similar__rate { display: block; font-size: var(--zm-text-xs); color: var(--zm-ink-3); }

/* The sticky mobile bar must never sit under the desktop booking card. */
@media (min-width: 768px) { .zm-profile .zm-sticky-cta { display: none; } }