/* PixelCMS Photographer Marketplace v0.2.0
 * Component-level layout only. Font, colour, container, section padding and
 * general corner radius remain Core DEV221 responsibilities.
 * Hero image and CTA backgrounds deliberately retained from the approved design.
 */
.pxphoto-v2-block{min-width:0}
.pxphoto-v2-block[data-pxphoto-image-fit="contain"] :is(.pxphoto-profile-card,.pxphoto-style-card,.pxphoto-province-grid a) img{object-fit:contain}
.pxphoto-v2-block .pxphoto-section-inner{min-width:0}
.pxphoto-v2-block.pxphoto-stats-section>.pxphoto-stats{display:grid;grid-template-columns:repeat(var(--pxphoto-v2-desktop-cols,5),minmax(0,1fr));gap:0}
.pxphoto-v2-block.pxphoto-how .pxphoto-how-grid{grid-template-columns:repeat(var(--pxphoto-v2-desktop-cols,4),minmax(0,1fr))}
.pxphoto-v2-block.pxphoto-pricing-section .pxphoto-pricing-grid{grid-template-columns:repeat(var(--pxphoto-v2-desktop-cols,3),minmax(0,1fr))}
.pxphoto-v2-block.pxphoto-v2-list .pxphoto-profile-grid{display:grid;grid-template-columns:repeat(var(--pxphoto-v2-desktop-cols,3),minmax(0,1fr))!important;min-width:0}
.pxphoto-v2-block.pxphoto-results-block .pxphoto-search-results.is-grid{grid-template-columns:repeat(var(--pxphoto-v2-desktop-cols,3),minmax(0,1fr))!important}
.pxphoto-v2-block.pxphoto-styles-section .pxphoto-style-grid{grid-template-columns:repeat(var(--pxphoto-v2-desktop-cols,8),minmax(0,1fr))!important}
.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid{grid-template-columns:repeat(var(--pxphoto-v2-desktop-cols,6),minmax(0,1fr))!important}
/* Explicit exception: avatar portrait is always circular, never the global radius. */
.pxphoto-v2-block img[data-radius-mode="circle"],.pxphoto-v2-block .pxphoto-latest-person img{border-radius:50%!important;aspect-ratio:1;object-fit:cover}
/* Background ownership: these content wrappers are transparent by default;
 * do NOT remove hero / CTA image or a Core-authored section background. */
.pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-latest-section,.pxphoto-pricing-section,.pxphoto-province-section,.pxphoto-how,.pxphoto-results-block){background:transparent}
@media (min-width:1025px){.pxphoto-v2-block[data-pxphoto-hide-desktop="1"]{display:none!important}}
@media (min-width:681px) and (max-width:1024px){
 .pxphoto-v2-block[data-pxphoto-hide-tablet="1"]{display:none!important}
 .pxphoto-v2-block.pxphoto-v2-list .pxphoto-profile-grid,.pxphoto-v2-block.pxphoto-results-block .pxphoto-search-results.is-grid,.pxphoto-v2-block.pxphoto-styles-section .pxphoto-style-grid,.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid{grid-template-columns:repeat(var(--pxphoto-v2-tablet-cols,2),minmax(0,1fr))!important}
 .pxphoto-v2-block.pxphoto-how .pxphoto-how-grid,.pxphoto-v2-block.pxphoto-pricing-section .pxphoto-pricing-grid,.pxphoto-v2-block.pxphoto-stats-section>.pxphoto-stats{grid-template-columns:repeat(var(--pxphoto-v2-tablet-cols,2),minmax(0,1fr))!important}
}
@media (max-width:680px){
 .pxphoto-v2-block[data-pxphoto-hide-mobile="1"]{display:none!important}
 .pxphoto-v2-block.pxphoto-v2-list .pxphoto-profile-grid,.pxphoto-v2-block.pxphoto-results-block .pxphoto-search-results.is-grid,.pxphoto-v2-block.pxphoto-styles-section .pxphoto-style-grid,.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid{grid-template-columns:repeat(var(--pxphoto-v2-mobile-cols,1),minmax(0,1fr))!important}
 .pxphoto-v2-block.pxphoto-stats-section>.pxphoto-stats{grid-template-columns:repeat(var(--pxphoto-v2-mobile-cols,2),minmax(0,1fr))!important}
 .pxphoto-v2-block[data-pxphoto-mobile-stack="1"] .pxphoto-hero-inner,.pxphoto-v2-block[data-pxphoto-mobile-stack="1"] .pxphoto-register-cta{display:flex!important;flex-direction:column;align-items:stretch}
}

/* PixelCMS Photographer Marketplace v0.2.0 DEV9
 * Ownership: Core DEV221 provides typography role tokens, section spacing,
 * colour theme and global container. These rules only arrange content *inside*
 * three photographed Block components. Never import this CSS into the editor.
 * DEV7 native modal scrollbar lives in editor-blocks-v2.css; untouched.
 */

/* Shared section heading: optional eyebrow, title, then supporting copy. */
.pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
  .pxphoto-section-head {
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  position:relative;
  gap:0!important;
  min-width:0;
  max-width:100%!important;
  margin:0 0 18px!important;
}
.pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
  .pxphoto-section-head > .pxphoto-section-eyebrow {
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  align-self:flex-start!important;
  width:auto!important;
  min-width:0;
  gap:9px!important;
  margin:0 0 7px!important;
  padding:0!important;
  line-height:1.4!important;
  color:var(--pxth-button,var(--pxth-primary,#1668e8));
  font-size:var(--pxth-font-small)!important;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:none;
}
.pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
  .pxphoto-section-head > .pxphoto-section-eyebrow::before {
  content:""!important;
  display:block!important;
  flex:0 0 18px;
  width:18px;
  height:3px;
  background:currentColor;
}
.pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
  .pxphoto-section-head > h2 {
  display:block;
  width:100%;
  min-width:0;
  margin:0!important;
  line-height:1.3!important;
  text-wrap:pretty;
}
.pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
  .pxphoto-section-head > p {
  display:block;
  flex:0 1 auto!important;
  width:100%;
  min-width:0;
  margin:7px 0 0!important;
  padding:0!important;
  line-height:1.55!important;
}
.pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
  .pxphoto-section-head > .pxphoto-ref-more {
  position:absolute;
  right:0;
  bottom:0;
  max-width:42%;
  text-align:right;
  grid-column:auto;
  grid-row:auto;
  align-self:auto;
}
.pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
  .pxphoto-section-head:has(> .pxphoto-ref-more) > p {padding-inline-end:42%!important;}

/* Photographer cards: identity, badge, and rating live in the SAME header row. */
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-topline {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center!important;
  gap:8px;
  min-width:0;
  width:100%;
}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-title {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;
  min-width:0;
}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-title h3 {
  min-width:0;
  margin:0!important;
  line-height:1.35!important;
  overflow-wrap:break-word;
  word-break:normal;
  font-size:var(--pxth-font-card-title)!important;
}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-rating {
  display:inline-flex;
  align-items:center;
  justify-self:end;
  align-self:center;
  gap:3px;
  white-space:nowrap;
  margin:0!important;
  line-height:1.25!important;
  font-size:var(--pxth-font-small)!important;
  font-variant-numeric:tabular-nums;
}
.pxphoto-profile-card .pxphoto-verified-badge,
.pxphoto-search-result-card .pxphoto-verified-badge {
  display:inline-flex!important;
  flex:0 0 18px!important;
  align-items:center;
  justify-content:center;
  width:18px!important;
  height:18px!important;
  min-width:18px;
  min-height:18px;
  color:var(--pxth-button,var(--pxth-primary,#1668e8));
  background:transparent!important;
  border:0!important;
  padding:0!important;
  vertical-align:middle;
  line-height:1;
}
.pxphoto-profile-card .pxphoto-verified-badge svg,
.pxphoto-search-result-card .pxphoto-verified-badge svg {display:block;width:100%;height:100%;overflow:visible;}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-studio {
  margin:5px 0 7px!important;
  font-size:var(--pxth-font-small)!important;
  line-height:1.45!important;
}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin:5px 0 0;
}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-meta span {
  font-size:var(--pxth-font-small)!important;
  line-height:1.4!important;
  padding:3px 6px;
}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-pricing {
  min-width:0;
  gap:8px;
}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-pricing strong {
  font-size:var(--pxth-font-card-title)!important;
  line-height:1.3;
}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-rate-pills {
  min-width:0;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px;
}
.pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-rate-pills span {
  font-size:var(--pxth-font-small)!important;
  padding:3px 5px;
}
/* Align search cards as well, without modifying search/filter business logic. */
.pxphoto-search-result-card .pxphoto-search-result-head {align-items:center;gap:8px;}
.pxphoto-search-result-card .pxphoto-search-rating {align-self:center;margin:0;}
.pxphoto-search-result-card .pxphoto-result-title-copy h3 {display:flex;align-items:center;gap:5px;}

/* Province cards: one content overlay controls both lines. Unlike the old
 * independent absolute labels, these cannot drift or cling to the lower edge. */
.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid > a {
  position:relative;
  padding:0!important;
  min-width:0;
  overflow:hidden;
}
.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid > a > .pxphoto-province-label {
  position:absolute;
  z-index:3;
  inset:auto 0 0 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:2px;
  min-width:0;
  padding:12px 14px 13px;
  text-align:left;
  pointer-events:none;
}
.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid > a > .pxphoto-province-label > strong,
.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid > a > .pxphoto-province-label > small {
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%;
  max-width:100%;
  min-width:0;
  padding:0!important;
  margin:0!important;
  text-align:left!important;
  color:#fff!important;
  text-shadow:0 1px 5px rgba(0,0,0,.55);
  overflow-wrap:break-word;
  word-break:normal;
  line-height:1.35!important;
}
.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid > a > .pxphoto-province-label > strong {
  font-size:var(--pxth-font-body)!important;
  font-weight:800;
}
.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid > a > .pxphoto-province-label > small {
  font-size:var(--pxth-font-small)!important;
  font-weight:500;
}
/* Avoid a second grey strip or bottom padding beneath the actual image. */
.pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid > a > .pxphoto-province-art {
  margin:0!important;
  padding:0!important;
}

@media (max-width:700px) {
  .pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
    .pxphoto-section-head {margin-bottom:14px!important;}
  .pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
    .pxphoto-section-head > .pxphoto-ref-more {
    position:static;
    align-self:flex-start;
    max-width:100%;
    margin:9px 0 0;
    text-align:left;
  }
  .pxphoto-v2-block:is(.pxphoto-styles-section,.pxphoto-featured-section,.pxphoto-province-section)
    .pxphoto-section-head:has(> .pxphoto-ref-more) > p {padding-inline-end:0!important;}
  .pxphoto-v2-block.pxphoto-featured-section .pxphoto-profile-card .pxphoto-card-topline {gap:6px;}
  .pxphoto-v2-block.pxphoto-province-section .pxphoto-province-grid > a > .pxphoto-province-label {padding:10px 11px 11px;}
}

/* DEV11 — responsive form, compact pricing, centered markers, text-only toolbar,
   consistent headings. Canonical component rules loaded AFTER the legacy CSS.
   Do not alter editor-blocks-dev10.css: DEV7 native modal scroll is approved.
   Global font sizes, outer block padding, and global radius belong to Core. */

/* 1. Section header: eyebrow, title, supporting text — one vertical group. */
.pxphoto-v2-block:not(.pxphoto-hero):not(.pxphoto-cta-section) .pxphoto-section-head {
  align-items:start!important;
  row-gap:0!important;
  min-height:0;
  margin-bottom:18px!important;
}
.pxphoto-v2-block:not(.pxphoto-hero):not(.pxphoto-cta-section) .pxphoto-section-head > h2 {
  margin:0!important;
  line-height:1.3;
}
.pxphoto-v2-block:not(.pxphoto-hero):not(.pxphoto-cta-section) .pxphoto-section-head > p {
  margin:6px 0 0!important;
  padding:0!important;
  line-height:1.5!important;
  min-height:0;
}
.pxphoto-v2-block.pxphoto-home-ref:not(.pxphoto-hero):not(.pxphoto-cta-section) .pxphoto-section-head {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-auto-rows:min-content;
}
.pxphoto-v2-block.pxphoto-home-ref:not(.pxphoto-hero):not(.pxphoto-cta-section) .pxphoto-section-head > .pxphoto-section-eyebrow {
  grid-column:1/-1;
}
.pxphoto-v2-block.pxphoto-home-ref:not(.pxphoto-hero):not(.pxphoto-cta-section) .pxphoto-section-head > h2,
.pxphoto-v2-block.pxphoto-home-ref:not(.pxphoto-hero):not(.pxphoto-cta-section) .pxphoto-section-head > p {
  grid-column:1;
}
.pxphoto-v2-block.pxphoto-home-ref .pxphoto-section-head > .pxphoto-ref-more {
  grid-column:2;
  grid-row:2/4;
  align-self:center;
}

/* 2. Search form: one stacked label per row on narrow/mobile layouts.
   Important: the desktop reference overlapping-image composition stays intact. */
@media (max-width:760px) {
  /* DEV12: one boundary per field; no nested form / label frames. */
  .pxphoto-v2-block.pxphoto-hero .pxphoto-hero-search,
  .pxphoto-v2-block.pxphoto-home-ref.pxphoto-hero .pxphoto-hero-search {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    gap:10px!important;
    max-width:100%!important;
    width:100%!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .pxphoto-v2-block.pxphoto-hero .pxphoto-hero-search > label {
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    grid-column:1/-1!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    box-sizing:border-box;
  }
  .pxphoto-v2-block.pxphoto-hero .pxphoto-hero-search > label > span {
    margin:0!important;
    padding:0 2px!important;
  }
  .pxphoto-v2-block.pxphoto-hero .pxphoto-hero-search > label > :is(input,select) {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    box-sizing:border-box;
    margin:0!important;
    padding:8px 12px!important;
    border:1px solid var(--pxth-border,#d6e1ef)!important;
    border-radius:0!important;
    background-color:#fff!important;
    box-shadow:none!important;
    font:inherit!important;
  }
  .pxphoto-v2-block.pxphoto-hero .pxphoto-hero-search > label > select {
    padding-inline:12px 36px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2333495f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-size:16px!important;
    background-position:right 12px center!important;
  }
  .pxphoto-v2-block.pxphoto-hero .pxphoto-hero-search > label > :is(input,select):focus-visible {
    outline:2px solid var(--pxth-button-bg,var(--pxth-primary,#1668e8))!important;
    outline-offset:2px!important;
  }
  .pxphoto-v2-block.pxphoto-hero .pxphoto-hero-search > button {
    width:100%!important;
    min-width:0!important;
    grid-column:1/-1!important;
    margin:0!important;
    box-sizing:border-box;
  }
}

/* 3. Compact card grids: responsive count from Page Builder; card content
   wraps instead of forcing a single-column fallback on every mobile width. */
@media (max-width:760px) {
  .pxphoto-v2-block.pxphoto-pricing-section .pxphoto-pricing-grid,
  .pxphoto-v2-block.pxphoto-home-ref.pxphoto-pricing-section .pxphoto-pricing-grid,
  .pxphoto-v2-block.pxphoto-how .pxphoto-how-grid,
  .pxphoto-v2-block.pxphoto-home-ref.pxphoto-how .pxphoto-how-grid {
    display:grid!important;
    grid-template-columns:repeat(var(--pxphoto-v2-mobile-cols,2),minmax(0,1fr))!important;
    gap:10px!important;
    min-width:0;
  }
  .pxphoto-v2-block.pxphoto-pricing-section .pxphoto-plan,
  .pxphoto-v2-block.pxphoto-how .pxphoto-how-grid > article {
    min-width:0!important;
    min-height:0!important;
    padding:12px!important;
    overflow-wrap:anywhere;
  }
  .pxphoto-v2-block.pxphoto-pricing-section .pxphoto-plan :is(h3,p,strong,li),
  .pxphoto-v2-block.pxphoto-how .pxphoto-how-grid :is(h3,p) {
    min-width:0;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .pxphoto-v2-block.pxphoto-pricing-section .pxphoto-plan ul {
    padding-inline-start:0!important;
    margin:10px 0!important;
    gap:6px!important;
    list-style:none;
  }
  .pxphoto-v2-block.pxphoto-pricing-section .pxphoto-plan > strong {
    margin:9px 0!important;
  }
  .pxphoto-v2-block.pxphoto-pricing-section .pxphoto-plan > a {
    display:flex;width:100%;min-width:0;
    padding:8px 4px!important;
    box-sizing:border-box;
    text-align:center;
    white-space:normal;
  }
}
/* 4. True vertical and horizontal centering, independent of inherited Core
   line heights and Thai font metrics. */
.pxphoto-v2-block.pxphoto-how .pxphoto-how-grid b {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  padding:0!important;
  flex-shrink:0;
}
.pxphoto-v2-block .pxphoto-pagination a {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  box-sizing:border-box;
  font-variant-numeric:tabular-nums;
  padding:0!important;
}

/* 5. Search toolbar: no decorative leading symbols; text view controls and
   genuine select dropdowns, retaining existing form submission + data hooks. */
.pxphoto-v2-block.pxphoto-results-reference .pxphoto-quick-select > span[aria-hidden] {display:none!important}
.pxphoto-v2-block.pxphoto-results-reference .pxphoto-quick-select {gap:0!important}
.pxphoto-v2-block.pxphoto-results-reference .pxphoto-reference-controls .pxphoto-view-toggle {
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:auto!important;min-width:124px!important;max-width:none!important;
}
.pxphoto-v2-block.pxphoto-results-reference .pxphoto-reference-controls .pxphoto-view-toggle button {
  width:auto!important;min-width:60px!important;
  padding:0 9px!important;
  font-weight:700;
}
.pxphoto-v2-block.pxphoto-results-reference .pxphoto-reference-controls .pxphoto-view-toggle button span:not(.pxphoto-view-icon) {
  position:static!important;width:auto!important;height:auto!important;
  overflow:visible!important;clip-path:none!important;
}
.pxphoto-v2-block.pxphoto-results-reference .pxphoto-more-filter-button {
  white-space:nowrap;
  padding:0 14px;
}
@media(max-width:700px) {
  .pxphoto-v2-block.pxphoto-results-reference .pxphoto-reference-controls .pxphoto-view-toggle {
    width:auto!important;min-width:124px!important;
  }
}
@media(max-width:420px) {
  .pxphoto-v2-block.pxphoto-home-ref .pxphoto-section-head > .pxphoto-ref-more {
    grid-column:1;grid-row:auto;justify-self:start;margin-top:8px;
  }
}