/* ==========================================================================
   PNG Market - child theme styles
   Loaded after Epsilon's style.css / responsive.css, so plain overrides win.
   Sections map 1:1 to the HOME-xx design tickets.

   Do not use CSS custom properties here: Osclass' CSS merger strips them.
   Phase 2 palette (aligned to mockups + design-system.css):
     brand        #006b24   brand dark   #00551c   brand soft  #e8f5ec
     legacy brand #006b24   (still used in older rules ? migrate gradually)
     ink          #16202a   body text    #3d4651   muted       #6b7785
     hairline     #e3e8ed   hairline+    #cfd7df   canvas      #f4f6f8
   ========================================================================== */


/* ==========================================================================
   HOME-01  Overall visual polishing
   ========================================================================== */

   body {
    color: #16202a;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  h1, h2, h3, h4 {
    letter-spacing: -.01em;
  }
  
  body#home > .content {
    padding-top: 0;
    background: #fff;
  }
  
  body#home > .content > section {
    background: #fff;
  }
  
  body#home h2 {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #16202a;
  }
  
  /* Section heading rhythm: a calm divider instead of a heavy gap. */
  body#home > .content > section > .container > .block > h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e8ed;
  }
  
  body#home h2 .btn {
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
  }
  
  /* Softer premium band - the stock gradient fights the green brand. */
  body#home > .content > section.home-premium {
    background: linear-gradient(135deg, #eef8f1, #e6f3f6);
    box-shadow: none;
  }
  
  
  /* ==========================================================================
     HOME-02  Main banner
     ========================================================================== */
  
  body#home > .content > section.home-search {
    box-shadow: none;
    border: 0;
    overflow: visible;
  }
  
  /* Real flex layout: content left, <img> right ? not a positioned background. */
  /* Real flex layout: content left; hero absolute so it does not push Near You down. */
  .home-search > .container.pngm-home-banner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    overflow: visible;
    position: relative;
    min-height: 350px;
  }
  
  /* Kill parent theme decorative :after background image. */
  .home-search > .container.pngm-home-banner:after,
  .home-search > .container:after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  
  .home-search .box {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 445px);
    width: auto;
    position: relative;
    z-index: 1;
  }
  
  /* Fixed 425×387 hero slot — image asset matches this size with full collage. */
  .pngm-hero-art {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 425px;
    height: 387px;
    max-width: 48%;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    background: transparent;
    line-height: 0;
    pointer-events: none;
  }
  
  .pngm-hero-art img {
    display: block;
    width: 425px;
    height: 387px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    border: 0;
    box-shadow: none;
    background: transparent;
    pointer-events: auto;
  }
  
  .home-search h1.pngm-title,
  .home-search form,
  .home-search .latest-search {
    max-width: 100%;
  }
  
  .home-search h1.pngm-title {
    margin: 4px 0 18px 0;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.25;
    color: #1b2226;
    animation: none !important;
  }
  
  @media screen and (max-width: 767px) {
    .home-search h1,
    .home-search h1.pngm-title {
      display: none !important;
    }
  }
  
  .home-search h1.pngm-title .pngm-w-buy {
    color: #006b24;
  }
  
  .home-search h1.pngm-title .pngm-w-sell {
    color: #e30000;
  }
  
  .home-search h1.pngm-title .pngm-w-find {
    color: #1b2226;
  }
  
  .home-search h1.pngm-title .pngm-sep {
    color: #1b2226;
    font-weight: 700;
  }
  
  .home-search h1.pngm-title span {
    animation: none !important;
    -webkit-text-fill-color: unset;
    background: none !important;
  }
  
  /* Search field + button read as one control, like OLX. */
  .home-search form {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0 0 10px 0;
    border-radius: 11px;
    transition: box-shadow .18s ease;
  }
  
  .home-search .input-box {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }
  
  .home-search input[name="sPattern"] {
    display: block;
    width: 100%;
    height: 50px;
    border: 1px solid #cfd7df;
    border-right: 0;
    border-radius: 11px 0 0 11px;
    font-size: 15px;
    outline: none;
    box-shadow: none;
    transition: border-color .18s ease;
  }
  
  /* Kill broken inner focus ring / underline from parent theme. */
  .home-search input[name="sPattern"]:focus,
  .home-search input[name="sPattern"]:focus-visible,
  .home-search input[name="sPattern"]:active {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    border-color: #006b24;
  }
  
  .home-search form:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 107, 36, .13);
  }
  
  .home-search form:focus-within input[name="sPattern"] {
    border-color: #006b24;
  }
  
  .home-search form:focus-within .btn {
    border-color: #006b24;
  }
  
  .home-search .btn {
    flex: 0 0 150px;
    float: none;
    width: 150px;
    height: 50px;
    border: 1px solid #006b24;
    border-radius: 0 11px 11px 0;
    font-size: 15px;
    font-weight: 700;
  }
  
  .home-search .latest-search {
    max-height: 30px;
  }
  
  .home-search .latest-search a {
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 12.5px;
  }
  
  
  /* ==========================================================================
     HOME-03  Desktop header
     ========================================================================== */
  
  @media screen and (min-width: 1081px) {
    body#home:not(.pngm-sticky-search) {
      padding-top: 72px;
    }
  
    header {
      height: 72px;
      background: #fff;
      box-shadow: 0 1px 0 0 #e3e8ed;
    }
  
    .pngm-global-search {
      top: 72px;
    }
  
    header .cmain {
      gap: 22px;
    }
  
    header .cmain > .logo {
      align-items: center;
      height: 100%;
      margin: 0;
    }
  
    header .cmain > .logo img,
    header .cmain > .logo svg {
      max-width: 205px;
      max-height: 50px;
    }
  
    header .links {
      height: 48px;
      align-items: center;
      gap: 6px;
    }
  
    header .links .btn-white {
      display: inline-flex;
      align-items: center;
      height: 44px;
      padding: 0 14px;
      border-radius: 9px;
      font-size: 15px;
    }
  
    header .links .btn-white svg {
      height: 20px;
      margin-right: 7px;
      vertical-align: middle;
    }
  
    header .links .publish {
      display: inline-flex;
      align-items: center;
      height: 44px;
      margin-left: 16px;
      padding: 0 20px;
      border-radius: 9px;
      font-size: 15px;
      font-weight: 700;
    }
  
    header .links .btn.account img {
      width: 34px;
      height: 34px;
      margin: 0 8px 0 -4px;
    }
  
  }
  
  /* Companies / Location: keep icons when the label is long (desktop only ?
     do not force display on mobile or they shove Place an ad onto a second row). */
  @media screen and (min-width: 1081px) {
    header .links .btn.company,
    header .links .btn.location {
      display: inline-flex;
      align-items: center;
      max-width: 190px;
      overflow: hidden;
      white-space: nowrap;
    }
  
    header .links .btn.location svg,
    header .links .btn.company svg {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin-right: 6px;
      vertical-align: middle;
    }
  
    header .links .btn.location .pngm-loc-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  
  
  /* ==========================================================================
     HOME-04  Category icons + subcategories
     ========================================================================== */
  
  #home-cat {
    gap: 2px 2px;
    align-items: flex-start;
    row-gap: 2px;
    margin: 0;
    padding: 0;
  }
  
  /* The wrapper is now the flex item, so it carries the tile width and the
     anchor has to be blockified for that width to apply. */
  #home-cat .pngm-cat-item {
    position: relative;
    flex: 0 0 auto;
    width: 100px;
  }
  
  #home-cat > .pngm-cat-item > a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 2px 4px 4px;
  }
  
  #home-cat a > div {
    border: 1px solid #e3e8ed;
    box-shadow: 0 1px 2px rgba(16, 32, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  
  /* Full category names rather than a mid-word cut. */
  #home-cat a > h3 {
    height: 34px;
    margin: 0;
  }
  
  #home-cat a > h3 span {
    color: #16202a;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 15px;
  }
  
  /* Hover / zoom - pointer devices on desktop only. */
  @media (hover: hover) and (min-width: 1081px) {
    #home-cat > .pngm-cat-item > a:hover > div {
      transform: translateY(-3px) scale(1.06);
      border-color: transparent;
      box-shadow: 0 6px 18px rgba(16, 32, 42, .16);
    }
  
    #home-cat > .pngm-cat-item > a:hover > h3 span {
      color: #006b24;
    }
  }
  
  /* --- Subcategory flyout (desktop) --- */
  
  .pngm-sub-toggle {
    display: none !important;
  }
  
  .pngm-subcat {
    position: absolute;
    top: calc(100% - 4px);
    left: 50%;
    z-index: 50;
    min-width: 216px;
    max-width: 280px;
    padding: 7px;
    transform: translate(-50%, 6px);
    border: 1px solid #e3e8ed;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(16, 32, 42, .16);
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  
  /* Hover bridge so the pointer can travel into the panel. */
  .pngm-subcat:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  }
  
  @media (hover: hover) and (min-width: 1081px) {
    #home-cat .pngm-cat-item.has-sub:hover .pngm-subcat,
    #home-cat .pngm-cat-item.has-sub:focus-within .pngm-subcat {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
    }
  }
  
  .pngm-subcat ul {
    display: block;
    margin: 0;
    padding: 0;
  }
  
  .pngm-subcat li {
    display: block;
    width: 100%;
  }
  
  /* Reset the tile styling that #home-cat a would otherwise apply in here. */
  #home-cat .pngm-subcat a {
    display: block;
    width: auto;
    margin: 0;
    padding: 8px 11px;
    border-radius: 8px;
    color: #4a5561;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  #home-cat .pngm-subcat a:hover {
    background: rgba(0, 107, 36, .10);
    color: #006b24;
    text-decoration: none;
  }
  
  #home-cat .pngm-subcat .pngm-subcat-all {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e3e8ed;
  }
  
  #home-cat .pngm-subcat .pngm-subcat-all a {
    color: #006b24;
    font-weight: 700;
  }
  
  /* --- Subcategory sheet (touch / mobile) --- */
  
  .pngm-sheet-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    background: rgba(16, 32, 42, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }
  
  .pngm-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    max-height: 72vh;
    overflow-y: auto;
    padding: 8px 14px 22px 14px;
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 16px 44px rgba(16, 32, 42, .16);
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .24s ease, visibility .24s ease;
  }
  
  .pngm-sheet-backdrop.is-open,
  .pngm-sheet.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  
  .pngm-sheet-grip {
    width: 42px;
    height: 4px;
    margin: 6px auto 12px auto;
    border-radius: 4px;
    background: #cfd7df;
  }
  
  .pngm-sheet-title {
    display: block;
    margin: 0 0 8px 4px;
    font-size: 16px;
    font-weight: 700;
    color: #16202a;
  }
  
  .pngm-sheet ul {
    display: block;
    margin: 0;
    padding: 0;
  }
  
  .pngm-sheet li {
    display: block;
    border-bottom: 1px solid #e3e8ed;
  }
  
  .pngm-sheet li:last-child {
    border-bottom: 0;
  }
  
  .pngm-sheet a {
    display: block;
    padding: 13px 4px;
    color: #4a5561;
    font-size: 15px;
    font-weight: 500;
  }
  
  .pngm-sheet .pngm-subcat-all a {
    color: #006b24;
    font-weight: 700;
  }
  
  
  /* ==========================================================================
     HOME-05  Homepage spacing
     ========================================================================== */
  
  body#home > .content > section.home-search {
    padding: 18px 0 0 0;
    background: #fff;
  }
  
  /* The gap between the search block and the category row. */
  body#home .home-search h2,
  body#home .home-search h2.pngm-cats-heading {
    margin: 20px 0 6px 0;
    font-size: 18px;
  }
  
  /* Listing sections ? tighter vertical rhythm between blocks. */
  body#home > .content > section {
    padding: 8px 0;
  }
  
  body#home > .content > section.home-location,
  body#home > .content > section.home-latest,
  body#home > .content > section.home-recent,
  body#home > .content > section.home-premium,
  body#home > .content > section.home-favorite {
    padding: 14px 0 2px 0;
  }
  
  body#home > .content > section.home-latest {
    padding-top: 12px;
  }
  
  body#home > .content {
    padding-bottom: 0;
  }
  
  body#home footer.pngm-footer {
    padding-top: 28px;
    margin-top: 0;
  }
  
  
  /* ==========================================================================
     HOME-06  Listing cards (OLX-style, same for every homepage section)
     ========================================================================== */
  
  /* One card design everywhere: same width, same photo ratio, same body. */
  body#home .products.grid .simple-prod,
  body#home .products.grid .simple-prod.pngm-card,
  body#home .products.grid .simple-prod.medium,
  body#home .products.grid .simple-prod.tall,
  body#home .products.grid .simple-prod.verytall,
  body#home .products.grid .simple-prod.wide,
  body#home .products.grid .simple-prod.small,
  body#home #location-items .simple-prod,
  body#home #premium-items .simple-prod,
  body#home #premium-items .simple-prod.o1,
  body#home #premium-items .simple-prod:not(.o1),
  body#home #favorite-items .simple-prod,
  body#home #recent-items .simple-prod,
  body#home #latest-items .simple-prod {
    display: flex;
    width: calc(20% - 12px);
    margin: 0 6px 8px 6px;
  }
  
  body#home .products.grid.nice-scroll .simple-prod,
  body#home #location-items .simple-prod,
  body#home #premium-items .simple-prod,
  body#home #premium-items .simple-prod.o1,
  body#home #premium-items .simple-prod:not(.o1),
  body#home #favorite-items .simple-prod,
  body#home #recent-items .simple-prod {
    flex: 0 0 220px;
    width: 220px;
    max-width: 220px;
    margin: 0 8px 6px 0;
  }
  
  /*
   * ONE grid card format for the whole project (home + search + related).
   * Shape: square photo + price/gradient | location | title | teaser slot | date
   * List / Detail views are left to Epsilon and are not affected.
   */
  .products.grid {
    align-items: stretch;
  }
  
  .products.grid .simple-prod,
  body#home #premium-items .simple-prod,
  body#home #location-items .simple-prod,
  body#home #latest-items .simple-prod,
  body#home #favorite-items .simple-prod,
  body#home #recent-items .simple-prod,
  #search-items .products.grid .simple-prod {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
  
  .products.grid .simple-prod .simple-wrap,
  body#home #premium-items .simple-prod .simple-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0 0 12px 0;
    overflow: hidden;
    border: 1px solid #e3e8ed;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    transition: box-shadow .18s ease, border-color .18s ease;
  }
  
  .products.grid .simple-prod:hover .simple-wrap,
  body#home #premium-items .simple-prod:hover .simple-wrap {
    transform: none;
    border-color: #cfd7df;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 32, 42, .08);
  }
  
  /* Square photo area for every card. */
  .products.grid .simple-prod .img-wrap,
  .products.grid .simple-prod.tall .img-wrap,
  .products.grid .simple-prod.verytall .img-wrap,
  .products.grid .simple-prod.wide .img-wrap,
  .products.grid .simple-prod.normal .img-wrap,
  .products.grid .simple-prod.square .img-wrap,
  body#home #premium-items .simple-prod .img-wrap {
    flex: 0 0 auto;
    height: auto !important;
    padding-top: 100% !important;
  }
  
  .products.grid .simple-prod .img-wrap > a img {
    border-radius: 0;
    box-shadow: none;
  }
  
  /* Price + gradient on the photo (staging style). */
  .products.grid .simple-prod .img-wrap .bar {
    border-radius: 0;
    padding: 40px 36px 8px 10px;
    background: linear-gradient(
      transparent,
      rgba(0, 0, 0, .05) 14%,
      rgba(0, 0, 0, .12) 25%,
      rgba(0, 0, 0, .28) 43%,
      rgba(0, 0, 0, .46) 56%,
      rgba(0, 0, 0, .63) 67%,
      rgba(0, 0, 0, .75) 81%,
      rgba(0, 0, 0, .8)
    );
  }
  
  .products.grid .simple-prod .img-wrap .bar .price {
    display: block;
    float: left;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
  
  .products.grid .simple-prod .img-wrap .bar .image-counter {
    right: 8px;
    bottom: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
    line-height: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
  
  /* Fixed body block so every card matches. */
  .products.grid .simple-prod .data {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-height: 0;
    padding: 8px 10px 6px 10px;
  }
  
  #recent-ads .simple-prod .data,
  body#home #recent-items .simple-prod .data,
  body#home #recent-ads .simple-prod .data {
    padding: 12px 12px 8px 12px;
  }
  
  #recent-ads .simple-prod,
  body#home #recent-items .simple-prod {
    margin-right: 10px;
  }
  
  /* 1) Price — must use title-row order (bare .title order is ignored; row defaults to 0 and sorts above price) */
  .products.grid .simple-prod .pngm-card-price {
    display: block;
    order: 1;
    flex: 0 0 auto;
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    color: #16202a;
  }
  
  .products.grid .simple-prod .pngm-card-title-row {
    display: block;
    order: 2;
    flex: 0 0 auto;
    margin: 0 0 2px 0;
  }
  
  /* 2) Title (inside title-row — do not set flex order on .title itself) */
  .products.grid .simple-prod .title,
  .products.grid .simple-prod .pngm-card-title-row .title,
  body#home #latest-items .simple-prod .title,
  body#home #location-items .simple-prod .title,
  body#home #premium-items .simple-prod .title,
  body#home #favorite-items .simple-prod .title,
  body#home #recent-items .simple-prod .title,
  #search-items .products.grid .simple-prod .title {
    order: unset;
    flex: 0 0 auto;
    margin: 0 0 2px 0;
    min-height: 0;
    max-height: 40px;
    overflow: hidden;
    color: #16202a;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    white-space: normal;
    text-overflow: unset;
  }
  
  .products.grid .simple-prod:hover .title {
    color: #16202a;
  }
  
  /* 3) Location */
  .products.grid .simple-prod .info {
    display: block;
    order: 3;
    flex: 0 0 auto;
    margin: 0 0 2px 0;
    min-height: 0;
    max-height: 16px;
    overflow: hidden;
    color: #737f8b;
    font-size: 12.5px;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  /* Teaser is not used on compact grid cards. */
  .products.grid .simple-prod .pngm-teaser,
  body#home #latest-items .simple-prod .pngm-teaser,
  body#home #location-items .simple-prod .pngm-teaser,
  body#home #premium-items .simple-prod .pngm-teaser,
  body#home #favorite-items .simple-prod .pngm-teaser,
  body#home #recent-items .simple-prod .pngm-teaser,
  #search-items .products.grid .simple-prod .pngm-teaser {
    display: none !important;
  }
  
  /* Date only lives in the extra line ? never as a separate row. */
  .products.grid .simple-prod .pngm-date,
  body#home #premium-items .simple-prod .pngm-date,
  body#home #latest-items .simple-prod .pngm-date,
  body#home #location-items .simple-prod .pngm-date,
  body#home #favorite-items .simple-prod .pngm-date,
  body#home #recent-items .simple-prod .pngm-date,
  #recent-ads .simple-prod .pngm-date,
  #search-items .products.grid .simple-prod .pngm-date {
    display: none !important;
  }
  
  /*
   * 4) Staging detail line ? always shown on grid:
   *    "2 weeks ago ? Cars ? Used ? Sell ? 1 person viewed"
   * Fixed height so every card keeps the same shape.
   */
  .products.grid .simple-prod .extra,
  body#home #latest-items .simple-prod .extra,
  body#home #location-items .simple-prod .extra,
  body#home #favorite-items .simple-prod .extra,
  body#home #recent-items .simple-prod .extra,
  body#home #premium-items .simple-prod .extra,
  #recent-ads .simple-prod .extra,
  #search-items .products.grid .simple-prod .extra {
    order: 4;
    display: block !important;
    flex: 0 0 auto;
    margin: 0;
    padding-top: 0;
    min-height: 0;
    max-height: 34px;
    overflow: hidden;
    color: #737f8b;
    font-size: 12.5px;
    line-height: 17px;
  }
  
  .products.grid .simple-prod .extra > span:after,
  #recent-ads .simple-prod .extra > span:after {
    margin: 0 5px;
  }
  
  /* Premium badge on the photo when applicable. */
  .products.grid .simple-prod .premium-mark.isGrid,
  body#home #premium-items .simple-prod .premium-mark.isGrid {
    display: inline-block;
    top: 8px;
    left: 8px;
    bottom: auto;
    z-index: 3;
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 32, 42, .06);
    font-size: 11px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  
  .products.grid .simple-prod .day-offer-mark {
    top: 8px;
    bottom: auto;
    left: 8px;
  }
  
  body#home #premium-items .simple-prod .labels {
    display: block;
  }
  
  /* Grid-only fields; list and detail keep Epsilon's layout. */
  .products.list .pngm-teaser,
  .products.list .pngm-date,
  .products.detail .pngm-teaser,
  .products.detail .pngm-date {
    display: none;
  }
  
  
  /* ==========================================================================
     Tablet
     ========================================================================== */
  
  @media screen and (max-width: 1080px) {
    .home-search > .container.pngm-home-banner {
      gap: 6px;
    }
  
    .home-search .box {
      max-width: calc(100% - 320px);
    }
  
    .pngm-hero-art {
      width: 300px;
      height: 273px; /* keep 425:387 ratio */
      max-width: 42%;
    }
  
    .pngm-hero-art img {
      width: 100%;
      height: 100%;
      min-height: 0;
    }
  
    .home-search > .container.pngm-home-banner {
      min-height: 273px;
    }
  
    .home-search h1.pngm-title {
      font-size: 24px;
    }
  }
  
  
  /* ==========================================================================
     Mobile
     ========================================================================== */
  
  @media screen and (max-width: 767px) {
    /* Marked on review screenshot: header Place an ad (bottom + already posts). */
    header .links .publish,
    header .links .publish:not(.mini),
    header .links .publish.mini {
      display: none !important;
    }
  
    header .logo,
    header .cmain > .logo {
      flex: 1 1 auto;
      min-width: 0;
      max-width: none !important;
      height: auto;
      overflow: visible;
      display: flex;
      align-items: center;
    }
  
    header .cmain > .logo img,
    header .logo img {
      height: 40px;
      max-height: 40px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: left center;
      clip-path: none;
      transform: none;
    }
  
    .home-search > .container.pngm-home-banner {
      flex-direction: column;
      gap: 0;
    }
  
    .pngm-hero-art {
      display: none;
    }
  
    .home-search .box {
      max-width: 100%;
      width: 100%;
    }
  
    .home-search h1.pngm-title {
      display: none !important;
    }
  
    body#home .home-search h2.pngm-cats-heading {
      display: block;
      margin: 8px 0 4px 0;
      font-size: 16px;
      font-weight: 600;
    }
  
    .home-search .latest-search {
      display: none;
    }
  
    .home-search form {
      margin: 0 0 8px 0;
    }
  
    .home-search .input-box {
      width: auto;
      flex: 1 1 auto;
    }
  
    .home-search input[name="sPattern"] {
      height: 42px;
      font-size: 14px;
      border-radius: 8px 0 0 8px;
    }
  
    .home-search .btn {
      flex: 0 0 46px;
      width: 46px;
      height: 42px;
      padding: 0;
      border-radius: 0 8px 8px 0;
    }
  
    .home-search .btn span {
      display: none;
    }
  
    body#home > .content > section.home-search {
      padding: 8px 0 6px 0;
    }
  
    body#home > .content > section {
      padding: 10px 0;
    }
  
    body#home > .content > section.home-latest {
      padding-top: 8px;
    }
  
    body#home h2,
    body#home > .content > section > .container > .block > h2 {
      margin: 0 0 8px 0;
      padding-bottom: 0;
      border-bottom: 0;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.25;
    }
  
    body#home h2 .btn,
    body#home h2 .btn.mini {
      height: 26px;
      padding: 0 8px;
      font-size: 11px;
      font-weight: 500;
    }
  
    /* Same category icons as desktop: colored circles, not compact grey tiles. */
    #home-cat {
      display: grid;
      grid-auto-flow: column;
      grid-template-rows: auto auto;
      grid-auto-columns: 78px;
      align-items: start;
      justify-items: center;
      gap: 8px 6px;
      margin: 0;
      padding: 0 2px 8px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
  
    #home-cat::-webkit-scrollbar {
      display: none;
    }
  
    #home-cat .pngm-cat-item {
      width: 78px;
      max-width: 78px;
      min-width: 78px;
      overflow: hidden;
    }
  
    #home-cat > .pngm-cat-item > a {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 78px;
      padding: 4px 2px 2px;
      box-sizing: border-box;
      overflow: hidden;
    }
  
    #home-cat a > div {
      width: 56px;
      height: 56px;
      margin: 0 auto 6px;
      padding: 8px;
      border: 1px solid #e3e8ed;
      box-shadow: 0 1px 2px rgba(16, 32, 42, .06);
      flex: 0 0 auto;
    }
  
    #home-cat a > div img,
    #home-cat a > div svg,
    #home-cat a > div img.pngm-cat-svg {
      width: 36px;
      height: 36px;
      max-width: 36px;
      max-height: 36px;
    }
  
    #home-cat a > div i.fas {
      font-size: 22px;
    }
  
    #home-cat a > h3 {
      display: block;
      width: 100%;
      max-width: 74px;
      height: auto;
      min-height: 28px;
      max-height: 28px;
      margin: 0;
      padding: 0 1px;
      overflow: hidden;
      box-sizing: border-box;
    }
  
    #home-cat a > h3 span {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      color: #16202a;
      font-size: 10.5px;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.01em;
      text-align: center;
      word-break: break-word;
      overflow-wrap: anywhere;
      hyphens: auto;
    }
  
    #home-cat a > div > span.lab {
      display: none;
    }
  
    #home-cat .pngm-cat-item.has-sub .pngm-sub-toggle {
      display: none !important;
    }
  
    #home-cat .pngm-subcat {
      display: none;
    }
  
    body#home .products.grid .simple-prod,
    body#home #latest-items .simple-prod {
      width: calc(50% - 8px);
      margin: 0 4px 8px 4px;
    }
  
    body#home .products.grid.nice-scroll .simple-prod,
    body#home #location-items .simple-prod,
    body#home #premium-items .simple-prod,
    body#home #premium-items .simple-prod.o1,
    body#home #premium-items .simple-prod:not(.o1),
    body#home #favorite-items .simple-prod,
    body#home #recent-items .simple-prod {
      flex: 0 0 148px;
      width: 148px;
      max-width: 148px;
    }
  
    .products.grid .simple-prod .simple-wrap,
    body#home #premium-items .simple-prod .simple-wrap {
      padding: 0 0 6px 0;
    }
  
    .products.grid .simple-prod .img-wrap,
    .products.grid .simple-prod.tall .img-wrap,
    .products.grid .simple-prod.verytall .img-wrap,
    .products.grid .simple-prod.wide .img-wrap,
    .products.grid .simple-prod.normal .img-wrap,
    .products.grid .simple-prod.square .img-wrap,
    body#home #premium-items .simple-prod .img-wrap {
      padding-top: 100% !important;
    }
  
    .products.grid .simple-prod .data,
    #recent-ads .simple-prod .data,
    body#home #recent-items .simple-prod .data,
    body#home #recent-ads .simple-prod .data {
      min-height: 0;
      padding: 6px 8px 4px 8px;
    }
  
    .products.grid .simple-prod .info {
      order: 3;
      margin: 0 0 2px 0;
      min-height: 0;
      max-height: 14px;
      font-size: 11px;
      line-height: 14px;
    }
  
    .products.grid .simple-prod .pngm-card-title-row {
      order: 2;
    }
  
    .products.grid .simple-prod .title,
    #search-items .products.grid .simple-prod .title {
      order: unset;
      min-height: 0;
      max-height: 32px;
      margin: 0 0 2px 0;
      font-size: 13px;
      font-weight: 600;
      line-height: 16px;
    }
  
    .products.grid .simple-prod .img-wrap .bar {
      padding: 28px 28px 6px 8px;
    }
  
    .products.grid .simple-prod .img-wrap .bar .price {
      font-size: 14px;
      font-weight: 700;
      line-height: 16px;
    }
  
    .products.grid .simple-prod .pngm-teaser,
    body#home .products.grid .simple-prod .pngm-teaser {
      display: none !important;
    }
  }
  
  
  /* ==========================================================================
     SEARCH-02 / SEARCH-03  Global search OUTSIDE <header>
     ========================================================================== */
  
  header .links a.account .pngm-account-label {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .pngm-global-search {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 7;
    display: block;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #e3e8ed;
    box-shadow: 0 1px 4px rgba(16, 32, 42, .05);
    box-sizing: border-box;
    text-align: center; /* centers the inline-block slot below */
  }
  
  /*
    Parent .container is display:flex; max-width:1080px; flex-direction:inherit
    which left-aligns a shorter form. Override completely: inline-block +
    text-align:center on the bar (classic centering that flex cannot break).
  */
  .pngm-global-search > .container {
    display: inline-block !important;
    float: none !important;
    flex: none !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 720px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left;
    box-sizing: border-box;
    vertical-align: top;
  }
  
  .pngm-global-search .global-search-form {
    position: relative;
    display: flex !important;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 9px;
    transition: box-shadow .18s ease;
  }
  
  .pngm-global-search .picker.pattern.global {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
  }
  
  .pngm-global-search .input-box {
    position: relative !important;
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 46px;
    margin: 0 !important; /* kill parent .input-box { margin: 0 0 20px 0 } */
    background: #fff;
    border: 1px solid #c9d0d8;
    border-right: 0;
    border-radius: 9px 0 0 9px;
    transition: border-color .18s ease;
  }
  
  .pngm-global-search .global-search-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: 12px;
    fill: #69727d;
    pointer-events: none;
  }
  
  .pngm-global-search input.pattern {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 44px;
    padding: 0 36px 0 10px;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    color: #20242a;
    font-size: 15px;
    line-height: 44px;
    text-decoration: none !important;
  }
  
  .pngm-global-search input.pattern:focus,
  .pngm-global-search input.pattern:focus-visible,
  .pngm-global-search input.pattern:active {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    text-decoration: none !important;
  }
  
  /* One shared focus ring around icon + field + button (no broken inner box). */
  .pngm-global-search .global-search-form:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 107, 36, .13);
  }
  
  .pngm-global-search .global-search-form:focus-within .input-box {
    border-color: #006b24;
  }
  
  .pngm-global-search .global-search-form:focus-within .global-search-submit {
    border-color: #006b24;
  }
  
  .pngm-global-search .clean {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3ad;
    cursor: pointer;
    z-index: 2;
  }
  
  .global-search-submit {
    flex: 0 0 auto;
    min-width: 110px;
    height: 46px;
    padding: 0 18px;
    border: 1px solid #006b24;
    border-radius: 0 9px 9px 0;
    background: #006b24;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .global-search-submit i {
    margin-right: 7px;
  }
  
  .global-search-submit span {
    display: inline;
  }
  
  /* Dropdown width = input + Search button, aligned to the centered form. */
  .pngm-global-search .picker.pattern.global .results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: calc(100% + 110px);
    max-width: none;
    display: none;
    max-height: 420px;
    overflow-y: auto;
    margin: 0;
    padding: 5px 0;
    background: #fff;
    border: 1px solid #d8dee5;
    border-radius: 11px;
    box-shadow: 0 14px 40px rgba(16, 24, 40, .16);
    z-index: 200;
    box-sizing: border-box;
  }
  
  .pngm-global-search .picker.pattern.open .results,
  .pngm-global-search .picker.pattern.active .results,
  .pngm-global-search .picker.pattern.global .results:has(.loaded:not(:empty)) {
    display: block;
  }
  
  /* Non-home pages: header (72) + taller search (~66). */
  body:not(#home) {
    padding-top: 138px;
  }
  
  /* Post/edit listing hides the search strip — header clearance only. */
  body#body-item-post.pngm-post-wizard,
  body.pngm-post-wizard.item-publish,
  body.pngm-post-wizard {
    padding-top: 72px !important;
  }
  
  /* Homepage: hero already has search ? hide the bar until scroll. */
  body#home .pngm-global-search.is-home {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  
  body#home.pngm-sticky-search .pngm-global-search.is-home {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #e3e8ed !important;
    box-shadow: 0 1px 4px rgba(16, 32, 42, .05) !important;
    overflow: visible !important;
    pointer-events: auto !important;
    text-align: center !important;
  }
  
  /* Empty ad slots must not leave blank strips on the page. */
  .container.banner-box > .inside:empty {
    display: none;
  }
  
  .container.banner-box:not(:has(.banner-theme)):not(:has(img)):not(:has(iframe)):not(:has(ins)) {
    display: none !important;
  }
  
  /* Flash notices: compact toast in the top-right (not a full-width bar). */
  #flashbox {
    position: fixed !important;
    top: 72px;
    right: 18px;
    left: auto !important;
    width: min(380px, calc(100vw - 24px)) !important;
    max-width: min(380px, calc(100vw - 24px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
    z-index: 11050 !important;
    pointer-events: none;
  }
  
  #flashbox .wrap,
  #flashbox .wrap2 {
    margin: 0;
    padding: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }
  
  #flashbox .wrap2 {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  
  #flashbox .wrap2:empty {
    display: none !important;
  }
  
  #flashbox:not(:has(.flashmessage)) {
    display: none !important;
  }
  
  #flashbox .flashmessage {
    pointer-events: auto;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px 44px 14px 16px !important;
    border-radius: 12px !important;
    border: 1px solid #c8e6ce !important;
    border-left: 4px solid #15803d !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.16) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left;
    animation: pngmLocToastIn 0.22s ease;
  }
  
  #flashbox .flashmessage.flashmessage-ok {
    background: #eef8f0 !important;
    border-color: #c8e6ce !important;
    border-left-color: #1f6313 !important;
    color: #1b3d18 !important;
  }
  
  #flashbox .flashmessage.flashmessage-error {
    background: #fff1f1 !important;
    border-color: #f0c7c7 !important;
    border-left-color: #e72b2b !important;
  }
  
  #flashbox .flashmessage.flashmessage-warning {
    background: #fff8e6 !important;
    border-color: #f0e0a8 !important;
    border-left-color: #d4a017 !important;
  }
  
  #flashbox .flashmessage.flashmessage-info {
    background: #edf5ff !important;
    border-color: #c5d8f0 !important;
    border-left-color: #2f6fed !important;
  }
  
  #flashbox .flashmessage:last-child {
    margin-bottom: 0 !important;
  }
  
  body#home #flashbox {
    margin-top: 10px;
    margin-bottom: 4px;
  }
  
  body#home #flashbox .flashmessage:last-child {
    margin-bottom: 0 !important;
  }
  
  @media screen and (max-width: 767px) {
    #flashbox {
      top: 60px;
      right: 12px;
    }
  
    #flashbox .flashmessage {
      padding: 12px 40px 12px 14px !important;
      font-size: 13px !important;
    }
  }
  
  body#home.pngm-sticky-search {
    padding-top: 138px;
  }
  
  /* Mid widths: header is shorter than desktop. */
  @media screen and (min-width: 768px) and (max-width: 1080px) {
    .pngm-global-search {
      top: 60px;
    }
  
    body:not(#home),
    body#home.pngm-sticky-search {
      padding-top: 126px;
    }
  }
  
  /* Mobile header: hamburger + logo + account + "Place an ad" on ONE taller row. */
  @media screen and (max-width: 767px) {
    body {
      padding-top: 64px;
    }
  
    header {
      height: 64px;
    }
  
    header .cmain {
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      height: 100%;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  
    header .menu.btn,
    header .cmain > .logo,
    header .cmain > .links {
      order: 1;
    }
  
    header .menu.btn {
      width: 32px;
      height: 32px;
      margin-right: 4px;
      padding: 6px;
    }
  
    header .menu.btn svg {
      width: 16px;
      height: 16px;
    }
  
    header .logo,
    header .cmain > .logo {
      flex: 1 1 auto;
      min-width: 0;
      max-width: none !important;
      padding: 2px 0;
      overflow: visible;
    }
  
    header .cmain > .logo img,
    header .cmain > .logo svg,
    header .logo img {
      max-width: 100%;
      max-height: 40px;
      height: 40px;
      width: auto;
      margin: 0;
      object-fit: contain;
      object-position: left center;
      clip-path: none;
      transform: none;
    }
  
    header .cmain > .links {
      margin-left: auto;
      max-width: none;
      height: 40px;
      flex-wrap: nowrap;
      overflow: visible;
      align-items: center;
    }
  
    /* Posting lives in the bottom + button ? keep the header row clean. */
    header .links .publish,
    header .links .publish:not(.mini),
    header .links .publish.mini {
      display: none !important;
    }
  
    header .links .maccount {
      margin-left: 2px;
      height: 34px;
    }
  
    header .links .maccount img {
      width: 34px;
      height: 34px;
    }
  
    .pngm-global-search {
      top: 64px;
      padding: 8px 12px;
      text-align: center;
    }
  
    .pngm-global-search .global-search-form {
      max-width: none;
      width: 100%;
    }
  
    .pngm-global-search .input-box {
      height: 44px;
    }
  
    .pngm-global-search input.pattern {
      height: 42px;
      font-size: 16px;
      line-height: 42px;
    }
  
    .pngm-global-search .picker.pattern.global .results {
      width: calc(100% + 48px);
    }
  
    .global-search-submit {
      min-width: 48px;
      width: 48px;
      height: 44px;
      padding: 0;
    }
  
    .global-search-submit span {
      display: none;
    }
  
    .global-search-submit i {
      margin: 0;
    }
  
    body:not(#home) {
      padding-top: 124px;
    }
  
    body#home:not(.pngm-sticky-search) {
      padding-top: 64px;
    }
  
    body#home.pngm-sticky-search {
      padding-top: 124px;
    }
  }
  
  
  /* ==========================================================================
     SEARCH-04  Empty search results
     ========================================================================== */
  
  /* ==========================================================================
     Search empty state — No listings found
     ========================================================================== */
  
  body#search .pngm-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 360px;
    margin: 24px 0 28px;
    padding: 32px 20px 40px;
  }
  
  body#search .pngm-no-results-illu {
    margin: 0 0 22px;
    line-height: 0;
  }
  
  body#search .pngm-no-results-illu svg {
    width: 160px;
    height: auto;
    max-width: 100%;
  }
  
  body#search .pngm-no-results-title {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    color: #16202a;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
  }
  
  body#search .pngm-no-results-text {
    margin: 0 0 22px;
    color: #6b7785;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
  }
  
  body#search .pngm-no-results-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  
  body#search .pngm-no-results-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  
  body#search .pngm-no-results-btn-outline {
    border: 1.5px solid #006b24;
    background: #fff;
    color: #006b24;
  }
  
  body#search .pngm-no-results-btn-outline:hover {
    background: #f3faf5;
    color: #006b24;
    text-decoration: none;
  }
  
  body#search .pngm-no-results-btn-solid {
    border: 1.5px solid #006b24;
    background: #006b24;
    color: #fff;
  }
  
  body#search .pngm-no-results-btn-solid:hover {
    background: #00591e;
    border-color: #00591e;
    color: #fff;
    text-decoration: none;
  }
  
  /* Hide legacy empty-state pieces if AJAX/old markup appears */
  body#search .pngm-empty-search,
  body#search .pngm-empty-location,
  body#search .pngm-empty-suggestions,
  body#search #search-items > .list-empty {
    display: none !important;
  }
  
  body#search #search-main:has(.pngm-no-results) #recent-ads.onsearch {
    margin-top: 8px !important;
    padding-top: 18px !important;
  }
  
  @media screen and (max-width: 767px) {
    body#search .pngm-no-results {
      min-height: 280px;
      margin: 16px 0 28px;
      padding: 20px 12px 28px;
    }
  
    body#search .pngm-no-results-illu svg {
      width: 132px;
    }
  
    body#search .pngm-no-results-title {
      font-size: 22px;
    }
  
    body#search .pngm-no-results-text {
      font-size: 14px;
      margin-bottom: 18px;
    }
  
    body#search .pngm-no-results-actions {
      width: 100%;
      gap: 10px;
    }
  
    body#search .pngm-no-results-btn {
      flex: 1 1 calc(50% - 5px);
      min-width: 0;
      padding: 0 12px;
      font-size: 13px;
    }
  }
  
  .pngm-empty-search .pngm-empty-lead {
    display: block;
    margin: 8px 0 16px 0;
    color: #4a5561;
    font-size: 14px;
    line-height: 1.45;
  }
  
  .pngmarket-no-exact-msg {
    padding: 10px 16px 8px;
    color: #4a5561;
    font-size: 14px;
    font-weight: 600;
  }
  
  .pngm-empty-near {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 4px 0 8px 0;
    padding: 14px 16px;
    border: 1px solid #e3e8ed;
    border-radius: 10px;
    background: #fff;
    color: #4a5561;
    font-size: 14px;
    line-height: 1.4;
  }
  
  .pngm-empty-near strong {
    display: block;
    width: 100%;
    color: #16202a;
    font-size: 16px;
    font-weight: 700;
  }
  
  .pngm-empty-near span {
    flex: 1 1 auto;
    min-width: 180px;
  }
  
  .pngm-empty-near .change-location {
    flex: 0 0 auto;
    margin-left: auto;
  }
  
  .pngm-empty-location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 16px 0;
    padding: 12px 14px;
    border: 1px solid #e3e8ed;
    border-radius: 10px;
    background: #f7faf8;
  }
  
  .pngm-empty-loc-label {
    color: #16202a;
    font-size: 14px;
    font-weight: 600;
  }
  
  .pngm-empty-loc-label i {
    margin-right: 6px;
    color: #006b24;
  }
  
  .pngm-empty-loc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .pngm-empty-suggestions {
    margin: 28px 0 8px 0;
  }
  
  .pngm-empty-suggestions h2 {
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e8ed;
    color: #16202a;
    font-size: 18px;
    font-weight: 700;
  }
  
  
  /* ==========================================================================
     CATEGORY-01  Subcategories before search listings
     ========================================================================== */
  
  .pngm-search-subcats {
    margin: 0 0 18px 0;
    overflow: hidden;
    border: 1px solid #d7e6db;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 34, 42, .04), 0 10px 28px rgba(0, 107, 36, .07);
  }
  
  .pngm-search-subcats-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px 10px;
    background: linear-gradient(180deg, #f3faf5 0%, #fff 100%);
    border-bottom: 1px solid #e6f0e9;
  }
  
  .pngm-search-subcats-head .pngm-search-subcats-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    flex-shrink: 0;
    align-self: center;
    border-radius: 11px;
    background: #e7f6ec;
    color: #006b24;
    box-shadow: inset 0 0 0 1px rgba(0, 107, 36, .12);
  }
  
  .pngm-search-subcats-head .pngm-search-subcats-badge i {
    display: block;
    width: 1em;
    margin: 0;
    color: #006b24;
    font-size: 16px;
    font-style: normal;
    line-height: 1;
    text-align: center;
  }
  
  .pngm-search-subcats-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  
  .pngm-search-subcats-copy strong {
    display: block;
    margin: 0;
    color: #16202a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
  }
  
  .pngm-search-subcats-copy span {
    display: block;
    margin: 2px 0 0 0;
    color: #6b7785;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
  }
  
  .pngm-search-subcats-scroll {
    position: relative;
    padding: 12px 0 14px;
  }
  
  .pngm-search-subcats-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px;
  }
  
  a.pngm-search-subcat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 14px 6px 6px;
    border: 1px solid #e3e8ed;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 34, 42, .05);
    color: #16202a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  
  .pngm-search-subcat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #fff;
    color: #006b24;
    font-size: 12px;
    overflow: hidden;
  }
  
  .pngm-search-subcat-ico img,
  .pngm-search-subcat-ico img.pngm-cat-cover,
  .pngm-search-subcat-ico img.pngm-cat-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
  }
  
  .pngm-search-subcat-ico i {
    line-height: 1;
  }
  
  a.pngm-search-subcat:hover {
    border-color: #006b24;
    background: #f4fbf6;
    color: #145c2c;
    box-shadow: 0 2px 8px rgba(0, 107, 36, .12);
    text-decoration: none;
  }
  
  a.pngm-search-subcat.is-active,
  a.pngm-search-subcat.pngm-search-subcat-all.is-active {
    border-color: #00551c;
    background: linear-gradient(180deg, #1a9a48 0%, #006b24 100%);
    box-shadow: 0 4px 12px rgba(0, 107, 36, .28);
    color: #fff;
  }
  
  a.pngm-search-subcat.is-active .pngm-search-subcat-ico,
  a.pngm-search-subcat.pngm-search-subcat-all.is-active .pngm-search-subcat-ico {
    background: rgba(255, 255, 255, .2);
    color: #fff;
  }
  
  a.pngm-search-subcat em {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 107, 36, .12);
    color: #006b24;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
  }
  
  a.pngm-search-subcat.is-active em {
    background: rgba(255, 255, 255, .22);
    color: #fff;
  }
  
  a.pngm-search-subcat-all {
    border-color: #c8e0d0;
    background: #f3faf5;
    color: #145c2c;
  }
  
  @media screen and (max-width: 767px) {
    .pngm-search-subcats {
      margin: 0 0 12px 0;
      border-radius: 14px;
    }
  
    .pngm-search-subcats-head {
      padding: 10px 12px 8px;
    }
  
    .pngm-search-subcats-head .pngm-search-subcats-badge {
      width: 32px;
      height: 32px;
      border-radius: 9px;
    }
  
    .pngm-search-subcats-copy strong {
      font-size: 14px;
    }
  
    .pngm-search-subcats-scroll {
      padding: 8px 0 12px;
    }
  
    .pngm-search-subcats-scroll:after {
      content: "";
      position: absolute;
      top: 8px;
      right: 0;
      bottom: 12px;
      width: 36px;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 88%);
      pointer-events: none;
    }
  
    .pngm-search-subcats-list {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 2px 14px 4px 12px;
      scroll-snap-type: x proximity;
    }
  
    .pngm-search-subcats-list::-webkit-scrollbar {
      display: none;
    }
  
    a.pngm-search-subcat {
      flex: 0 0 auto;
      white-space: nowrap;
      scroll-snap-align: start;
      padding: 5px 12px 5px 5px;
      font-size: 12px;
    }
  
    .pngm-search-subcat-ico {
      width: 24px;
      height: 24px;
      font-size: 11px;
    }
  }
  
  
  /* ==========================================================================
     VEHICLE-01 / VEHICLE-02 ? Other make/model free text
     Hidden until the seller picks "Other" in Make / Brand (or model).
     ========================================================================== */
  
  #atr-make_other {
    display: none;
  }
  
  #atr-make_other.pngm-other-visible {
    display: block;
  }
  
  #atr-make_other input[type="text"] {
    width: 100%;
    max-width: 420px;
  }
  
  #atr-make .controls select {
    margin-bottom: 6px;
  }
  
  /* P2-006 — Model label under Make / Brand on search filters */
  #atr-search #atr-make .pngm-atr-model-label,
  #side-menu #atr-make .pngm-atr-model-label {
    display: block;
    margin: 8px 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7785;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  
  
  /* ==========================================================================
     LOCATION-01 / LOCATION-02 ? City select grouping
     ========================================================================== */
  
  #cityId optgroup {
    font-weight: 700;
    font-style: normal;
    color: #1a1a1a;
  }
  
  #cityId optgroup option {
    font-weight: 400;
    padding-left: 4px;
  }
  
  #def-location .row.popular .lead {
    font-weight: 700;
  }
  
  
  /* ==========================================================================
     Searchable Province / City selects (publish form)
     ========================================================================== */
  
  .pngm-search-select {
    position: relative;
    width: 100%;
  }
  
  .pngm-search-select-native {
    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;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  .pngm-search-select-input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 36px !important;
    background-image: none !important;
    cursor: text;
  }
  
  .pngm-search-select.is-disabled .pngm-search-select-input {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f3f3f3;
  }
  
  .pngm-search-select-clear {
    display: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #888;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  
  .pngm-search-select-clear:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.06);
  }
  
  .pngm-search-select-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    max-height: 260px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  
  .pngm-search-select.is-open .pngm-search-select-list {
    display: block;
  }
  
  .pngm-search-select-group-label {
    padding: 6px 12px 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #666;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  .pngm-search-select-option {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: #fff;
    padding: 5px 12px;
    font-size: 14px;
    line-height: 1.25;
    color: #222;
    cursor: pointer;
  }
  
  .pngm-search-select-option:hover,
  .pngm-search-select-option.is-active {
    background: rgba(46, 125, 50, 0.1);
    color: #1b5e20;
  }
  
  .pngm-search-select-option.is-selected {
    font-weight: 600;
  }
  
  .pngm-search-select-empty {
    padding: 12px;
    font-size: 13px;
    color: #777;
  }
  
  .pngm-search-select.is-loading .pngm-search-select-input {
    color: #666;
    font-style: italic;
  }
  
  .pngm-search-select.is-loading .pngm-search-select-list {
    min-height: 44px;
  }
  
  .item-publish .row.region .pngm-search-select,
  .item-publish .row.city .pngm-search-select,
  .profile-box .pngm-search-select {
    max-width: 100%;
  }
  
  
  /* ==========================================================================
     ITEM-01 / ITEM-02 ? Listing photo gallery (OLX-style frame)
     Landscape frame + black letterbox + border so photo edges are clear.
     ========================================================================== */
  
  body#item #item-image {
    margin: 0 0 12px;
    padding: 0;
    background: #000;
    border: 1px solid #c5ccd3;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  body#item #item-image .swiper-container.pngm-item-gallery {
    background: #000;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    touch-action: none;
    -webkit-touch-callout: none;
    box-sizing: border-box;
  }
  
  #item-image .swiper-container.pngm-item-gallery * {
    -webkit-touch-callout: none;
  }
  
  /* Force OLX-like landscape frame (overrides dimNormal / inline padding-top) */
  body#item #item-image .swiper-wrapper > .swiper-slide,
  body#item #item-image .swiper-wrapper > li.swiper-slide,
  body#item #item-image .swiper-wrapper li.ratio1to1,
  body#item #item-image .swiper-wrapper li.ratio4to3,
  body#item #item-image .swiper-wrapper li.ratio16to9,
  body#item #item-image .swiper-wrapper li.ratio2to1 {
    position: relative;
    width: 100%;
    height: 0 !important;
    /* ~4:3 tall frame on mobile (matches original dimNormal feel) */
    padding-top: 75% !important;
    background: #000;
    box-sizing: border-box;
    overflow: hidden;
    touch-action: none;
  }
  
  @media screen and (min-width: 768px) {
    body#item #item-image .swiper-wrapper > .swiper-slide,
    body#item #item-image .swiper-wrapper > li.swiper-slide,
    body#item #item-image .swiper-wrapper li.ratio1to1,
    body#item #item-image .swiper-wrapper li.ratio4to3,
    body#item #item-image .swiper-wrapper li.ratio16to9,
    body#item #item-image .swiper-wrapper li.ratio2to1 {
      padding-top: 0 !important;
      height: 480px !important;
      max-height: 480px;
    }
  }
  
  @media screen and (min-width: 1081px) {
    body#item #item-image .swiper-wrapper > .swiper-slide,
    body#item #item-image .swiper-wrapper > li.swiper-slide,
    body#item #item-image .swiper-wrapper li.ratio1to1,
    body#item #item-image .swiper-wrapper li.ratio4to3,
    body#item #item-image .swiper-wrapper li.ratio16to9,
    body#item #item-image .swiper-wrapper li.ratio2to1 {
      height: 520px !important;
      max-height: 520px;
    }
  }
  
  @media screen and (min-width: 1400px) {
    body#item #item-image .swiper-wrapper > .swiper-slide,
    body#item #item-image .swiper-wrapper > li.swiper-slide,
    body#item #item-image .swiper-wrapper li.ratio1to1,
    body#item #item-image .swiper-wrapper li.ratio4to3,
    body#item #item-image .swiper-wrapper li.ratio16to9,
    body#item #item-image .swiper-wrapper li.ratio2to1 {
      height: 560px !important;
      max-height: 560px;
    }
  }
  
  #item-image .swiper-wrapper li a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    touch-action: none;
    background: #000;
  }
  
  #item-image .swiper-wrapper li a img,
  #item-image .swiper-zoom-container img {
    object-fit: contain !important;
    object-position: center center;
    image-orientation: from-image;
    background: #000 !important;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    float: none !important;
    pointer-events: auto;
    -webkit-user-drag: none;
    transform-origin: center center;
    will-change: transform;
    border-radius: 0 !important;
  }
  
  #item-image .swiper-zoom-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    background: #000;
  }
  
  #item-image .swiper-slide {
    touch-action: none;
    overflow: hidden;
  }
  
  #item-image .swiper-slide-zoomed {
    overflow: hidden;
  }
  
  #item-image .pngm-gallery-fullscreen {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }
  
  #item-image .pngm-gallery-fullscreen:hover {
    background: #2e7d32;
  }
  
  body#item #item-image .swiper-thumbs {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 10px;
    margin: 0;
  }
  
  body#item #item-image .swiper-thumbs ul {
    margin: 0 !important;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
  }
  
  body#item #item-image .swiper-thumbs li {
    margin: 0 !important;
    flex: 0 0 auto;
    width: 128px !important;
    min-width: 128px !important;
    height: 96px !important;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 6px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
  }
  
  body#item #item-image .swiper-thumbs li img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    background: #fff;
    border-radius: 5px;
    border: 0 !important;
  }
  
  body#item #item-image .swiper-thumbs li.active,
  body#item #item-image .swiper-thumbs li:hover {
    border-color: #2e7d32;
    box-shadow: 0 0 0 2px #2e7d32;
  }
  
  body#item #item-image .swiper-thumbs li.active img,
  body#item #item-image .swiper-thumbs li:hover img {
    box-shadow: none;
    border-color: transparent;
  }
  
  @media screen and (min-width: 1081px) {
    body#item #item-image .swiper-thumbs li {
      width: 140px !important;
      min-width: 140px !important;
      height: 105px !important;
    }
  }
  
  /* Desktop sticky seller sidebar — stay visible while scrolling the listing.
     Offset below the fixed header and search bar. */
  @media screen and (min-width: 768px) {
    body#item .data-box {
      align-items: flex-start;
    }
  
    body#item #item-main,
    body#item #item-side {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
  
    body#item #item-side {
      position: sticky !important;
      top: 148px !important;
      align-self: flex-start;
      width: 300px;
      max-height: calc(100vh - 160px);
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      z-index: 4;
      padding-bottom: 8px;
      scrollbar-width: thin;
      flex-wrap: nowrap;
      display: flex;
      flex-direction: column;
    }
  
    body.pngm-report-modal-open #item-side {
      position: relative !important;
      top: auto !important;
      z-index: 1 !important;
      max-height: none !important;
      overflow: visible !important;
    }
  
    body#item #item-side #seller {
      margin-top: 0 !important;
    }
  }
  
  /* P1-006 — listing attributes (visual: icon | label | value, row lines) */
  body#item .props.pngm-item-compact {
    margin: 0 0 10px;
    padding: 10px 0 4px;
    border-top: 1px solid #e5e7eb;
  }
  
  body#item #item-hook {
    display: block;
  }
  
  body#item .props.pngm-item-details:empty,
  body#item .props.pngm-item-details:not(:has(#atr-item)) {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body#item #atr-item.pngm-atr-visual,
  body#item #atr-item {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  
  body#item #atr-item #atr-title {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    padding: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    background: transparent;
    border: 0;
  }
  
  body#item #atr-item.pngm-atr-visual > li,
  body#item #atr-item > li.atr-line {
    position: relative;
    display: grid !important;
    grid-template-columns: 28px minmax(118px, 38%) minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    margin: 0 !important;
    padding: 13px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #e8ebef !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 14px;
    line-height: 1.35;
    min-width: 0;
    box-sizing: border-box;
  }
  
  body#item #atr-item li.atr-line > .pngm-atr-ico {
    grid-column: 1;
    grid-row: 1;
    position: static !important;
    left: auto;
    top: auto;
    width: 28px;
    height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  body#item #atr-item li.atr-line > .pngm-atr-ico svg {
    display: block;
    width: 20px;
    height: 20px;
    overflow: visible;
  }
  
  body#item #atr-item .atr-name {
    grid-column: 2;
    grid-row: 1;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  
  body#item #atr-item .atr-name > span {
    font-weight: 600;
    color: #111827;
  }
  
  body#item #atr-item .atr-name .atr-icon {
    display: none !important;
  }
  
  body#item #atr-item .atr-value {
    grid-column: 3;
    grid-row: 1;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    min-width: 0;
    text-align: left;
    vertical-align: middle;
  }
  
  body#item #atr-item .atr-value-single,
  body#item #atr-item .atr-value-check,
  body#item #atr-item .atr-value-select {
    display: inline;
    width: auto !important;
    margin: 0 !important;
    color: inherit;
    font-weight: inherit;
  }
  
  body#item #atr-item .atr-value-select .atr-value-single:after {
    display: none !important;
    content: none !important;
  }
  
  body#item #atr-item .atr-value-check .atr-value-single:empty,
  body#item #atr-item .atr-value-select .atr-value-single:empty {
    display: none !important;
  }
  
  /* Separator only between values that are actually rendered — unselected chips
     are display:none but still match sibling combinators, which used to leave a
     stray leading comma before the first visible value. */
  body#item #atr-item .atr-value-check .atr-value-single + .atr-value-single::before,
  body#item #atr-item .atr-value-select .atr-value-single + .atr-value-single::before {
    content: none;
  }
  
  body#item #atr-item .atr-value-check .atr-value-single:not(.atr-disabled):not(:empty) ~ .atr-value-single:not(.atr-disabled):not(:empty)::before {
    content: ", ";
  }
  
  body#item #atr-item .atr-value-select .atr-value-single:not(.atr-disabled):not(:empty) ~ .atr-value-single:not(.atr-disabled):not(:empty)::before {
    content: " / ";
  }
  
  body#item #atr-item .atr-img,
  body#item #atr-item .atr-disabled,
  body#item #atr-item .atr-empty {
    display: none !important;
  }
  
  body#item #atr-item .atr-linked-value {
    display: inline;
    margin: 0;
    padding: 0;
    color: inherit;
  }
  
  @media (max-width: 700px) {
    body#item #atr-item.pngm-atr-visual,
    body#item #atr-item {
      grid-template-columns: 1fr;
    }
  
    body#item #atr-item.pngm-atr-visual > li,
    body#item #atr-item > li.atr-line {
      grid-template-columns: 28px minmax(110px, 42%) minmax(0, 1fr);
    }
  }
  
  body#item .basic .pngm-item-date,
  body#item .basic .row.date.pngm-item-date {
    text-align: right;
    margin: 4px 0 0;
  }
  
  body#item .basic .pngm-item-date p {
    margin: 0;
  }
  
  body#item .pngm-item-renew-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 10px 0 4px;
    padding: 12px 14px;
    border: 1px solid #f5c2c7;
    border-radius: 10px;
    background: #fff5f5;
    box-sizing: border-box;
  }
  
  body#item .pngm-item-renew-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #006b24;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
  }
  
  body#item .pngm-item-renew-cta a:hover {
    background: #00551c;
  }
  
  body#item .pngm-item-renew-cta span {
    font-size: 13px;
    color: #6b7280;
  }
  
  body#item .pngm-item-meta-bar {
    display: block;
    float: none !important;
    clear: both;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    margin: 4px 0 8px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    cursor: default;
    -webkit-user-select: text;
    user-select: text;
  }
  
  body#item .pngm-item-meta-bar > span {
    color: #6b7280;
  }
  
  body#item .pngm-item-meta-bar .pngm-item-meta-sep {
    color: #9ca3af;
    font-weight: 400;
    padding: 0 4px;
  }
  
  body#item .pngm-item-meta-bar .pngm-item-meta-loc {
    color: #6b7280;
    font-weight: 500;
    text-decoration: none;
  }
  
  body#item .pngm-item-meta-bar a.pngm-item-meta-loc:hover {
    color: #111827;
    text-decoration: underline;
  }
  
  body#item .pngm-item-meta-bar .pngm-item-meta-loc i {
    margin-right: 4px;
    font-size: 12px;
    color: #9ca3af;
  }
  
  body#item .location .row.cords {
    display: none !important;
  }
  
  /* Native fullscreen photo viewer (replaces lightGallery on listing pages) */
  .pngm-native-viewer {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: #000;
    touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  .pngm-native-viewer[hidden] {
    display: none !important;
  }
  
  .pngm-native-viewer.is-open {
    display: block;
  }
  
  .pngm-nv-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
  }
  
  .pngm-nv-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
  }
  
  .pngm-nv-ui {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 56px 0 56px;
    transition: opacity 0.2s ease;
  }
  
  .pngm-nv-count {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  }
  
  .pngm-nv-close {
    position: absolute;
    top: calc(6px + env(safe-area-inset-top, 0px));
    right: 10px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
  }
  
  .pngm-nv-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    z-index: 2;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    transition: opacity 0.35s ease;
  }
  
  .pngm-nv-hint.is-gone,
  .pngm-native-viewer.pngm-nv-chrome-hidden .pngm-nv-ui,
  .pngm-native-viewer.pngm-nv-chrome-hidden .pngm-nv-close,
  .pngm-native-viewer.pngm-nv-chrome-hidden .pngm-nv-hint {
    opacity: 0;
    pointer-events: none;
  }
  
  body.pngm-lg-open {
    overflow: hidden;
    touch-action: none;
  }
  
  body.pngm-lg-open #navi-bar {
    visibility: hidden;
  }
  
  /* lightGallery leftover (parent may still init briefly) */
  body.pngm-lg-open .lg-outer,
  body.pngm-lg-open .lg-item,
  body.pngm-lg-open .lg-img-wrap,
  body.pngm-lg-open .lg-image {
    touch-action: none;
  }
  
  body.pngm-lg-open .lg-actions .lg-icon.lg-zoom-in,
  body.pngm-lg-open .lg-actions .lg-icon.lg-zoom-out {
    display: inline-block !important;
  }
  
  .lg-outer .lg-img-wrap img,
  .lg-outer .lg-object {
    object-fit: contain;
    image-orientation: from-image;
  }
  
  .lg-toolbar .lg-close {
    width: 48px;
    height: 48px;
    font-size: 28px !important;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
  }
  
  .lg-actions .lg-next,
  .lg-actions .lg-prev {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
  }
  
  /* Upload photos: open full image before the listing is posted */
  .upload-photos .ajax_preview_img,
  #photos .ajax_preview_img {
    cursor: zoom-in;
    position: relative;
  }
  
  .upload-photos .ajax_preview_img img,
  #photos .ajax_preview_img img {
    cursor: zoom-in;
  }
  
  /* Reorder handle — corner, not centered over the photo */
  body.pngm-post-wizard .qq-upload-list li .qq-upload-move,
  .upload-photos .qq-upload-list li .qq-upload-move,
  #photos .qq-upload-list li .qq-upload-move {
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
    bottom: auto !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    box-shadow: none !important;
    z-index: 4 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  
  body.pngm-post-wizard .qq-upload-list li .qq-upload-move i,
  .upload-photos .qq-upload-list li .qq-upload-move i {
    line-height: 1 !important;
  }
  
  /* Eye = view / pinch-zoom lightbox */
  .pngm-photo-view {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 5;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  }
  
  .pngm-photo-view:hover,
  .pngm-photo-view:focus {
    background: #1b5e20;
    outline: none;
  }
  
  .pngm-photo-view i {
    font-size: 14px;
    line-height: 1;
  }
  
  body.pngm-post-wizard .upload-photos .qq-upload-delete,
  body.pngm-post-wizard #photos .qq-upload-delete {
    opacity: 1 !important;
    z-index: 5;
  }
  
  .pngm-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: flex;
    flex-direction: column;
    background: rgba(8, 10, 12, .94);
  }
  
  .pngm-photo-viewer[hidden] {
    display: none !important;
  }
  
  body.pngm-photo-viewer-open {
    overflow: hidden;
  }
  
  body.pngm-photo-viewer-open #navi-bar {
    visibility: hidden;
    pointer-events: none;
  }
  
  .pngm-photo-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  
  .pngm-photo-viewer-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }
  
  .pngm-photo-viewer-stage {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .pngm-photo-viewer-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
  }
  
  /* Category icons ? semantic SVGs (not mismatched demo PNGs) */
  body#home .cats .pngm-cat-item img.pngm-cat-svg,
  body#home .categories img.pngm-cat-svg,
  #home-cat img.pngm-cat-svg {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  
  body#home .cats .pngm-cat-item i.fas,
  body#home .categories .pngm-cat-item i.fas {
    font-size: 34px;
    line-height: 1;
  }
  
  @media (max-width: 767px) {
    #home-cat img.pngm-cat-svg,
    #home-cat a > div img.pngm-cat-svg {
      width: 40px !important;
      height: 40px !important;
      max-width: 40px;
      max-height: 40px;
    }
  
    #item-image .swiper-button {
      width: 44px;
      height: 44px;
    }
  
    .lg-toolbar .lg-close {
      top: 8px;
      right: 8px;
    }
  }
  
  
  /* ==========================================================================
     ITEM detail ? Description ? Location ? Contact Seller (mockup)
     ========================================================================== */
  
  .pngm-contact-panel {
    margin: 0 0 4px;
    padding: 10px 0 8px;
    border-top: 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .pngm-contact-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
  }
  
  .pngm-contact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  
  .pngm-contact-head .pngm-contact-title {
    margin: 0;
  }
  
  .pngm-contact-pref-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e8f5ec;
    color: #1b7a3a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  
  .pngm-contact-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  
  .pngm-contact-actions.pngm-contact-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .pngm-contact-actions.pngm-contact-count-1 {
    grid-template-columns: 1fr;
  }
  
  .pngm-contact-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 10px;
    border: none;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
  }
  
  .pngm-contact-action.is-preferred {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(46, 125, 50, 0.55), 0 4px 12px rgba(16, 24, 40, 0.14);
  }
  
  .pngm-contact-action-badge {
    position: absolute;
    top: -7px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: #fff;
    color: #1b7a3a;
    border: 1px solid #c8e6c9;
    font-size: 9px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.12);
  }
  
  .pngm-contact-action i {
    font-size: 14px;
    line-height: 1;
  }
  
  .pngm-contact-action:hover,
  .pngm-contact-action:focus {
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.18);
    filter: brightness(1.04);
  }
  
  .pngm-contact-action.pngm-action-call {
    background: linear-gradient(180deg, #1f7a4d 0%, #166b42 100%);
  }
  
  .pngm-contact-action.pngm-action-whatsapp {
    background: linear-gradient(180deg, #2fe06a 0%, #25d366 55%, #1ebe57 100%);
    box-shadow: 0 3px 12px rgba(37, 211, 102, 0.45);
  }
  
  .pngm-contact-action.pngm-action-whatsapp:hover,
  .pngm-contact-action.pngm-action-whatsapp:focus {
    box-shadow: 0 5px 16px rgba(37, 211, 102, 0.55);
  }
  
  .pngm-contact-action.pngm-action-chat {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  }
  
  .pngm-contact-login-note {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: #4b5563;
  }
  
  .pngm-contact-action.pngm-action-login {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    color: #fff;
  }
  
  .pngm-contact-action.pngm-action-login:hover,
  .pngm-contact-action.pngm-action-login:focus {
    filter: brightness(0.95);
    color: #fff;
  }
  
  .pngm-contact-note {
    display: none !important;
  }
  
  #item-side .pngm-item-email {
    margin-bottom: 10px;
  }
  
  /* Hide legacy plugin WA / IM blocks on item side when our row is present */
  body#item #item-side .pngm-seller-contacts,
  body#item #item-side .wac-box .wac-item,
  body#item #item-side .wac-btn.wac-item,
  body#item #item-side .im-contact-button,
  body#item #item-side a.im-button {
    display: none !important;
  }
  
  /* Description + Location stacked mockup (all breakpoints) */
  body#item #item-main .basic {
    margin-bottom: 8px;
  }
  
  body#item #item-main .row.description.pngm-item-detail-block,
  body#item #item-main .location.pngm-item-detail-block {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8faf9;
    box-shadow: none;
    position: static !important;
    top: auto !important;
    min-width: 0;
    margin-left: 0 !important;
    box-sizing: border-box;
    float: none !important;
    clear: both;
  }
  
  /* Description: clearer content box so it reads before the map */
  body#item #item-main .row.description.pngm-item-detail-block {
    background: #fff;
    border: 1.5px solid #b8c4ce;
    padding: 18px 18px 20px;
    min-height: 140px;
    box-shadow: 0 1px 3px rgba(22, 32, 42, 0.06);
  }
  
  body#item #item-main .location.pngm-item-detail-block {
    background: #fff;
    border-color: #e5e7eb;
  }
  
  body#item #item-main .description .desc-parts {
    display: block;
    flex-direction: column;
    align-items: stretch;
  }
  
  body#item #item-main .description .desc-text {
    width: 100%;
  }
  
  /* Collapse long descriptions; "Show more" only when needed (JS) */
  body#item #item-main .description .pngm-desc.is-collapsed .pngm-desc-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    line-clamp: 10;
    overflow: hidden;
  }
  
  body#item #item-main .description .pngm-desc-more[hidden] {
    display: none !important;
  }
  
  body#item #item-main .description .pngm-show-more-desc {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #15803d !important;
    text-decoration: none !important;
    cursor: pointer;
  }
  
  body#item #item-main .description .pngm-show-more-desc:hover {
    color: #166534 !important;
  }
  
  body#item #item-main .description .pngm-show-more-desc i {
    font-size: 12px;
    margin-left: 2px;
  }
  
  body#item #item-main .row.description h2,
  body#item #item-main .location h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
  }

  body#item #item-main .row.description h2 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  
  body#item #item-main .row.description h2 i {
    color: #4b5563;
    font-size: 16px;
  }
  
  body#item #item-main .location h2 i {
    color: #15803d;
    font-size: 15px;
  }
  
  /* Map preview — compact so description stays the focus */
  body#item #item-main .pngm-item-map {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #eef2f0;
    aspect-ratio: 2.4 / 1;
    max-height: 140px;
  }
  
  body#item #item-main .pngm-item-map-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 110px;
    border: 0;
    pointer-events: auto;
  }
  
  body#item #item-main #location-hook {
    width: 100%;
    margin: 8px 0 0;
    position: relative;
    z-index: 1;
  }
  
  body#item #item-main #location-hook:empty {
    display: none;
  }
  
  /* Description body copy */
  body#item #item-main .description .text,
  body#item #item-main .description .desc-text-raw,
  body#item #item-main .description .pngm-desc-body {
    font-size: 15px;
    line-height: 1.55;
    color: #1f2937;
    min-height: 72px;
  }
  
  body#item #item-main .description .text p,
  body#item #item-main .description .desc-text-raw p,
  body#item #item-main .description .text br + br {
    margin: 0;
  }
  
  body#item #item-main .description .text p + p,
  body#item #item-main .description .desc-text-raw p + p {
    margin-top: 6px;
  }
  
  body#item #item-main .description .read-more-desc,
  body#item #item-main .location .directions {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #15803d !important;
    text-decoration: none !important;
  }
  
  body#item #item-main .description .read-more-desc:hover,
  body#item #item-main .location .directions:hover {
    color: #166534 !important;
  }
  
  body#item #item-main .location .row.address {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #374151;
    font-family: inherit;
  }
  
  body#item #item-side #seller {
    border-radius: 12px;
    padding: 12px;
    margin-top: 0;
  }
  
    @media (max-width: 767px) {
    body#item #item-side {
      margin-top: 6px;
      padding-top: 0;
    }
  
    .pngm-contact-panel {
      padding: 10px 0 2px;
      overflow: visible;
      max-width: 100%;
    }
  
    .pngm-contact-title {
      margin-bottom: 6px;
      font-size: 15px;
    }
  
    /* Two columns, third button full width — a zoomed iPhone was clipping WhatsApp off the right. */
    .pngm-contact-actions,
    .pngm-contact-actions.pngm-contact-count-3 {
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .pngm-contact-actions.pngm-contact-count-3 .pngm-contact-action:nth-child(3),
    .pngm-contact-actions.pngm-contact-count-1 {
      grid-column: 1 / -1;
    }

    .pngm-contact-actions.pngm-contact-count-1 {
      grid-template-columns: 1fr;
    }
  
    .pngm-contact-action {
      min-height: 40px;
      min-width: 0;
      padding: 8px 8px;
      border-radius: 9px;
      font-size: 13px;
      gap: 5px;
      white-space: normal;
    }
  
    .pngm-contact-action i {
      font-size: 14px;
      flex: 0 0 auto;
    }
  
    body#item #item-main .row.description.pngm-item-detail-block,
    body#item #item-main .location.pngm-item-detail-block {
      margin-bottom: 8px;
      padding: 10px 12px;
      border-radius: 8px;
    }
  
    body#item #item-main .row.description h2,
    body#item #item-main .location h2 {
      font-size: 14px;
      margin-bottom: 6px;
    }
  
    body#item #item-main .description .text,
    body#item #item-main .description .desc-text-raw {
      font-size: 14px;
      line-height: 1.45;
    }
  
    body#item #item-main .pngm-item-map {
      max-height: 120px;
      aspect-ratio: 2.6 / 1;
      margin-bottom: 6px;
      border-radius: 8px;
    }
  
    body#item #item-main .pngm-item-map-frame {
      min-height: 96px;
    }
  
    body#item #item-main .location .directions {
      margin-top: 4px;
      margin-bottom: 0;
    }
  }
  
  /* Site-owner WhatsApp lives on Contact us — hide the global floating button.
     Also hide the duplicate wa_chat listing checkbox; contact-section owns opt-in. */
  body a.wac-btn.wac-web,
  body .wac-box,
  body .wac-box a.wac-web,
  #wac-check,
  .control-group#wac-check {
    display: none !important;
  }
  
  #item-side .master-button.pngm-contact-message {
    background: #2e7d32;
    border-color: #256b29;
    color: #fff;
  }
  
  #rel-user-block.pngm-seller-other,
  #rel-user-block.related.type-user {
    margin-top: 8px;
  }
  
  #rel-block.pngm-similar h2,
  #rel-user-block h2 {
    font-size: 20px;
  }
  
  
  /* ==========================================================================
     DASHBOARD-01 ? User account (cleaner nav, cards, listing actions, mobile)
     ========================================================================== */
  
  body.body-ua {
    background: #f5f6f8;
  }

  /* Safety net when account-ua.css is missing from minify merge (staging). */
  body.body-ua .pngm-ua-userchip-link img,
  body.body-ua .pngm-activity-chip img {
    width: 48px;
    height: 48px;
    max-width: 48px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  body.body-ua .container.primary {
    margin-top: 16px;
    margin-bottom: 40px;
    gap: 20px;
  }
  
  body.body-ua #user-main {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    padding: 22px 22px 28px;
    box-sizing: border-box;
  }
  
  body.body-ua #user-main h1 {
    font-size: 26px;
    line-height: 1.25;
    margin-bottom: 6px;
  }
  
  body.body-ua #user-main h2 {
    color: #5c6570;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 0;
  }
  
  /* Side navigation */
  body.body-ua #user-menu,
  body.body-ua #user-menu.pngm-user-menu {
    width: 210px;
    margin-left: 0;
    margin-bottom: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    box-sizing: border-box;
  }
  
  body.body-ua #user-main {
    width: calc(100% - 230px);
  }
  
  body.body-ua #user-menu a {
    border-left: 0;
    border-radius: 8px;
    margin: 0 0 4px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
  }
  
  body.body-ua #user-menu a:not(.logout):not(.public):hover,
  body.body-ua #user-menu a.active {
    background: rgba(46, 125, 50, 0.1);
    color: #1b5e20;
  }
  
  body.body-ua #user-menu a.active {
    box-shadow: inset 3px 0 0 #2e7d32;
  }
  
  body.body-ua #user-menu a.public {
    background: #2e7d32;
    border-left-color: transparent;
    box-shadow: none;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  
  body.body-ua #user-menu a.public:hover {
    background: #256b29;
  }
  
  body.body-ua #user-menu a .counter,
  body.body-ua #user-menu a .im-user-account-count {
    background: #2e7d32;
    min-width: 22px;
    height: 22px;
    line-height: 14px;
    padding: 4px;
  }
  
  body.body-ua #user-menu a.logout {
    margin-top: 12px;
    color: #8a1f1f;
    background: rgba(218, 23, 23, 0.06);
  }
  
  body.body-ua #user-menu a.pngm-nav-messages .counter,
  body.body-ua #user-menu a.pngm-nav-favorite .counter {
    background: #174ada;
  }
  
  body.body-ua #user-menu a.pngm-nav-favorite .counter {
    background: #c9a227;
  }
  
  /* Dashboard header + quick chips */
  #user-dashboard.pngm-ua .pngm-ua-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eceff3;
  }
  
  #user-dashboard .pngm-ua-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
  }
  
  #user-dashboard .pngm-ua-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 14px;
    border-radius: 10px;
    background: #f3f7f3;
    border: 1px solid #d7e6d8;
    color: #1b5e20;
    text-decoration: none;
    transition: 0.2s;
  }
  
  #user-dashboard .pngm-ua-chip:hover {
    background: #e8f3e9;
    text-decoration: none;
    transform: translateY(-1px);
  }
  
  #user-dashboard .pngm-ua-chip strong {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
  }
  
  #user-dashboard .pngm-ua-chip span {
    font-size: 13px;
    font-weight: 600;
    color: #3d5540;
  }
  
  #user-dashboard .pngm-ua-chip.messages {
    background: #eef5ff;
    border-color: #d3e2f8;
    color: #174ada;
  }
  
  #user-dashboard .pngm-ua-chip.favorite {
    background: #fff8e8;
    border-color: #f0e0b8;
    color: #8a6a12;
  }
  
  #user-dashboard .pngm-ua-chip.place {
    background: #2e7d32;
    border-color: #256b29;
    color: #fff;
  }
  
  #user-dashboard .pngm-ua-chip.place span {
    color: rgba(255, 255, 255, 0.92);
  }
  
  #user-dashboard .pngm-ua-section {
    margin: 0 0 22px;
  }
  
  #user-dashboard .pngm-ua-section-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
  }
  
  #user-dashboard .card-box {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 12px;
    margin: 0;
  }
  
  #user-dashboard .card {
    padding: 16px;
    background: #f8f9fb;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    box-shadow: none;
  }
  
  #user-dashboard .card:hover {
    background: #fff;
    border-color: #cfd8cc;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  }
  
  #user-dashboard .card .icon {
    width: 52px;
    height: 52px;
    padding: 12px 4px;
    border-radius: 10px;
    background: rgba(46, 125, 50, 0.1);
    margin-bottom: 8px;
  }
  
  #user-dashboard .card .icon > i {
    font-size: 22px;
    line-height: 28px;
    color: #2e7d32;
  }
  
  #user-dashboard .card .icon > svg {
    width: 24px;
    height: 24px;
    fill: #2e7d32;
  }
  
  #user-dashboard .card .icon .count {
    background: #2e7d32;
    box-shadow: 0 0 0 2px #f8f9fb;
  }
  
  #user-dashboard .card .header {
    font-size: 16px;
    margin: 4px 0 6px;
  }
  
  #user-dashboard .card .description {
    font-size: 13px;
    line-height: 1.4;
    color: #5c6570;
  }
  
  #user-dashboard .card.messages .icon {
    background: rgba(23, 74, 218, 0.1);
  }
  
  #user-dashboard .card.messages .icon > i,
  #user-dashboard .card.messages .icon > svg {
    color: #174ada;
    fill: #174ada;
  }
  
  #user-dashboard .card.favorite .icon {
    background: rgba(228, 213, 27, 0.25);
  }
  
  #user-dashboard .card.favorite .icon > i {
    color: #8a6a12;
  }
  
  /* Listings management */
  body.body-ua .pngm-ua-pagehead {
    position: relative;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eceff3;
    padding-right: 140px;
  }
  
  body.body-ua .pngm-ua-pagehead .pngm-ua-place {
    position: absolute;
    top: 0;
    right: 0;
    white-space: nowrap;
  }
  
  body.body-ua .items-box {
    margin: 8px 0 0;
  }
  
  body.body-ua .items-box .item {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    border-bottom: 1px solid #e6e8ec;
    background: #fff;
  }
  
  body.body-ua .items-box .item .image {
    border-radius: 8px;
    overflow: hidden;
  }
  
  body.body-ua .items-box .item .buttons.pngm-item-actions,
  body.body-ua .items-box .item .buttons {
    gap: 6px;
    margin-top: 12px;
  }
  
  body.body-ua .items-box .item .buttons a {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    background: #eef2ff;
    color: #2f3ab2;
    border: 1px solid transparent;
  }
  
  body.body-ua .items-box .item .buttons a.edit {
    background: #2e7d32;
    color: #fff;
  }
  
  body.body-ua .items-box .item .buttons a.activate,
  body.body-ua .items-box .item .buttons a.renew {
    background: #174ada;
    color: #fff;
  }
  
  body.body-ua .items-box .item .buttons a.sold,
  body.body-ua .items-box .item .buttons a.reserved,
  body.body-ua .items-box .item .buttons a.deactivate,
  body.body-ua .items-box .item .buttons a.republish {
    background: #f3f4f6;
    color: #333;
    border-color: #dde1e6;
  }
  
  body.body-ua .items-box .item .buttons a.delete {
    margin-left: auto;
    background: #fff;
    color: #b42318;
    border-color: #f3c1bd;
    box-shadow: none;
  }
  
  body.body-ua .items-box .item .buttons a.delete i {
    color: #b42318;
  }
  
  body.body-ua form[name="user-items-search"] {
    background: #f8f9fb;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    padding: 12px 12px 6px;
    margin-bottom: 16px;
  }
  
  body.body-ua .profile-box .right-block {
    background: #f8f9fb;
    border: 1px solid #e6e8ec;
  }
  
  /* Mobile account navigation + layout */
  @media (max-width: 767px) {
    body.body-ua .container.primary {
      flex-direction: column;
      margin: 0 0 20px;
      gap: 12px;
    }
  
    /* Legacy flat #user-menu only — designed pngm-ua-sidebar is a drawer */
    body.body-ua #user-menu:not(.pngm-ua-sidebar),
    body.body-ua #user-menu.pngm-user-menu:not(.pngm-ua-sidebar) {
      display: flex !important;
      width: 100%;
      position: relative;
      top: auto;
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 6px;
      padding: 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
  
    body.body-ua #user-menu:not(.pngm-ua-sidebar) a {
      flex: 0 0 auto;
      white-space: nowrap;
      margin: 0;
      padding: 10px 12px;
    }
  
    body.body-ua #user-menu:not(.pngm-ua-sidebar) a.public {
      margin-bottom: 0;
    }
  
    body.body-ua #user-menu:not(.pngm-ua-sidebar) a.logout {
      margin-top: 0;
    }
  
    body.body-ua #user-menu:not(.pngm-ua-sidebar) .menu-hooks {
      display: contents;
    }
  
    body.body-ua #user-main {
      width: 100%;
      padding: 16px 14px 20px;
      border-radius: 10px;
    }
  
    #user-dashboard .pngm-ua-quick {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    #user-dashboard .card-box {
      grid-template-columns: 1fr;
      grid-gap: 10px;
    }
  
    #user-dashboard .headers,
    #user-dashboard .pngm-ua-header {
      padding-left: 72px;
    }
  
    body.body-ua .pngm-ua-pagehead {
      padding-right: 0;
    }
  
    body.body-ua .pngm-ua-pagehead .pngm-ua-place {
      position: static;
      display: inline-flex;
      margin-top: 10px;
    }
  
    body.body-ua .items-box .item {
      padding: 10px;
    }
  
    body.body-ua .items-box .item .buttons a.delete {
      margin-left: 0;
    }
  
    body.body-ua .items-box .item .buttons.pngm-item-actions {
      width: 100%;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1024px) {
    #user-dashboard .pngm-ua-quick {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    #user-dashboard .card-box {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  
  /* ==========================================================================
     FOOTER — logo | Follow us | Information (desktop cols + mobile stacked)
     ========================================================================== */
  
  footer.pngm-footer {
    /* Soft cool wash — separates site chrome from white listings / promo strip */
    background: #f3f5f7;
    border-top: 1px solid #e5e7eb;
    color: #374151;
    margin-top: 40px;
    padding: 36px 0 32px;
    width: 100%;
  }
  
  footer.pngm-footer .pngm-footer-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
  }
  
  footer.pngm-footer .pngm-footer-desktop { display: none; }
  footer.pngm-footer .pngm-footer-mobile { display: block; }
  
  footer.pngm-footer .pngm-footer-brand {
    padding: 0 0 18px;
    border-bottom: 1px solid #e5e7eb;
    margin: 0 0 22px;
  }
  
  footer.pngm-footer .pngm-footer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    line-height: 0;
    margin: 0 0 8px;
    background: transparent !important;
  }
  
  footer.pngm-footer .pngm-footer-logo img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    background: transparent !important;
    mix-blend-mode: multiply;
  }
  
  footer.pngm-footer .pngm-footer-name {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
  }
  footer.pngm-footer .pngm-footer-name-png { color: #111827; }
  footer.pngm-footer .pngm-footer-name-market { color: #15803d; }
  
  footer.pngm-footer .pngm-footer-tagline {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #6b7280;
  }
  
  footer.pngm-footer .pngm-footer-block {
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 0;
  }
  
  footer.pngm-footer .pngm-footer-block:last-of-type {
    margin-bottom: 0;
  }
  
  footer.pngm-footer h4 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: #111827;
  }
  
  footer.pngm-footer .pngm-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  
  footer.pngm-footer .pngm-footer-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    margin: 0 12px;
    background: #d1d5db;
    flex: 0 0 1px;
    align-self: center;
  }
  
  footer.pngm-footer .pngm-footer-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
  }
  
  footer.pngm-footer .pngm-footer-social:hover {
    color: #111827;
    text-decoration: none;
  }
  
  footer.pngm-footer .pngm-footer-social i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    flex: 0 0 22px;
  }
  
  footer.pngm-footer .pngm-footer-social-facebook i { background: #1877f2; }
  footer.pngm-footer .pngm-footer-social-instagram i {
    border-radius: 6px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  }
  footer.pngm-footer .pngm-footer-social-tiktok i { background: #111827; }
  
  footer.pngm-footer .pngm-footer-info a {
    color: #4b5563;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }
  
  footer.pngm-footer .pngm-footer-info a:hover {
    color: #15803d;
    text-decoration: none;
  }
  
  footer.pngm-footer .pngm-footer-copy {
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: #4b5563;
  }
  
  footer.pngm-footer .footer-hook,
  footer.pngm-footer .footer-widgets {
    display: none;
  }
  
  a#scroll-to-top {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.16) !important;
    color: #15803d !important;
    z-index: 10160 !important;
    right: 18px !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  a#scroll-to-top svg {
    fill: #15803d !important;
  }
  
  @media screen and (min-width: 768px) {
    footer.pngm-footer {
      padding: 40px 0 36px;
    }
  
    footer.pngm-footer .pngm-footer-mobile { display: none; }
  
    footer.pngm-footer .pngm-footer-desktop {
      display: grid;
      grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.9fr) minmax(220px, 1.2fr);
      align-items: start;
    }
  
    footer.pngm-footer .pngm-footer-desktop .pngm-footer-col {
      padding: 0 28px;
    }
  
    footer.pngm-footer .pngm-footer-desktop .pngm-footer-col + .pngm-footer-col {
      border-left: 1px solid #e5e7eb;
    }
  
    footer.pngm-footer .pngm-footer-desktop .pngm-footer-brand {
      padding: 0 28px 0 0;
      border-bottom: 0;
      margin: 0;
    }
  
    footer.pngm-footer .pngm-footer-desktop .pngm-footer-follow,
    footer.pngm-footer .pngm-footer-desktop .pngm-footer-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  
    footer.pngm-footer .pngm-footer-desktop h4 {
      margin: 0 0 6px;
    }
  
    footer.pngm-footer .pngm-footer-info-grid {
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 72px;
      row-gap: 10px;
      align-items: start;
    }
  
    footer.pngm-footer .pngm-footer-info-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  
    a#scroll-to-top {
      bottom: 28px !important;
      right: 28px !important;
    }
  }
  
  @media screen and (max-width: 767px) {
    footer.pngm-footer {
      padding: 24px 0 calc(20px + env(safe-area-inset-bottom, 0px));
    }
  
    footer.pngm-footer .pngm-footer-inner {
      padding: 0 16px;
    }
  
    footer.pngm-footer .pngm-footer-logo img {
      height: 40px;
    }
  
    footer.pngm-footer .pngm-footer-sep {
      margin: 0 10px;
      height: 12px;
    }
  }
  
  
  /* ==========================================================================
     REQ-09 — Social login + WhatsApp Chat plugin visual integration
     ========================================================================== */
  
  .pre-account.pngm-auth .pngm-social-login {
    margin: 0 0 18px;
    width: 100%;
  }
  
  .pre-account.pngm-auth .pngm-social-login a,
  .pre-account.pngm-auth .pngm-social-login .pngm-btn-google-wrap a {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: 999px !important;
    border: 0 !important;
    justify-content: flex-start;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.1);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }
  
  .pre-account.pngm-auth .pngm-social-login a:hover {
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.16);
  }
  
  .pre-account.pngm-auth .pngm-social-login a i {
    margin: 0;
    font-size: 16px;
  }
  
  .pre-account.pngm-auth .pngm-soc-label {
    flex: 1;
    text-align: center;
  }
  
  .pre-account.pngm-auth .pngm-soc-chevron {
    font-size: 12px;
    opacity: 0.7;
    flex-shrink: 0;
  }
  
  .pre-account.pngm-auth .pngm-soc-svg {
    flex-shrink: 0;
    display: block;
  }
  
  .pre-account.pngm-auth .pngm-soc-facebook {
    flex-shrink: 0;
    display: block;
    border-radius: 50%;
  }
  
  .pre-account.pngm-auth .pngm-social-login a.google,
  .pre-account.pngm-auth .pngm-social-login a.pngm-btn-google {
    color: #222;
    background: #fff;
  }
  
  .pre-account.pngm-auth .pngm-social-login a.facebook,
  .pre-account.pngm-auth .pngm-social-login a.pngm-btn-facebook,
  .pre-account.pngm-auth .pngm-social-login a.fjl-button {
    color: #fff;
    background: #1877f2;
  }
  
  .pre-account.pngm-auth .pngm-social-login a.facebook .pngm-soc-chevron,
  .pre-account.pngm-auth .pngm-social-login a.pngm-btn-facebook .pngm-soc-chevron {
    color: #fff;
    opacity: 1;
  }
  
  .pre-account.pngm-auth .pngm-social-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 20px;
    color: #8a9199;
    font-size: 12px;
  }
  
  .pre-account.pngm-auth .pngm-social-divider::before,
  .pre-account.pngm-auth .pngm-social-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e4e7eb;
  }
  
  .pre-account.pngm-auth .pngm-social-divider span {
    white-space: nowrap;
    background: #eef1f4;
    color: #6b7280;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
  }
  
  body.pre-account.pngm-auth .content,
  body.pre-account.pngm-auth:not(.has-footer) .content {
    min-height: 0 !important;
    padding: 16px 0 8px !important;
  }
  
  body.pre-account.pngm-auth > .content > section.container {
    display: block;
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    min-height: 0;
  }
  
  body.pre-account.pngm-auth .box {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  
  body.pre-account.pngm-auth input,
  body.pre-account.pngm-auth textarea,
  body.pre-account.pngm-auth .btn,
  body.pre-account.pngm-auth .input-box,
  body.pre-account.pngm-auth .pngm-social-login a {
    box-sizing: border-box;
    max-width: 100%;
  }
  
  body#user-login.pngm-auth .input-box.pngm-field-ico input {
    padding-left: 42px;
    background: #eef8f0;
    border-radius: 10px;
    border: 0;
  }
  
  @media screen and (max-width: 767px) {
    body.pre-account.pngm-auth > .content > section.container:after {
      display: none;
    }
  }
  
  @media screen and (min-width: 768px) {
    body.pre-account.pngm-auth > .content > section.container {
      display: flex;
      align-items: flex-start;
      position: relative;
      min-height: 430px;
    }
  
    body.pre-account.pngm-auth > .content > section.container:after {
      display: block;
      top: 50%;
      transform: translateY(-50%);
      height: 420px;
      width: 420px;
      background-position: center right;
      background-size: contain;
    }
  
    body.pre-account.pngm-auth .box {
      margin-left: 0;
      margin-right: auto;
    }
  
    body.pre-account.pngm-auth footer.pngm-footer {
      margin-top: 0;
      padding-top: 12px;
    }
  }
  
  body.pre-account.pngm-auth .g-recaptcha,
  body.pngm-auth-v2 .pngm-auth-captcha .g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 0 !important;
  }
  
  .pngm-field-ico {
    position: relative;
    display: block;
  }
  
  .pngm-field-ico::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #0e6e40;
    font-size: 14px;
    z-index: 2;
    pointer-events: none;
  }
  
  .pngm-ico-mail::before { content: "\f0e0"; font-weight: 400; font-family: "Font Awesome 5 Free"; }
  .pngm-ico-user::before { content: "\f007"; }
  .pngm-ico-tag::before { content: "\f02b"; }
  
  /* WhatsApp Chat plugin float / item button polish (when wa_chat is active) */
  .pngm-wa-chat-plugin,
  .pngm-seller-contacts .pngm-wa-chat-plugin {
    display: block;
    width: 100%;
    margin: 0 0 8px;
  }
  
  .pngm-wa-chat-plugin a,
  body .wac-btn:not(.wac-web),
  body .wac-button,
  body .wach-button,
  body .wa-chat-button {
    max-width: 100%;
  }
  
  
  /* ==========================================================================
     Contact us ? banner + form (not stacked detail cards)
     ========================================================================== */
  
  body.pngm-contact {
    background: #f4f5f7;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  }
  
  body.pngm-contact.pre-account > .content > section.container:after {
    display: none;
  }
  
  body.pngm-contact.pre-account .content {
    padding: 0 0 16px !important;
  }
  
  body.pngm-contact .pngm-global-search {
    padding-bottom: 8px;
    border-bottom: 0;
    box-shadow: none;
  }
  
  body.pngm-contact.pre-account > .content > section.container {
    display: block;
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-top: 16px;
  }
  
  body.pngm-contact.pre-account .box.pngm-contact-page {
    max-width: 440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  body.pngm-contact .pngm-contact-hero {
    display: block;
    width: 100%;
    margin: 0;
    background: #e8f6ee;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }
  
  body.pngm-contact .pngm-contact-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
  }
  
  body.pngm-contact .pngm-contact-hero h1 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: #146c35;
    font-family: inherit;
  }
  
  body.pngm-contact .pngm-contact-hero p {
    margin: 0;
    color: #5c6570;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    max-width: 280px;
  }
  
  body.pngm-contact .pngm-contact-hero-art {
    flex-shrink: 0;
    line-height: 0;
  }
  
  body.pngm-contact .pngm-contact-sidebar {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    padding: 16px;
    margin: 0 0 8px;
    box-sizing: border-box;
  }
  
  body.pngm-contact .pngm-contact-section-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: #1a1d21;
    font-family: inherit;
  }
  
  body.pngm-contact .pngm-contact-side-item {
    padding: 14px 0;
    border-bottom: 1px solid #e8eaed;
  }
  
  body.pngm-contact .pngm-contact-side-item-last {
    border-bottom: 0;
    padding-bottom: 0;
  }
  
  body.pngm-contact .pngm-contact-email-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
  }
  
  body.pngm-contact .pngm-contact-wa-block {
    margin: 0;
  }
  
  body.pngm-contact .pngm-contact-ico {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fff;
    border: 1.5px solid #006b24;
    color: #006b24;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
  }
  
  body.pngm-contact .pngm-contact-email-row strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1d21;
  }
  
  body.pngm-contact .pngm-contact-email-row a {
    display: block;
    color: #006b24;
    font-weight: 500;
    font-size: 13.5px;
    word-break: break-all;
  }
  
  body.pngm-contact .pngm-contact-email-row em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 12px;
    color: #8a9199;
    font-weight: 400;
  }
  
  body.pngm-contact .pngm-contact-wa-block {
    margin: 0;
  }
  
  body.pngm-contact .pngm-contact-wa-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 10px;
  }
  
  body.pngm-contact .pngm-wa-logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
  }
  
  body.pngm-contact .pngm-wa-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  
  body.pngm-contact .pngm-wa-copy strong {
    font-size: 14px;
    font-weight: 700;
    color: #1a1d21;
  }
  
  body.pngm-contact .pngm-wa-copy span {
    font-size: 12.5px;
    color: #5c6570;
    font-weight: 400;
  }
  
  body.pngm-contact .pngm-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid #006b24;
    border-radius: 8px;
    color: #006b24;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    background: #fff;
  }
  
  body.pngm-contact .pngm-wa-btn:hover {
    text-decoration: none;
    background: #e8f6ee;
  }
  
  body.pngm-contact .pngm-contact-privacy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #e8f6ee;
    border-radius: 12px;
    padding: 12px;
  }
  
  body.pngm-contact .pngm-privacy-ico {
    color: #006b24;
    font-size: 18px;
    width: 22px;
    padding-top: 2px;
    flex-shrink: 0;
  }
  
  body.pngm-contact .pngm-contact-privacy strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1d21;
  }
  
  body.pngm-contact .pngm-contact-privacy span {
    display: block;
    font-size: 12.5px;
    color: #5c6570;
    font-weight: 400;
    line-height: 1.4;
  }
  
  body.pngm-contact .pngm-contact-form {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    padding: 14px;
    margin: 0;
    box-sizing: border-box;
  }
  
  body.pngm-contact .pngm-contact-form label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
    font-size: 13.5px;
    margin-bottom: 4px;
    color: #2b3138;
  }
  
  body.pngm-contact .pngm-contact-form label i {
    color: #6b7280;
    font-size: 13px;
    width: 15px;
    font-weight: 400;
  }
  
  body.pngm-contact .pngm-contact-form .pngm-field-svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #6b7280;
  }
  
  body.pngm-contact .pngm-contact-form .row {
    margin: 0 0 8px !important;
  }
  
  body.pngm-contact .pngm-contact-form .row.r4 {
    margin-bottom: 10px !important;
  }
  
  body.pngm-contact .pngm-contact-form .g-recaptcha,
  body.pngm-contact .pngm-contact-form .recaptcha {
    display: flex;
    justify-content: center;
    margin: 8px 0 14px;
  }
  
  body.pngm-contact .pngm-contact-form input[type="text"],
  body.pngm-contact .pngm-contact-form input[type="email"],
  body.pngm-contact .pngm-contact-form textarea {
    background: #fff !important;
    border: 1px solid #d8dde3 !important;
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
  }
  
  body.pngm-contact .pngm-contact-form textarea {
    min-height: 148px !important;
    height: 148px;
    padding: 12px;
  }
  
  body.pngm-contact .pngm-send-btn {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    background: #006b24 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    height: 44px !important;
    min-height: 44px;
    padding: 0 16px !important;
    margin: 0;
    box-shadow: none;
  }
  
  body.pngm-contact .pngm-send-btn span {
    grid-column: 2;
    justify-self: center;
  }
  
  body.pngm-contact .pngm-send-btn .pngm-send-ico {
    grid-column: 3;
    justify-self: end;
    width: 18px;
    height: 18px;
    color: #fff;
  }
  
  body.pngm-contact footer.pngm-footer {
    padding-top: 6px;
  }
  
  @media screen and (min-width: 900px) {
    body.pngm-contact .pngm-contact-hero-inner {
      padding: 22px 16px;
    }
  
    body.pngm-contact .pngm-contact-hero h1 {
      font-size: 22px;
    }
  
    body.pngm-contact .pngm-contact-hero p {
      max-width: 420px;
      font-size: 14px;
    }
  
    body.pngm-contact .pngm-contact-hero-art svg {
      width: 168px;
      height: 128px;
    }
  
    body.pngm-contact.pre-account .box.pngm-contact-page {
      max-width: 1080px;
      display: grid;
      grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
      gap: 0;
      background: #fff;
      border: 1px solid #e6e8ec;
      border-radius: 16px;
      overflow: hidden;
    }
  
    body.pngm-contact .pngm-contact-sidebar {
      margin: 0;
      border: 0;
      border-radius: 0;
      border-right: 1px solid #eef0f3;
      padding: 22px 20px;
    }
  
    body.pngm-contact .pngm-contact-form {
      margin: 0;
      border: 0;
      border-radius: 0;
      padding: 22px 24px;
    }
  
    body.pngm-contact .pngm-contact-form-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 16px;
    }
  
    body.pngm-contact .pngm-contact-form textarea {
      min-height: 180px !important;
      height: 180px;
    }
  }
  
  
  /* P1-004 ? Post-ad validation: toast top-right + scroll to field */
  #body-item-post #error_list,
  body.item-publish #error_list,
  #pngm-error-hidden {
    display: none !important;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  .pngm-post-toast-host {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 99999;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  
  .pngm-post-toast-host.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  .pngm-post-toast {
    position: relative;
    padding: 14px 40px 14px 16px;
    background: #fff;
    border: 1px solid #f1b4b4;
    border-left: 4px solid #c62828;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    color: #842029;
  }
  
  .pngm-post-toast-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #c62828;
  }
  
  .pngm-post-toast-msg {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: #16202a;
  }
  
  .pngm-post-toast-more {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #5c6570;
  }
  
  .pngm-post-toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #5c6570;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  
  #body-item-post .pngm-has-error,
  body.item-publish .pngm-has-error {
    border-left: 3px solid #c62828;
    padding-left: 8px;
    scroll-margin-top: 96px;
  }
  
  #body-item-post input.pngm-field-error,
  #body-item-post select.pngm-field-error,
  #body-item-post textarea.pngm-field-error,
  form[name="item"] input.pngm-field-error,
  form[name="item"] select.pngm-field-error,
  form[name="item"] textarea.pngm-field-error {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.15);
  }
  
  @media (max-width: 767px) {
    .pngm-post-toast-host {
      top: 12px;
      right: 12px;
      left: 12px;
      width: auto;
    }
  }
  
  
  /* ==========================================================================
     Mobile review ? OLX density, header, cards, search, item, gallery
     ========================================================================== */
  
  .pngm-phase-hidden {
    display: none !important;
  }
  
  body#item .basic .row.details,
  body#item .custom-fields,
  body#item .props > h2,
  body#item .pngm-contact-message,
  body#item .sticky-button,
  body#item .item-share,
  body#item #shortcuts .item-share,
  #search-alert {
    display: none !important;
  }
  
  .products.list .pngm-card-price {
    display: none;
  }
  
  .pngm-near-heading {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 4px 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  
  .pngm-near-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px 6px;
    margin: 0;
    color: #5c6570;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
  }
  
  .pngm-near-meta .fa-map-marker-alt {
    color: #6b7785;
    font-size: 12px;
  }
  
  .pngm-change-link {
    color: #006b24;
    font-weight: 600;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
  }
  
  .pngm-change-link:hover {
    color: #00551c;
  }
  
  #home-cat a.all > div svg.pngm-cat-all {
    color: #5c6570;
  }
  
  .products.grid .simple-prod .pngm-date,
  #recent-ads .simple-prod .pngm-date,
  #search-items .products.grid .simple-prod .pngm-date {
    display: none !important;
  }
  
  #search-items .paginate {
    margin: 8px 0 10px;
  }
  
  #search-items .products.grid {
    margin-bottom: 0;
  }
  
  #search-main #recent-ads.onsearch,
  #recent-ads.onsearch {
    display: block !important;
    margin: 4px 0 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid #e3e8ed !important;
    border-bottom: none !important;
  }
  
  /* Search listings board — proper AJAX loading state */
  body#search #pngm-search-board {
    position: relative;
    min-width: 0;
  }
  
  body#search #pngm-search-board:after {
    display: none !important;
    content: none !important;
  }
  
  body#search #pngm-search-board .pngm-board-loader {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 6;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 10px;
  }
  
  body#search #pngm-search-board.loading {
    min-height: 280px;
    pointer-events: none;
  }
  
  body#search #pngm-search-board.loading .pngm-board-loader {
    display: flex;
  }
  
  body#search #pngm-search-board .pngm-board-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 160px;
    padding: 22px 28px;
    border: 1px solid #e3e8ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 32, 42, 0.12);
    text-align: center;
  }
  
  body#search #pngm-search-board .pngm-board-loader-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #d8f0df;
    border-top-color: #15803d;
    border-radius: 50%;
    animation: pngmBoardSpin 0.7s linear infinite;
  }
  
  body#search #pngm-search-board .pngm-board-loader-text {
    margin: 0;
    color: #16202a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
  }
  
  body#search #pngm-search-board .pngm-board-loader-hint {
    margin: -6px 0 0;
    color: #6b7785;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }
  
  @keyframes pngmBoardSpin {
    to {
      transform: rotate(360deg);
    }
  }
  
  body#search #search-main #recent-ads.onsearch {
    max-width: 100%;
    min-width: 0;
  }
  
  body#search #search-main #recent-ads.onsearch .nice-scroll-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  
  body#search #search-main #recent-ads.onsearch .products.grid,
  body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 2px 10px 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(21, 128, 61, 0.45) rgba(16, 32, 42, 0.06);
  }
  
  body#search #search-main #recent-ads.onsearch .products.grid::-webkit-scrollbar,
  body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  
  body#search #search-main #recent-ads.onsearch .products.grid::-webkit-scrollbar-thumb,
  body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(21, 128, 61, 0.45);
  }
  
  body#search #search-main #recent-ads.onsearch .products.grid .simple-prod,
  body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll .simple-prod {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
    margin: 0 8px 6px 0 !important;
  }
  
  body#search #search-main #recent-ads.onsearch .nice-scroll-prev,
  body#search #search-main #recent-ads.onsearch .nice-scroll-next {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border-radius: 50%;
    color: #14532d;
    z-index: 5;
  }
  
  body#search #search-main #recent-ads.onsearch .nice-scroll-wrap.nice-scroll-have-overflow > .nice-scroll-prev,
  body#search #search-main #recent-ads.onsearch .nice-scroll-wrap.nice-scroll-have-overflow > .nice-scroll-next {
    display: block !important;
  }
  
  body#search #search-main #recent-ads.onsearch .products.grid.is-dragging,
  body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
  
  body#search #search-main #recent-ads.onsearch .products.grid.is-dragging a,
  body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll.is-dragging a {
    pointer-events: none;
  }
  
  body#search #search-main #recent-ads.onsearch .nice-scroll-prev i,
  body#search #search-main #recent-ads.onsearch .nice-scroll-next i,
  body#search #search-main #recent-ads.onsearch .nice-scroll-prev .mover,
  body#search #search-main #recent-ads.onsearch .nice-scroll-next .mover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #15803d;
    box-shadow: 0 2px 10px rgba(16, 32, 42, 0.18);
    font-size: 18px;
    line-height: 1;
  }
  
  body#search #search-main #recent-ads.onsearch .nice-scroll-prev:not(.disabled):hover,
  body#search #search-main #recent-ads.onsearch .nice-scroll-next:not(.disabled):hover {
    color: #15803d;
    transform: scale(1.06);
  }
  
  /* Item page recently viewed — same dashboard card size */
  body#item #recent-ads.onitem .products.grid,
  body#item #recent-ads.onitem .products.grid.nice-scroll,
  body#item #rel-user-block.pngm-seller-other .products.grid,
  body#item #rel-user-block.pngm-seller-other .products.grid.nice-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
  }
  
  body#item #recent-ads.onitem .products.grid .simple-prod,
  body#item #recent-ads.onitem .products.grid.nice-scroll .simple-prod,
  body#item #rel-user-block.pngm-seller-other .products.grid .simple-prod,
  body#item #rel-user-block.pngm-seller-other .products.grid.nice-scroll .simple-prod {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
    margin: 0 8px 6px 0 !important;
  }
  
  @media screen and (max-width: 767px) {
    body#item #recent-ads.onitem .products.grid .simple-prod,
    body#item #recent-ads.onitem .products.grid.nice-scroll .simple-prod,
    body#item #rel-user-block.pngm-seller-other .products.grid .simple-prod,
    body#item #rel-user-block.pngm-seller-other .products.grid.nice-scroll .simple-prod {
      flex: 0 0 148px !important;
      width: 148px !important;
      max-width: 148px !important;
      min-width: 148px !important;
    }
  
    body#item #recent-ads.onitem .nice-scroll-prev,
    body#item #recent-ads.onitem .nice-scroll-next,
    body#item #rel-user-block.pngm-seller-other .nice-scroll-prev,
    body#item #rel-user-block.pngm-seller-other .nice-scroll-next {
      display: none !important;
    }
  }
  
  /* Careful red outline Report listing control */
  body#item #item-side a.report-button,
  body#item #item-side a.pngm-report-listing {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    max-width: 100%;
    margin: 12px 0 0 0 !important;
    padding: 8px 14px !important;
    border: 1.5px solid #d92d20 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #d92d20 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  
  body#item #item-side a.report-button i,
  body#item #item-side a.pngm-report-listing i {
    margin: 0 !important;
    color: #d92d20 !important;
    font-size: 13px;
  }
  
  body#item #item-side a.report-button:hover,
  body#item #item-side a.pngm-report-listing:hover {
    background: #fff5f4 !important;
    border-color: #b42318 !important;
    color: #b42318 !important;
    text-decoration: none !important;
  }
  
  body#item .pngm-report-wrap,
  body#item .report-wrap {
    display: none !important;
  }
  
  /* Keep report dialog above overlay + header (location modal raised covers). */
  #epsModal.report-box,
  #epsModal.pngm-report-box,
  .modal-box.report-box.pngm-report-box {
    z-index: 10200 !important;
    color: #16202a;
    height: auto !important;
    max-height: calc(100vh - 48px) !important;
    overflow: visible !important;
  }
  
  .modal-cover.pngm-report-cover,
  .modal-cover[data-modal-id]:has(+ #epsModal.report-box),
  .modal-cover[data-modal-id]:has(+ #epsModal.pngm-report-box),
  .modal-cover[data-modal-id]:has(+ .modal-box.report-box) {
    z-index: 10190 !important;
  }
  
  #epsModal.report-box .modal-inside,
  #epsModal.pngm-report-box .modal-inside,
  #epsModal.report-box .modal-body,
  #epsModal.pngm-report-box .modal-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  #epsModal.report-box .modal-content,
  #epsModal.pngm-report-box .modal-content,
  .modal-box.pngm-report-box .modal-content {
    pointer-events: auto !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  #epsModal.report-box #report,
  #epsModal.pngm-report-box #report,
  .modal-box.pngm-report-box #report {
    margin-bottom: 0 !important;
    padding: 28px 28px 24px !important;
  }
  
  /* Close lives inside the card — the outside X sat over the sticky sidebar. */
  #epsModal.report-box .modal-close-alt,
  #epsModal.pngm-report-box .modal-close-alt {
    display: none !important;
  }
  
  #epsModal.report-box .modal-close,
  #epsModal.pngm-report-box .modal-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 12px !important;
    right: 12px !important;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    z-index: 5;
  }
  
  .modal-box.pngm-report-box .pngm-report-icon,
  .modal-box.report-box .pngm-report-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 0 16px 0;
    border-radius: 50%;
    background: #fff1f0;
    color: #d92d20;
    font-size: 22px;
  }
  
  .modal-box.pngm-report-box #report > img,
  .modal-box.report-box #report > img {
    display: none;
  }
  
  .modal-box.pngm-report-box #report .header,
  .modal-box.report-box #report .header,
  #epsModal.report-box #report .header,
  #epsModal.pngm-report-box #report .header {
    color: #16202a !important;
    font-weight: 700 !important;
  }
  
  .modal-box.pngm-report-box #report .subheader,
  .modal-box.report-box #report .subheader,
  #epsModal.report-box #report .subheader,
  #epsModal.pngm-report-box #report .subheader {
    color: #4b5563 !important;
  }
  
  .modal-box.pngm-report-box #report .text a,
  .modal-box.report-box #report .text a,
  #epsModal.report-box #report .text a,
  #epsModal.pngm-report-box #report .text a {
    display: block !important;
    width: 100%;
    margin: 0 0 8px 0;
    padding: 12px 14px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    color: #16202a !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.3;
    background: #fff !important;
    box-sizing: border-box;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    text-decoration: none !important;
  }
  
  .modal-box.pngm-report-box #report .text a:hover,
  .modal-box.report-box #report .text a:hover,
  #epsModal.report-box #report .text a:hover,
  #epsModal.pngm-report-box #report .text a:hover {
    border-color: #d92d20 !important;
    color: #d92d20 !important;
    background: #fff8f7 !important;
  }
  
  #rel-user-block.pngm-seller-other {
    margin-top: 18px;
    margin-bottom: 8px;
  }
  
  #rel-user-block.pngm-seller-other h2 {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 700;
  }
  
  body#search .container.primary {
    padding-bottom: 0;
  }
  
  .products.grid .simple-prod .pngm-card-price {
    display: block;
    order: 1;
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    color: #16202a;
  }
  
  .products.grid .simple-prod .img-wrap .premium-mark {
    top: 6px;
    left: 6px;
    bottom: auto;
    right: auto;
    z-index: 4;
    padding: 4px 7px;
    border-radius: 4px;
    background: #f5c400;
    color: #1a1400;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(0,0,0,.28);
  }
  
  @media screen and (max-width: 767px) {
    header {
      min-height: 52px;
    }
  
    header .cmain {
      min-height: 52px;
      align-items: center;
    }
  
    body#home > .content > section.home-search {
      padding: 6px 0 4px 0;
    }
  
    body#home > .content > section.home-location {
      padding-top: 4px;
    }
  
    .pngm-near-heading {
      font-size: 17px !important;
    }
  
    #home-cat {
      margin-bottom: 0;
      padding-bottom: 0;
    }
  
    .products.grid .simple-prod .pngm-card-price {
      order: 1;
    }
  
    .products.grid .simple-prod .pngm-card-title-row {
      order: 2;
    }
  
    .products.grid .simple-prod .title,
    #search-items .products.grid .simple-prod .title {
      order: unset;
      min-height: 0;
      max-height: none;
      margin: 0 0 2px 0;
      font-size: 13px;
      font-weight: 600;
      line-height: 16px;
    }
  
    .products.grid .simple-prod .info {
      order: 3;
      margin: 0 0 1px 0;
      min-height: 0;
      max-height: none;
      font-size: 11px;
      font-weight: 400;
      color: #737f8b;
    }
  
    .products.grid .simple-prod .data {
      display: flex;
      flex-direction: column;
      padding: 4px 8px 4px 8px;
    }
  
    .products.grid .simple-prod .img-wrap .bar .price {
      display: none;
    }
  
    .products.grid .simple-prod .pngm-teaser,
    .products.grid .simple-prod .user-image,
    .products.grid .simple-prod .isGrid.isDetail:not(.premium-mark) {
      display: none !important;
    }
  
    .products.grid .simple-prod .img-wrap .premium-mark.isGrid {
      display: inline-block !important;
      position: absolute;
      top: 6px;
      left: 6px;
      z-index: 4;
    }
  
    #search-items .paginate {
      margin: 6px 0 8px;
    }
  
    #search-main #recent-ads.onsearch,
    #recent-ads.onsearch {
      display: block !important;
      margin: 0 !important;
      padding: 6px 0 0 !important;
      border-top: 1px solid #e3e8ed !important;
      border-bottom: none !important;
    }
  
    body#search .container.primary {
      padding-bottom: 0 !important;
    }
  
    body#search footer.pngm-footer {
      padding-top: 8px;
    }
  
    #search-main #recent-ads.onsearch h2 {
      margin: 0 0 6px;
      font-size: 16px;
    }
  
    /* Mobile: same card width as home dashboard recently viewed (148px) */
    body#search #search-main #recent-ads.onsearch .nice-scroll-wrap {
      overflow: hidden;
      margin: 0;
      max-width: 100%;
      min-width: 0;
    }
  
    body#search #search-main #recent-ads.onsearch .products.grid,
    body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll {
      display: flex !important;
      flex-wrap: nowrap !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch;
      padding: 0 0 8px 0;
      margin: 0 !important;
      scroll-snap-type: x proximity;
    }
  
    body#search #search-main #recent-ads.onsearch .products.grid .simple-prod,
    body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll .simple-prod {
      flex: 0 0 148px !important;
      width: 148px !important;
      max-width: 148px !important;
      min-width: 148px !important;
      margin: 0 8px 0 0 !important;
      scroll-snap-align: start;
    }
  
    body#search #search-main #recent-ads.onsearch .nice-scroll-prev,
    body#search #search-main #recent-ads.onsearch .nice-scroll-next {
      display: none !important;
    }
  
    body#home .nice-scroll-prev,
    body#home .nice-scroll-next,
    body#item .nice-scroll-prev,
    body#item .nice-scroll-next,
    #search-premium-items .nice-scroll-prev,
    #search-premium-items .nice-scroll-next {
      display: none !important;
    }
  
    #navi-bar {
      z-index: 10050 !important;
      height: 53px !important;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      box-sizing: content-box;
    }

    /* Larger tap targets + labels on phone / home-screen app, ~30% shorter than 76px. */
    #navi-bar a {
      padding: 4px 2px 2px !important;
    }

    #navi-bar a > svg {
      width: 24px !important;
      height: 24px !important;
    }

    #navi-bar a > span {
      font-size: 12px !important;
      line-height: 1.1 !important;
      margin-top: 1px;
      font-weight: 500;
    }

    #navi-bar a.active > span {
      font-weight: 700 !important;
    }

    #navi-bar .counter {
      left: calc(50% - 28px) !important;
      top: 4px !important;
      height: 18px !important;
      min-width: 18px !important;
      line-height: 18px !important;
      font-size: 11px !important;
    }

    #navi-bar a.active:not(.post):after {
      width: 8px !important;
      height: 8px !important;
      top: 6px !important;
      left: calc(50% + 14px) !important;
    }

    body {
      padding-bottom: calc(53px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* One clean + control — green pill on the icon only */
    #navi-bar a.post {
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }

    #navi-bar a.post > svg {
      background: #006b24 !important;
      fill: #fff !important;
      border-radius: 999px !important;
      width: 45px !important;
      min-width: 45px !important;
      height: 30px !important;
      padding: 6px 10px !important;
      margin: 0 !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    #navi-bar a.post.active > svg,
    #navi-bar a.active.post > svg {
      background: #00551c !important;
      fill: #fff !important;
    }

    #navi-bar a.post:after,
    #navi-bar a.post.active:after {
      display: none !important;
    }

    #side-menu {
      bottom: calc(53px + env(safe-area-inset-bottom, 0px)) !important;
      z-index: 10120 !important;
    }
  
    #side-menu > .wrap {
      height: 100%;
      max-height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
      z-index: 1;
      isolation: isolate;
    }
  
    #side-menu > .wrap > .pngm-side-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  
    #side-menu > .wrap > .section.pngm-side-logout {
      flex: 0 0 auto;
      position: relative;
      z-index: 20;
      isolation: isolate;
      overflow: hidden;
      margin: 0;
      background: #fff;
      padding-bottom: 8px;
      box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.18);
    }
  
    #side-menu > .wrap > .section.pngm-side-logout a,
    #side-menu > .wrap > .section.pngm-side-logout a svg {
      z-index: 1;
      background: #fff;
    }
  
    /* Log out belongs on the account menu, not on Filter / Location overlays. */
    #side-menu.box-open > .wrap > .section.pngm-side-logout,
    body.pngm-filter-open #side-menu .pngm-side-logout {
      display: none !important;
    }
  
    #menu-cover.mobile-box {
      z-index: 10100;
    }
  
    .pngm-sheet-backdrop {
      bottom: 56px;
      z-index: 10110;
    }
  
    .pngm-sheet {
      bottom: 56px;
      z-index: 10111;
      max-height: calc(72vh - 8px);
      padding-bottom: 12px;
    }
  
    #search-main .top-bar h1 {
      font-size: 16px !important;
      font-weight: 600;
      line-height: 1.3;
      margin: 0 0 6px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
    .pngm-search-subcats {
      margin: 0 0 10px 0;
    }
  
    #search-quick-bar.pngm-search-toolbar,
    #search-quick-bar {
      display: flex !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      align-items: stretch !important;
      gap: 10px;
      margin: 0 0 12px 0;
      padding: 0;
    }
  
    #search-quick-bar .pngm-search-count {
      width: 100% !important;
      flex: 0 0 auto !important;
      margin: 0 !important;
    }
  
    #search-quick-bar .pngm-search-toolbar-actions {
      display: flex !important;
      width: 100% !important;
      margin: 0 !important;
      gap: 8px;
    }
  
    #search-quick-bar > div,
    #search-quick-bar .sort-type,
    #search-quick-bar .pngm-filter-btn {
      width: auto !important;
      flex: 1 1 0 !important;
      margin: 0 !important;
      min-width: 0;
    }
  
    #search-quick-bar .sort-type {
      display: inline-flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: stretch !important;
      gap: 0 !important;
      height: auto !important;
      min-height: 42px;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      overflow: visible !important;
      box-sizing: border-box;
    }
  
    #search-quick-bar .sort-type .pngm-sort-trigger {
      width: 100%;
      justify-content: flex-start;
      min-height: 42px;
      padding: 0 12px 0 10px;
    }
  
    #search-quick-bar .sort-type .pngm-sort-trigger-eyebrow {
      display: none;
    }
  
    #search-quick-bar .sort-type .pngm-sort-menu {
      left: 0;
      right: 0;
      min-width: 0;
      width: 100%;
    }
  
    #search-quick-bar .sort-type .pngm-sort-prefix,
    #search-quick-bar .sort-type .pngm-sort-label-full,
    #search-quick-bar .sort-type .pngm-sort-label-short {
      display: none !important;
    }
  
    #search-quick-bar .sort-type select,
    #search-quick-bar .sort-type select.orderSelect {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
  
    #search-main #open-search-filters,
    #search-quick-bar #open-search-filters,
    #search-quick-bar .pngm-filter-btn,
    #open-search-filters.isMobile,
    #open-search-filters {
      position: static !important;
      bottom: auto !important;
      right: auto !important;
      left: auto !important;
      display: inline-flex !important;
      flex: 1 1 0 !important;
      align-items: center;
      justify-content: center;
      width: auto !important;
      height: 42px;
      padding: 0 14px;
      margin: 0 !important;
      font-size: 13px;
      box-shadow: none;
      white-space: nowrap;
    }
  
    #latest-search,
    #search-quick-bar .alert,
    .save-search,
    #eps-save-search,
    .view-type {
      display: none !important;
    }
  
    body#item .basic {
      padding-top: 8px;
    }
  
    body#item .basic h1 {
      font-size: 18px;
      margin: 0 0 6px 0;
      line-height: 1.25;
    }
  
    body#item .basic .row.details,
    body#item .props h2,
    body#item .custom-fields,
    body#item #shortcuts,
    body#item .item-share,
    body#item .sticky-button,
    body#item .pngm-contact-message,
    body#item #seller .line3 .phone {
      display: none !important;
    }
  
    body#item .row.description {
      margin-top: 0;
      padding-top: 10px;
    }
  
    body#item .row.description h2,
    body#item .location h2 {
      margin: 0 0 6px 0;
      font-size: 14px;
    }
  
    body#item #item-main .description .text p,
    body#item #item-main .description .desc-text-raw p {
      margin: 0;
    }
  
    body#item #item-main .description .text p + p,
    body#item #item-main .description .desc-text-raw p + p {
      margin-top: 5px;
    }
  
    #item-image {
      margin-bottom: 4px;
    }
  
    #item-image .swiper-thumbs ul {
      margin-bottom: 4px !important;
    }
  
    #item-main .basic {
      margin: 0 0 6px 0;
    }
  
    #item-main .basic h1 {
      margin: 0 0 4px;
    }
  
    #item-main .basic .price {
      margin: 0 0 2px;
    }
  
    #item-main .basic .pngm-item-date,
    #item-main .basic .row.date {
      margin: 0;
      text-align: right;
    }
  
    #item-main .basic .pngm-item-date p,
    #item-main .basic .row.date p {
      margin: 0;
    }
  
    body#item .pngm-item-meta-bar {
      margin: 4px 0 8px;
      padding: 0;
      font-size: 12px;
    }
  
    body#item .location .row.address {
      margin: 0 0 4px;
      line-height: 1.35;
    }
  
    body#item .location .row.cords {
      display: none !important;
    }
  
    body#item .location .directions {
      margin-top: 2px;
      margin-bottom: 0;
    }
  
    body#item #item-side {
      margin-top: 4px;
    }
  
    body#item #item-side .master-button {
      margin-bottom: 8px;
    }
  
    body#item #seller {
      padding: 10px;
    }
  
    body#item #seller .line2 {
      font-size: 12px;
    }
  
    body.body-ua #user-menu a,
    #user-menu a {
      padding: 10px 12px;
      position: relative;
    }
  
    body.body-ua #user-menu a.public .ext,
    body.body-ua #user-menu a .ext,
    #user-menu a.public .ext,
    #user-menu a .ext {
      position: static;
      display: inline-block;
      margin-left: 6px;
      vertical-align: middle;
      width: 14px;
      height: 14px;
    }
  
    body.body-ua #user-menu a .counter,
    body.body-ua #user-menu a .im-user-account-count,
    #user-menu a .counter,
    #user-menu a .im-user-account-count {
      position: static;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 6px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      vertical-align: middle;
    }
  
    .pngm-item-gallery .swiper-zoom-container {
      width: 100%;
      height: 100%;
      touch-action: none;
    }
  
    body#publish input[placeholder="+"],
    body#item-post input[placeholder="+"],
    form[name="item"] input[placeholder="+"] {
      caret-color: #16202a;
    }
  }
  
  body.pngm-lg-open .lg-outer .lg-img-wrap {
    touch-action: none;
  }
  
  .navigator a.locate-me,
  .navigator a.locate-me:hover,
  .navigator a.locate-me .status,
  .navigator a.locate-me .status span {
    text-decoration: none;
  }
  
  .navigator a.locate-me .status span.failed,
  .navigator a.locate-me .status span.failed-unfound {
    color: #8a1f1f;
    font-weight: 500;
    text-decoration: none;
  }
  
  @media screen and (max-width: 490px) {
    header .logo,
    header .cmain > .logo {
      max-width: none !important;
    }
  }
  
  
  /* ==========================================================================
     Uppy avatar / photo modal ? full screen above the mobile nav
     ========================================================================== */
  
  .uppy-Dashboard--modal,
  .uppy-Root.uppy-Dashboard--modal {
    z-index: 10120 !important;
  }
  
  .uppy-Dashboard--modal .uppy-Dashboard-overlay {
    z-index: 0 !important;
    pointer-events: none !important;
  }
  
  .uppy-Dashboard--modal .uppy-Dashboard-inner {
    z-index: 2 !important;
    pointer-events: auto !important;
  }
  
  .uppy-Dashboard--modal .uppy-Dashboard-close {
    z-index: 3 !important;
    pointer-events: auto !important;
  }
  
  .uppy-Dashboard--modal[aria-hidden="true"] {
    display: none !important;
  }
  
  body.pngm-uppy-open {
    overflow: hidden !important;
  }
  
  body.pngm-uppy-open #navi-bar {
    display: none !important;
  }
  
  @media screen and (max-width: 767px) {
    .uppy-Dashboard--modal,
    .uppy-Root.uppy-Dashboard--modal {
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      transform: none !important;
    }
  
    .uppy-Dashboard--modal .uppy-Dashboard-inner {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      left: auto !important;
      width: 100% !important;
      max-width: none !important;
      height: 100% !important;
      max-height: none !important;
      margin: 0 !important;
      border-radius: 0 !important;
      transform: none !important;
      overflow: auto !important;
      box-sizing: border-box !important;
    }
  
    .uppy-Dashboard--modal .uppy-Dashboard-close {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      left: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 44px !important;
      height: 44px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 1px solid #d5dde5 !important;
      border-radius: 10px !important;
      background: #fff !important;
      color: #16202a !important;
      box-shadow: 0 2px 10px rgba(22, 34, 42, .18) !important;
      font-size: 28px !important;
      line-height: 1 !important;
      cursor: pointer !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
  
    .uppy-DashboardContent-bar {
      width: 100% !important;
      box-sizing: border-box !important;
      padding-right: 56px !important;
    }
  
    .uppy-StatusBar {
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
  
    .uppy-StatusBar-actionBtn--upload,
    .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
      min-height: 44px;
    }
  }
  
  
  /* ==========================================================================
     Mobile UX pack ? header, categories, search, filters, messenger, recaptcha
     ========================================================================== */
  
  header {
    background: #fff !important;
    box-shadow: 0 1px 0 #e3e8ed;
  }
  
  header .cmain > .logo img,
  header .logo img {
    background: transparent !important;
    mix-blend-mode: multiply;
  }
  
  .pngm-global-search {
    background: #fff !important;
  }
  
  #home-cat a.all {
    background: transparent !important;
    box-shadow: none !important;
  }
  
  #home-cat a > div,
  #home-cat a.all > div {
    border-radius: 50% !important;
    background: #e8f6ec !important;
    border-color: #dff0e4 !important;
    box-shadow: none !important;
  }
  
  #home-cat a.all > div svg.pngm-cat-all {
    color: #006b24;
  }
  
  .pngm-search-count.is-hidden,
  #search-main .top-bar.h1-legacy,
  #search-main .top-bar h1,
  header .cresults .data strong {
    display: none !important;
  }
  
  .pngm-search-subcats {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  
  .pngm-search-subcats-head {
    display: none !important;
  }
  
  /* Beat parent epsilon/css/responsive.css (max-width:360px) which sets
     height:60px + transform:scale(0.75) and breaks taps on Android/iPhone. */
  .g-recaptcha,
  [id^="anr_captcha_field_"],
  body.pre-account.pngm-auth .g-recaptcha,
  body.pngm-auth-v2 .g-recaptcha,
  div.g-recaptcha,
  div[id^="anr_captcha_field_"],
  #item-forms div.g-recaptcha {
    min-height: 78px !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
  
  .g-recaptcha > div,
  [id^="anr_captcha_field_"] > div,
  div.g-recaptcha > div,
  div[id^="anr_captcha_field_"] > div {
    transform: none !important;
    -webkit-transform: none !important;
    height: auto !important;
  }
  
  /* Badge only — never constrain challenge iframes (Android clips Verify). */
  .grecaptcha-badge {
    z-index: 2147483646 !important;
  }
  
  @media screen and (max-width: 480px) {
    body.pngm-auth-v2.pre-account.pngm-auth,
    body.pngm-auth-v2.pre-account.pngm-auth .content,
    body.pngm-posting,
    body.pngm-posting .content,
    body.pngm-auth-v2.pre-account.pngm-auth.html,
    html.pngm-recaptcha-challenge-open,
    body.pngm-recaptcha-challenge-open {
      overflow-x: visible !important;
    }
  }
  
  body.pngm-auth-v2 .pngm-auth-captcha {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  
  .pngm-post-captcha {
    overflow: visible !important;
    max-width: 100%;
  }
  
  .pngm-post-captcha .g-recaptcha {
    max-width: 100% !important;
    overflow: visible !important;
  }
  
  @media screen and (max-width: 767px) {
    body.pngm-auth-v2.pre-account.pngm-auth,
    body.pngm-auth-v2.pre-account.pngm-auth .content {
      overflow-x: visible !important;
    }
  
    body.pngm-auth-v2 .pngm-auth-captcha {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }
  }
  
  body.pngm-filter-open {
    overflow: hidden;
  }
  
  .im-threads .im-table-row {
    cursor: pointer;
  }
  
  @media screen and (max-width: 767px) {
    body {
      padding-top: 48px;
    }
  
    header {
      height: 48px !important;
      min-height: 48px !important;
      background: #fff !important;
      box-shadow: 0 1px 0 #e3e8ed !important;
    }
  
    header .cmain {
      position: relative;
      height: 48px;
      min-height: 48px;
      padding-top: 4px !important;
      padding-bottom: 4px !important;
      align-items: center;
    }
  
    header .menu.btn {
      position: relative;
      z-index: 2;
      width: 36px;
      height: 36px;
      margin-right: 0;
    }
  
    header .logo,
    header .cmain > .logo {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
      max-width: calc(100% - 112px) !important;
      height: 40px;
      margin: 0;
      padding: 0;
      transform: translate(-50%, -50%);
      flex: none !important;
    }
  
    header .cmain > .logo img,
    header .cmain > .logo svg,
    header .logo img {
      height: 32px !important;
      max-height: 32px !important;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: center center;
      mix-blend-mode: multiply;
      background: transparent !important;
    }
  
    header .cmain > .links {
      position: relative;
      z-index: 2;
      height: 36px;
    }
  
    .pngm-global-search {
      top: 48px !important;
      padding: 6px 12px 8px !important;
      background: #fff !important;
      border-bottom: 1px solid #e3e8ed;
      box-shadow: none !important;
    }
  
    .pngm-global-search .input-box,
    .global-search-submit {
      height: 40px;
    }
  
    .pngm-global-search input.pattern {
      height: 38px;
      line-height: 38px;
    }
  
    body:not(#home) {
      padding-top: 102px !important;
    }
  
    /* Post/edit listing: search strip is hidden — only clear the 48px header. */
    body#body-item-post.pngm-post-wizard,
    body.pngm-post-wizard.item-publish,
    body.pngm-post-wizard {
      padding-top: 52px !important;
    }
  
    body#body-item-post.pngm-post-wizard .pngm-post-wrap,
    body.pngm-post-wizard .pngm-post-wrap {
      padding-top: 8px;
      padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
  
    body#body-item-post.pngm-post-wizard .pngm-post-page-title,
    body.pngm-post-wizard .pngm-post-page-title {
      margin: 0 0 10px;
    }
  
    body#home:not(.pngm-sticky-search) {
      padding-top: 48px !important;
    }
  
    body#home.pngm-sticky-search {
      padding-top: 102px !important;
    }
  
    body#home.pngm-sticky-search .pngm-global-search.is-home {
      padding: 6px 12px 8px !important;
    }
  
    #home-cat a > div {
      width: 60px;
      height: 60px;
      background: #e8f6ec !important;
      border-radius: 50% !important;
    }
  
    #search-quick-bar.pngm-search-toolbar,
    #search-quick-bar {
      gap: 8px;
    }
  
    #search-quick-bar .sort-type,
    #search-quick-bar #open-search-filters,
    #search-quick-bar .pngm-filter-btn {
      flex: 1 1 0 !important;
      width: 50% !important;
      max-width: calc(50% - 4px) !important;
      min-width: 0 !important;
    }
  
    #search-quick-bar #open-search-filters,
    #search-quick-bar .pngm-filter-btn {
      width: 100% !important;
      height: 42px !important;
      box-sizing: border-box;
    }
  
    #search-quick-bar .sort-type .pngm-sort-trigger {
      width: 100%;
    }
  
    #search-quick-bar .sort-type select,
    #search-quick-bar .sort-type select.orderSelect {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
  
    /* Full-width filter drawer — no empty strip beside the panel */
    body.pngm-filter-open #side-menu,
    body.pngm-filter-open #side-menu > .wrap,
    body.pngm-filter-open #side-menu .box,
    body.pngm-filter-open #side-menu .box.filter {
      width: 100% !important;
      max-width: 100% !important;
      left: 0;
      right: 0;
    }
  
    body.pngm-filter-open #menu-cover {
      display: none !important;
    }
  
    /* Sit drawer above #navi-bar so Search is never clipped. */
    body.pngm-filter-open #side-menu {
      bottom: calc(56px + env(safe-area-inset-bottom, 0px));
      z-index: 10110;
    }
  
    body.pngm-filter-open #side-menu .box.filter {
      bottom: 0;
      overflow: hidden !important;
      display: flex;
      flex-direction: column;
      z-index: 10;
    }
  
    body.pngm-filter-open #side-menu .box.filter .picker.pattern {
      position: relative;
      z-index: 6;
    }
  
    body.pngm-filter-open #side-menu .box.filter .picker.pattern .results {
      position: static;
      z-index: 12;
      max-height: 220px;
      width: 100%;
      margin-top: 6px;
    }
  
    body.pngm-filter-open #side-menu .box.filter .nav {
      flex: 0 0 auto;
    }
  
    body.pngm-filter-open #side-menu .box.filter .section.filter-menu,
    body.pngm-filter-open #side-menu .box.filter > .section {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding-bottom: 0;
    }
  
    body.pngm-filter-open #side-menu .box.filter .section > .wrap {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
    }
  
    body.pngm-filter-open #side-menu form.search-side-form.pngm-filter-laid-out {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
    }
  
    body.pngm-filter-open #side-menu .pngm-filter-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
    }
  
    body.pngm-filter-open #side-menu .box.filter .row.buttons.srch,
    #side-menu .box .section.filter-menu .row.buttons.srch,
    #side-menu .filter-menu .row.buttons.srch {
      position: static !important;
      flex: 0 0 auto;
      bottom: auto !important;
      left: 0;
      z-index: 5;
      width: 100%;
      margin: 0 !important;
      padding: 10px 0 12px 0 !important;
      background: #fff;
      box-shadow: 0 -8px 16px rgba(255, 255, 255, .95);
    }
  
    #side-menu .filter-menu .row.buttons.srch .btn {
      width: 100%;
      height: 44px;
    }
  
    /* Vehicle attribute radios / selects: room to tap, like the original filter fields */
    body.pngm-filter-open #side-menu #atr-search .control-group,
    body.pngm-filter-open #side-menu [id$="atr-search"] .control-group {
      margin-bottom: 18px;
    }
  
    body.pngm-filter-open #side-menu #atr-search ul.atr-ul li,
    body.pngm-filter-open #side-menu [id$="atr-search"] ul.atr-ul li,
    body.pngm-filter-open #side-menu .sidebar-hooks #atr-search ul.atr-ul li {
      width: 100%;
      margin: 0 0 10px 0;
    }
  
    body.pngm-filter-open #side-menu .atr-input-box.atr-radio,
    body.pngm-filter-open #side-menu .atr-input-box.atr-checkbox {
      margin: 0 0 12px 0;
      min-height: 28px;
    }
  
    body.pngm-filter-open #side-menu .atr-input-box.atr-radio input[type="radio"] + label,
    body.pngm-filter-open #side-menu .atr-input-box.atr-checkbox input[type="checkbox"] + label {
      font-size: 15px;
      line-height: 22px;
      padding: 4px 0;
    }
  
    body.pngm-filter-open #side-menu [id$="search-category-box"],
    body.pngm-filter-open #side-menu #search-category-box {
      display: none !important;
    }
  
    body.body-ua .container.primary {
      gap: 6px;
      margin-bottom: 12px;
    }
  
    body.body-ua #user-main {
      padding: 8px 12px 16px;
    }
  
    /* Telegram-style chat: message list scrolls; composer stays pinned above bottom nav. */
    body.im-chat-page {
      overflow: hidden !important;
      height: 100dvh;
    }
  
    body.im-chat-page footer,
    body.im-chat-page #footer {
      display: none !important;
    }
  
    body.im-chat-page #user-menu,
    body.im-chat-page ul.breadcrumb,
    body.im-chat-page #breadcrumbs {
      display: none !important;
    }
  
    /* Shell = viewport - site header (--pngm-chat-top) - bottom nav
       (--pngm-chat-navh). --pngm-kb is only non-zero on browsers that shrink the
       visual viewport but NOT the layout viewport (iOS Safari); Android Chrome
       shrinks 100dvh itself via interactive-widget=resizes-content. */
    /* --pngm-chat-navh is measured from #navi-bar, whose own padding already
       holds env(safe-area-inset-bottom). Subtracting the inset a second time
       left the composer / blocked notice clipped above a blank strip on the
       iPhone home-screen app. The inset is 0 on Android and desktop. */
    body.im-chat-page .container.primary {
      display: flex;
      flex-direction: column;
      height: calc(100dvh - var(--pngm-chat-top, 102px) - var(--pngm-chat-navh, 56px) - var(--pngm-kb, 0px));
      max-height: calc(100dvh - var(--pngm-chat-top, 102px) - var(--pngm-chat-navh, 56px) - var(--pngm-kb, 0px));
      margin-bottom: 0 !important;
      padding-bottom: 0;
      overflow: hidden;
    }
  
    /* Keyboard open: hand the bottom strip to the composer. */
    html.pngm-kb-open body.im-chat-page #navi-bar,
    html.pngm-kb-open body.im-chat-page #debug-mode,
    body.im-chat-page #debug-mode {
      display: none !important;
    }
  
    html.pngm-kb-open body.im-chat-page .container.primary {
      height: calc(100dvh - var(--pngm-chat-top, 102px) - var(--pngm-kb, 0px)) !important;
      max-height: calc(100dvh - var(--pngm-chat-top, 102px) - var(--pngm-kb, 0px)) !important;
    }

    /* iOS: the page itself is pinned to the visual viewport (see pngm-kb-ios),
       so the shell fills that visible area. Subtracting --pngm-kb again would
       leave a gap under the composer and hide the thread header. */
    /* The body is pinned, so the root is what Safari paints around it. With
       no background here Safari tints that area with theme-color (brand
       green); keep it white so a stray pan can never flash green under the
       composer. */
    html.pngm-kb-ios {
      height: 100%;
      background: #fff;
    }

    html.pngm-kb-ios body.im-chat-page {
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      overflow: hidden !important;
      background: #fff;
    }

    html.pngm-kb-ios body.im-chat-page .container.primary {
      height: calc(var(--pngm-vv-h, 100dvh) - var(--pngm-chat-top, 102px)) !important;
      max-height: calc(var(--pngm-vv-h, 100dvh) - var(--pngm-chat-top, 102px)) !important;
    }
  
    html.pngm-kb-open body.im-chat-page .pngm-im-board-pane {
      margin-bottom: 0 !important;
    }
  
    html.pngm-kb-open body.im-chat-page .pngm-composer-dock,
    html.pngm-kb-open body.im-chat-page #im-message-form {
      z-index: 20 !important;
    }
  
    body.im-chat-page #user-main,
    body.im-chat-page #user-main .user-custom-box {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      width: 100%;
      float: none;
      background: transparent !important;
      border-radius: 0 !important;
    }
  
    body.im-chat-page #user-main {
      padding: 8px 12px 0;
    }
  
    body.im-chat-page .pngm-im-split {
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      gap: 0 !important;
    }
  
    body.im-chat-page .pngm-im-board-pane {
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      margin: 0 0 8px !important;
      padding: 12px 12px 0 !important;
      border-radius: 12px !important;
      overflow: hidden;
      background: #fff;
    }
  
    body.im-chat-page .pngm-im-board-pane > .im-file-messages {
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0 !important;
      height: 100% !important;
      overflow: hidden !important;
      background: transparent !important;
    }
  
    body.im-chat-page .pngm-composer-dock,
    body.im-chat-page .pngm-im-blocked-dock,
    body.im-chat-page .pngm-im-blocked-notice,
    body.im-chat-page .pngm-im-mobile-back,
    body.im-chat-page .im-alt-head,
    body.im-chat-page .im-row.im-item-context,
    body.im-chat-page .im-error-list {
      flex: 0 0 auto;
    }
  
    /* Height comes from JS (measured against the visible viewport) so the list
       scrolls and the composer never ends up under the keyboard or bottom nav.
       Do not add height/max-height here: !important would beat that inline value. */
    body.im-chat-page .im-table.im-messages {
      float: none !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-x: hidden;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      margin: 0 !important;
    }
  
    body.im-chat-page #im-message-form {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      z-index: 5;
      flex: 0 0 auto !important;
      flex-shrink: 0 !important;
      float: none !important;
      width: 100% !important;
      max-width: none;
      margin: 0 !important;
      padding: 10px 12px 8px !important;
      background: #fff;
      border: 0;
      border-top: 0 !important;
      border-radius: 0 !important;
      box-shadow: none;
      box-sizing: border-box;
      display: flex !important;
      flex-wrap: nowrap !important;
      flex-direction: row !important;
      align-items: flex-end !important;
      align-content: flex-end;
      gap: 8px !important;
      overflow: visible !important;
      height: auto !important;
      min-height: 0 !important;
    }
  
    body.im-chat-page #im-message-form img.im-logged-user-img {
      display: none !important;
    }
  
    body.im-chat-page #im-message-form .im-file-list,
    body.im-chat-page #im-message-form #im-file-list {
      display: flex !important;
      flex-wrap: wrap;
      gap: 6px;
      flex: 0 0 100% !important;
      order: 15 !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      float: none !important;
    }
  
    body.im-chat-page #im-message-form .im-file-list[hidden],
    body.im-chat-page #im-message-form #im-file-list[hidden] {
      display: none !important;
    }
  
    body.im-chat-page #im-message-form .im-send-hint,
    body.im-chat-page #im-message-form .pngm-im-send-hint,
    body.im-chat-page #im-message-form > .im-send-hint {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      visibility: hidden !important;
    }
  
    body.im-chat-page .pngm-composer-dock {
      display: flex !important;
      flex-direction: column !important;
      flex: 0 0 auto !important;
      width: calc(100% + 24px) !important;
      max-width: none;
      margin: 0 -12px 0 !important;
      padding: 0 !important;
      background: #fff;
      border-top: 1px solid #eef1f4;
      border-radius: 0 0 12px 12px !important;
      box-sizing: border-box;
      overflow: visible !important;
      z-index: 5;
    }
  
    /* Mobile hint: short text, and never while the keyboard eats the screen. */
    body.im-chat-page #pngm-composer-tip.pngm-composer-tip,
    body.im-chat-page .pngm-composer-dock > #pngm-composer-tip {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      color: #6b7785 !important;
      -webkit-text-fill-color: #6b7785 !important;
      background: transparent !important;
      background-color: transparent !important;
      font-size: 12px !important;
      line-height: 16px !important;
      font-weight: 500 !important;
      padding: 4px 12px 8px !important;
      margin: 0 !important;
      width: 100% !important;
      min-height: 0 !important;
      height: auto !important;
      overflow: visible !important;
      position: relative !important;
      z-index: 6 !important;
      order: 20;
      flex: 0 0 auto !important;
    }
  
    html.pngm-kb-open body.im-chat-page #pngm-composer-tip.pngm-composer-tip,
    html.pngm-kb-open body.im-chat-page .pngm-composer-dock > #pngm-composer-tip {
      display: none !important;
      height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
    }
  
    body.im-chat-page .pngm-composer-dock > #im-message-form {
      width: 100% !important;
      margin: 0 !important;
      border-top: 0 !important;
      border-radius: 0 !important;
      order: 10;
    }
  
    /* Mobile: one row — attach | input | send (icon only) */
    body.im-chat-page #im-message,
    body.im-chat-page #im-message-form .im-textarea {
      flex: 1 1 auto !important;
      order: 2 !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 100px !important;
      margin: 0 !important;
      padding: 11px 14px !important;
      border-radius: 22px !important;
      background: #f4f6f8 !important;
      border: 1px solid #e6eaf0 !important;
      box-shadow: none !important;
      font-size: 15px !important;
      line-height: 20px !important;
    }
  
    body.im-chat-page #im-message-form .im-attachment,
    body.im-chat-page #im-message-form .pngm-im-attach-btn {
      position: static !important;
      top: auto !important;
      right: auto !important;
      left: auto !important;
      float: none !important;
      order: 1 !important;
      flex: 0 0 40px !important;
      width: 40px !important;
      height: 44px !important;
      margin: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 0 !important;
      background: transparent !important;
      padding: 0 !important;
      z-index: 2 !important;
      pointer-events: auto !important;
    }
  
    body.im-chat-page #im-message-form #im-file,
    body.im-chat-page #im-message-form input.im-file,
    body.im-chat-page #im-message-form .pngm-im-file-input {
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      width: 0.1px !important;
      height: 0.1px !important;
      opacity: 0.01 !important;
      pointer-events: auto !important;
      z-index: 0 !important;
      overflow: hidden !important;
    }
  
    body.im-chat-page #im-message-form .im-attachment .im-att-box,
    body.im-chat-page #im-message-form .im-attachment .im-wrap,
    body.im-chat-page #im-message-form .im-attachment .im-status {
      float: none !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      position: static !important;
    }
  
    body.im-chat-page #im-message-form .im-attachment .im-def-text,
    body.im-chat-page #im-message-form .im-attachment .im-wrap span {
      display: none !important;
    }
  
    body.im-chat-page #im-message-form .im-attachment i,
    body.im-chat-page #im-message-form .pngm-im-attach-btn i {
      margin: 0 !important;
      font-size: 18px !important;
      color: #6b7785 !important;
    }
  
    body.im-chat-page #im-message-form > button.im-button-green.pngm-im-send,
    body.im-chat-page #im-message-form .pngm-im-send {
      display: inline-flex !important;
      position: static !important;
      top: auto !important;
      right: auto !important;
      float: none !important;
      order: 3 !important;
      flex: 0 0 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 44px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: #2e7d32 !important;
      color: #fff !important;
      box-shadow: none !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
      z-index: 5 !important;
      pointer-events: auto !important;
    }
  
    body.im-chat-page #im-message-form .pngm-im-send span {
      display: none !important;
    }
  
    body.im-chat-page #im-message-form .pngm-im-send i {
      margin: 0 !important;
      font-size: 16px !important;
      line-height: 1 !important;
      color: #fff !important;
    }
  
    body.im-chat-page #im-message-form button.im-button-alt {
      display: none !important;
    }
  
    body.im-chat-page .im-alt-head {
      margin: 0 0 8px 0 !important;
    }
  
    body.im-chat-page .im-alt-head .im-head2 {
      font-size: 22px;
      line-height: 26px;
    }
  
    body .im-threads .im-table-row {
      position: relative;
      padding: 12px 8px !important;
      margin: 0 !important;
    }
  }
  
  @media screen and (min-width: 768px) {
    /* Desktop chat: height matches sidebar content (no empty stretch below Logout) */
    body.im-chat-page {
      overflow: auto !important;
      height: auto !important;
      max-height: none !important;
    }
  
    body.im-chat-page footer,
    body.im-chat-page #footer {
      display: block !important;
    }
  
    body.im-chat-page ul.breadcrumb,
    body.im-chat-page #breadcrumbs {
      display: none !important;
    }
  
    body.im-chat-page .container.primary.pngm-ua-shell,
    body.im-chat-page .container.primary {
      display: grid !important;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 20px;
      align-items: start !important;
      height: auto !important;
      max-height: none !important;
      margin-top: 16px !important;
      margin-bottom: 36px !important;
      overflow: visible !important;
    }
  
    body.im-chat-page #user-menu,
    body.im-chat-page #user-menu.pngm-ua-sidebar {
      display: flex !important;
      float: none !important;
      width: 260px !important;
      max-width: 260px !important;
      flex: none !important;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      margin: 0 !important;
      align-self: start !important;
    }
  
    body.im-chat-page #user-main,
    body.im-chat-page #user-main.pngm-ua-main,
    body.im-chat-page #user-main.pngm-ua-panel,
    body.im-chat-page #user-main.pngm-messages-panel {
      display: flex !important;
      flex-direction: column !important;
      float: none !important;
      width: auto !important;
      max-width: none !important;
      flex: 1 1 auto !important;
      min-width: 0;
      min-height: 0 !important;
      /* Height synced to sidebar via JS (--pngm-im-shell-h) */
      height: var(--pngm-im-shell-h, auto) !important;
      max-height: var(--pngm-im-shell-h, none) !important;
      overflow: hidden !important;
      margin: 0 !important;
      align-self: start !important;
      padding: 0 !important;
      box-sizing: border-box;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }
  
    body.im-chat-page #user-main .user-custom-box {
      display: flex !important;
      flex-direction: column !important;
      float: none !important;
      width: 100% !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
      padding: 0 !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    /* Inbox (im-threads) wraps the split in .pngm-im-inbox — that wrapper must
       fill #user-main or height:100% on the split fails and the list is clipped.
       Do not target bare .pngm-im: on open threads that class sits ON the split. */
    body.im-chat-page #user-main .pngm-im-inbox,
    body.im-chat-page #user-main .im-html.pngm-im-inbox {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
      box-sizing: border-box;
    }

    body.im-chat-page #user-main .pngm-im-inbox > .pngm-im-split {
      flex: 1 1 auto !important;
      min-height: 0 !important;
    }

    body.im-chat-page .pngm-im-split {
      display: grid !important;
      grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
      gap: 20px !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
      align-items: stretch !important;
    }
  
    body.im-chat-page .pngm-im-list-pane,
    body.im-chat-page .pngm-im-board-pane {
      display: flex !important;
      flex-direction: column !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
      float: none !important;
    }
  
    body.im-chat-page .pngm-im-list-pane {
      background: #fff;
      border: 1px solid #e6eaf0;
      border-radius: 16px;
    }
  
    body.im-chat-page .pngm-im-list-head,
    body.im-chat-page .pngm-im-search {
      flex: 0 0 auto;
    }
  
    body.im-chat-page .pngm-im-convo-list {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }
  
    body.im-chat-page .pngm-im-board-pane {
      background: #fff;
      border: 1px solid #e6eaf0;
      border-radius: 16px;
      padding: 20px 20px 12px;
      box-sizing: border-box;
    }
  
    body.im-chat-page .pngm-im-board-pane > .im-file-messages,
    body.im-chat-page .im-file-messages {
      display: flex !important;
      flex-direction: column !important;
      float: none !important;
      width: 100% !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }
  
    body.im-chat-page .im-alt-head,
    body.im-chat-page .im-row.im-item-context,
    body.im-chat-page .pngm-im-listing-card,
    body.im-chat-page .im-error-list,
    body.im-chat-page .pngm-im-mobile-back,
    body.im-chat-page .im-row.im-offer {
      float: none !important;
      flex: 0 0 auto !important;
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  
    body.im-chat-page .im-alt-head {
      display: flow-root !important;
      overflow: hidden;
      margin: 0 0 10px 0 !important;
    }
  
    body.im-chat-page .im-alt-head .im-head2,
    body.im-chat-page .im-alt-head .im-subhead2 {
      float: none !important;
      width: 100% !important;
    }
  
    body.im-chat-page .im-row.im-item-context,
    body.im-chat-page .pngm-im-listing-card {
      margin: 0 0 12px 0 !important;
    }
  
    /* History fills leftover height and scrolls; short chats hug the composer */
    body.im-chat-page .im-table.im-messages {
      float: none !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      min-height: 0 !important;
      max-height: none !important;
      height: auto !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      margin: 0 !important;
    }
  
    body.im-chat-page .im-table.im-messages::before {
      content: '';
      flex: 1 1 auto;
      min-height: 0;
      order: -1;
    }
  
    body.im-chat-page .im-table.im-messages > .im-show-older,
    body.im-chat-page .im-table.im-messages > .im-row:not(.im-table-row) {
      flex: 0 0 auto !important;
      float: none !important;
      width: 100% !important;
      clear: both !important;
    }
  
    body.im-chat-page .pngm-composer-dock {
      display: flex !important;
      flex-direction: column !important;
      flex: 0 0 auto !important;
      width: 100% !important;
      margin: 8px 0 0 !important;
      padding: 0 !important;
      float: none !important;
      position: relative !important;
      z-index: 5;
      border-top: 1px solid #eef1f4;
      background: #fff;
    }

    body.im-chat-page .pngm-composer-dock.pngm-im-blocked-dock {
      z-index: 6;
      margin: 8px -12px 0 !important;
      width: calc(100% + 24px) !important;
      /* Sits above the bottom nav, which already carries the safe-area inset. */
      padding: 10px 12px 12px !important;
      border-top: 1px solid #f0d0d0;
      background: #fff7f7;
    }

    body.im-chat-page .pngm-im-blocked-notice {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
  
    body.im-chat-page #im-message-form {
      position: relative !important;
      left: auto;
      right: auto;
      bottom: auto;
      z-index: 2;
      float: none !important;
      width: 100% !important;
      max-width: 100%;
      margin: 0 !important;
      padding: 10px 4px 6px !important;
      background: #fff;
      box-shadow: none;
      box-sizing: border-box;
      display: flex !important;
      flex-wrap: nowrap !important;
      flex-direction: row !important;
      align-items: flex-end !important;
      gap: 8px !important;
    }
  
    body.im-chat-page #im-message-form img.im-logged-user-img {
      display: none !important;
    }
  
    body.im-chat-page #im-message,
    body.im-chat-page #im-message-form .im-textarea {
      flex: 1 1 auto !important;
      order: 2 !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 120px !important;
      margin: 0 !important;
      padding: 12px 14px !important;
      border: 1px solid #e1e6ec !important;
      border-radius: 12px !important;
      background: #fff !important;
      box-shadow: none !important;
      resize: none;
      box-sizing: border-box;
      font-size: 14px !important;
      line-height: 20px !important;
    }
  
    body.im-chat-page #im-message-form .im-attachment,
    body.im-chat-page #im-message-form .pngm-im-attach-btn {
      position: static !important;
      top: auto !important;
      right: auto !important;
      left: auto !important;
      float: none !important;
      order: 1 !important;
      flex: 0 0 44px !important;
      width: 44px !important;
      height: 44px !important;
      margin: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 0 !important;
      background: transparent !important;
      padding: 0 !important;
    }
  
    body.im-chat-page #im-message-form #im-file,
    body.im-chat-page #im-message-form input.im-file,
    body.im-chat-page #im-message-form .pngm-im-file-input {
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      width: 0.1px !important;
      height: 0.1px !important;
      opacity: 0.01 !important;
      pointer-events: auto !important;
      z-index: 0 !important;
      overflow: hidden !important;
    }
  
    body.im-chat-page #im-message-form .im-attachment .im-att-box,
    body.im-chat-page #im-message-form .im-attachment .im-wrap,
    body.im-chat-page #im-message-form .im-attachment .im-status {
      float: none !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      position: static !important;
    }
  
    body.im-chat-page #im-message-form .im-attachment .im-def-text,
    body.im-chat-page #im-message-form .im-attachment .im-wrap span {
      display: none !important;
    }
  
    body.im-chat-page #im-message-form .im-attachment i,
    body.im-chat-page #im-message-form .pngm-im-attach-btn i {
      margin: 0 !important;
      font-size: 18px !important;
      color: #6b7785 !important;
    }
  
    body.im-chat-page #im-message-form > button.im-button-green:not(.im-button-alt),
    body.im-chat-page #im-message-form .pngm-im-send {
      display: inline-flex !important;
      position: static !important;
      top: auto !important;
      right: auto !important;
      float: none !important;
      order: 3 !important;
      flex: 0 0 auto !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px;
      height: 44px !important;
      min-width: 96px !important;
      margin: 0 !important;
      padding: 0 16px !important;
      border: 0 !important;
      border-radius: 12px !important;
      background: #2e7d32 !important;
      color: #fff !important;
      font-weight: 700 !important;
      box-shadow: none !important;
    }
  
    body.im-chat-page #im-message-form button.im-button-alt {
      display: none !important;
    }
  
    body.im-chat-page .pngm-composer-dock > #pngm-composer-tip,
    body.im-chat-page #pngm-composer-tip.pngm-composer-tip {
      display: block !important;
      flex: 0 0 auto !important;
      margin: 0 !important;
      padding: 4px 4px 6px !important;
      font-size: 12px !important;
      color: #6b7785 !important;
    }
  }
  
  
  /* ==========================================================================
     Compact pattern autocomplete + icon gutter fix
     Side-menu #side-menu .box .section a was overriding left padding, so FA
     glyphs sat on top of the first character ("strange dots"), and also
     inflated listing rows in Filter results vs the main-page search dropdown.
     ========================================================================== */
  
  .picker.pattern .results .row {
    margin: 2px 0 4px 0;
  }
  
  .picker.pattern .results .lead {
    padding: 4px 12px 2px;
    font-size: 12px;
    line-height: 14px;
  }
  
  .picker.pattern .option {
    padding: 5px 12px 5px 34px !important;
    font-size: 14px;
    line-height: 16px;
  }
  
  .picker.pattern .results a:after {
    left: 12px;
    top: calc(50% - 7px);
    font-size: 13px;
    height: 14px;
  }
  
  #side-menu .box.filter .picker.pattern .option,
  #side-menu .box.filter .picker.pattern .results a.option {
    margin: 0 !important;
    padding: 5px 12px 5px 34px !important;
    line-height: 16px !important;
  }
  
  /* Listing rows must not inherit Font Awesome typeahead glyphs */
  .picker.pattern .results a.pngmarket-listing-option:after,
  .picker.pattern .results a.pngmarket-view-all:after {
    content: none !important;
    display: none !important;
  }
  
  /* Match main-page search density (compact listing rows) */
  .picker.pattern .results .pngmarket-listings {
    margin: 0;
    padding: 0;
  }
  
  .picker.pattern .results .pngmarket-listings > .lead {
    padding: 6px 12px 4px !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700;
  }
  
  .picker.pattern .results a.pngmarket-listing-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    line-height: 1.25 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
  }
  
  .picker.pattern .results .pngmarket-listing-image,
  .picker.pattern .results a.pngmarket-listing-option .pngmarket-listing-image {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 6px !important;
  }
  
  .picker.pattern .results .pngmarket-listing-content {
    gap: 1px !important;
  }
  
  .picker.pattern .results .pngmarket-listing-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
  
  .picker.pattern .results .pngmarket-listing-category,
  .picker.pattern .results .pngmarket-listing-meta {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  
  .picker.pattern .results .pngmarket-listing-arrow {
    font-size: 10px !important;
  }
  
  .picker.pattern .results a.pngmarket-view-all {
    margin: 6px 10px 8px !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    font-size: 12px !important;
  }
  
  /* Filter drawer: beat #side-menu .box .section a padding/margin */
  #side-menu .box.filter .picker.pattern .results a.pngmarket-listing-option,
  body.pngm-filter-open #side-menu .box.filter .picker.pattern .results a.pngmarket-listing-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    line-height: 1.25 !important;
    width: 100% !important;
  }
  
  #side-menu .box.filter .picker.pattern .results a.pngmarket-view-all,
  body.pngm-filter-open #side-menu .box.filter .picker.pattern .results a.pngmarket-view-all {
    margin: 6px 10px 8px !important;
    padding: 8px 12px !important;
    line-height: 1.25 !important;
  }
  
  #side-menu .box.filter .picker.pattern .results .pngmarket-listing-image,
  body.pngm-filter-open #side-menu .box.filter .picker.pattern .results .pngmarket-listing-image {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
  
  body.pngm-filter-open #side-menu .box.filter .picker.pattern .results {
    max-height: min(42vh, 280px);
    padding: 2px 0 6px;
  }
  
  /* ==========================================================================
     Phase 2 ? Homepage layout: wider container, design cards, category tiles
     Keep original home-hero.png (do not replace with design collage).
     ========================================================================== */
  
  /* Wider content area (was 1080px ? felt too narrow on desktop). */
  .container,
  header .container,
  body#home > .content > section > .container,
  .home-search > .container.pngm-home-banner,
  .pngm-ds-container {
    max-width: 1280px !important;
  }
  
  @media screen and (min-width: 1400px) {
    .container,
    header .container,
    body#home > .content > section > .container,
    .home-search > .container.pngm-home-banner {
      max-width: 1360px !important;
    }
  }
  
  /*
   * Parent #body-banner is sized for a 1120px content column. Our layout is
   * 1280/1360px, so those fixed left/right strips overlapped the page edges and
   * stole clicks/hover on logo, search, categories, and outer listing cards.
   */
  #body-banner,
  #body-banner.bleft,
  #body-banner.bright {
    width: calc((100% - 1280px) / 2) !important;
    max-width: calc((100% - 1280px) / 2) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  
  #body-banner.bright {
    left: auto !important;
    right: 0 !important;
  }
  
  #body-banner:not(.blank) > *,
  #body-banner .banner-theme,
  #body-banner a,
  #body-banner img,
  #body-banner iframe,
  #body-banner ins {
    pointer-events: auto !important;
  }
  
  #body-banner.blank,
  #body-banner:empty,
  #body-banner:not(:has(img)):not(:has(iframe)):not(:has(ins)):not(:has(.banner-theme)):not(:has(a)) {
    display: none !important;
    pointer-events: none !important;
  }
  
  @media screen and (min-width: 1400px) {
    #body-banner,
    #body-banner.bleft,
    #body-banner.bright {
      width: calc((100% - 1360px) / 2) !important;
      max-width: calc((100% - 1360px) / 2) !important;
    }
  }
  
  @media screen and (max-width: 1320px) {
    #body-banner,
    #body-banner.bleft,
    #body-banner.bright {
      display: none !important;
      pointer-events: none !important;
    }
  }
  
  
  /* --- Category tiles: rounded square cards (design), not green circles --- */
  #home-cat a > div,
  #home-cat a.all > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 4px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid #e3e8ed !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06) !important;
  }
  
  #home-cat .pngm-cat-item {
    width: 108px;
  }
  
  #home-cat a > div img,
  #home-cat a > div svg,
  #home-cat a > div img.pngm-cat-svg {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain;
  }
  
  /* Photographic category covers fill the rounded tile */
  #home-cat a > div img.pngm-cat-cover {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    border-radius: 12px;
  }
  
  @media screen and (max-width: 767px) {
    #home-cat a > div img.pngm-cat-cover {
      width: 52px !important;
      height: 52px !important;
      max-width: 52px !important;
      max-height: 52px !important;
    }
  }
  
  #home-cat a > div i.fas {
    font-size: 28px;
    color: #006b24;
  }
  
  #home-cat a.all > div svg.pngm-cat-all {
    color: #006b24;
    width: 32px;
    height: 32px;
  }
  
  #home-cat a > h3 span {
    color: #16202a !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }
  
  @media screen and (min-width: 1081px) {
    #home-cat > .pngm-cat-item > a:hover > div {
      border-color: #cfd7df !important;
      box-shadow: 0 4px 14px rgba(16, 24, 40, .1) !important;
      transform: translateY(-1px);
    }
  }
  
  
  /* --- Listing cards: match design (title ? green price ? location ? meta ? tags) --- */
  .products.grid .simple-prod .img-wrap .bar {
    display: none !important;
  }
  
  .products.grid .simple-prod .user-image {
    display: none !important;
  }
  
  .products.grid .simple-prod .pngm-photo-count {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    pointer-events: none;
  }
  
  .products.grid .simple-prod .pngm-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
  }
  
  .products.grid .simple-prod .premium-mark.isGrid {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    display: inline-block !important;
    padding: 3px 8px;
    border-radius: 4px;
    background: #ffe082;
    color: #5c4500;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  
  /* Never show a second Premium label in the card body */
  .products.grid .simple-prod .data .premium-mark,
  .products.grid .simple-prod .pngm-premium-inline {
    display: none !important;
  }
  
  .products.grid .simple-prod .simple-wrap {
    border-radius: 12px !important;
    border-color: #e3e8ed !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  }
  
  .products.grid .simple-prod .img-wrap,
  .products.grid .simple-prod.tall .img-wrap,
  .products.grid .simple-prod.verytall .img-wrap,
  .products.grid .simple-prod.wide .img-wrap,
  body#home #premium-items .simple-prod .img-wrap {
    padding-top: 75% !important; /* ~4:3 like design */
  }
  
  .products.grid .simple-prod .data {
    padding: 10px 12px 12px !important;
  }
  
  /* Price first, then title */
  .products.grid .simple-prod .pngm-card-title-row {
    display: block !important;
    order: 2 !important;
    margin: 0 0 4px 0 !important;
  }
  
  .products.grid .simple-prod .title,
  body#home #latest-items .simple-prod .title,
  body#home #location-items .simple-prod .title,
  body#home #premium-items .simple-prod .title,
  body#home #favorite-items .simple-prod .title,
  body#home #recent-items .simple-prod .title,
  #search-items .products.grid .simple-prod .title,
  .products.grid .simple-prod a.title {
    order: unset !important;
    display: block !important;
    margin: 0 !important;
    min-height: 0 !important;
    max-height: 2.6em !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: #111827 !important;
    text-decoration: none !important;
    white-space: normal !important;
    text-overflow: unset !important;
  }
  
  .products.grid .simple-prod:hover .title,
  .products.grid .simple-prod a.title:hover {
    color: #111827 !important;
  }
  
  /* Green price ABOVE title */
  .products.grid .simple-prod .pngm-card-price,
  .products.grid .simple-prod .pngm-card-price span {
    order: 1 !important;
    margin: 0 0 4px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #006b24 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }
  
  /* Location */
  .products.grid .simple-prod .info {
    order: 3 !important;
    margin: 0 0 3px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #6b7785 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }
  
  /* Date ? category */
  .products.grid .simple-prod .extra,
  .products.grid .simple-prod .pngm-card-meta {
    order: 4 !important;
    display: block !important;
    margin: 0 0 2px 0 !important;
    max-height: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #6b7785 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }
  
  .products.grid .simple-prod .extra span + span:before,
  .products.grid .simple-prod .pngm-card-meta span + span:before {
    content: " ? ";
    color: #9aa3ad;
  }
  
  /* Condition ? transaction */
  .products.grid .simple-prod .pngm-card-tags {
    order: 5 !important;
    display: block;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #6b7785;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
  }
  
  .products.grid .simple-prod .pngm-card-tags span + span:before {
    content: " ? ";
    color: #9aa3ad;
  }
  
  .products.grid .simple-prod .data {
    padding: 8px 10px 10px !important;
  }
  
  .products.grid .simple-prod .pngm-card-tags span + span:before {
    content: " ? ";
    color: #9aa3ad;
  }
  
  
  /* Home grid: up to 6 cards per row on wide screens */
  @media screen and (min-width: 1200px) {
    body#home .products.grid:not(.nice-scroll) .simple-prod,
    body#home .products.grid:not(.nice-scroll) .simple-prod.pngm-card {
      width: calc(16.666% - 12px) !important;
      margin: 0 6px 16px 6px !important;
    }
  }
  
  @media screen and (min-width: 900px) and (max-width: 1199px) {
    body#home .products.grid:not(.nice-scroll) .simple-prod,
    body#home .products.grid:not(.nice-scroll) .simple-prod.pngm-card {
      width: calc(20% - 12px) !important;
    }
  }
  
  /* Section headers: See all / Change alignment */
  body#home .block > h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  
  body#home .pngm-near-meta .pngm-change-link,
  body#home .block h2 a,
  body#home .block .see-all {
    color: #006b24 !important;
    font-weight: 700;
  }
  
  /* ==========================================================================
     Phase 2 ? Section heads (Near You / Latest / Recently Viewed) + notify
     ========================================================================== */
  
  body#home > .content > section.home-search {
    position: relative;
    z-index: 5;
    overflow: visible;
  }
  
  body#home > .content > section.home-location,
  body#home > .content > section.home-latest,
  body#home > .content > section.home-recent,
  body#home > .content > section.home-premium,
  body#home > .content > section.home-favorite {
    background: #fff;
  }
  
  body#home > .content > section.home-location {
    position: relative;
    z-index: 2;
    display: block !important;
    visibility: visible !important;
  }
  
  body#home .pngm-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    border: 0;
  }
  
  body#home .pngm-section-head-left {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px 14px;
    min-width: 0;
  }
  
  body#home .pngm-section-title,
  body#home .pngm-section-head h2.pngm-section-title {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px 14px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #16202a !important;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  
  body#home .pngm-section-title .pngm-section-label {
    flex: 0 0 auto;
  }
  
  body#home .pngm-section-head .pngm-near-meta,
  body#home .pngm-section-title .pngm-near-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    color: #6b7785;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.25;
  }
  
  body#home .pngm-section-head .pngm-change-link {
    color: #006b24 !important;
    font-size: 14px;
    font-weight: 600 !important;
    text-decoration: none;
  }
  
  body#home .pngm-section-head .pngm-change-link:hover {
    color: #00551c !important;
    text-decoration: underline;
  }
  
  body#home .pngm-see-all {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #006b24 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    text-decoration: none !important;
    white-space: nowrap;
  }
  
  body#home .pngm-see-all:hover {
    color: #00551c !important;
    text-decoration: underline !important;
  }
  
  /* Header notification bell (logged-in only) */
  header .links {
    overflow: visible !important;
  }

  header .links .pngm-notify-wrap {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    z-index: 30;
  }

  header .links .pngm-notify-wrap.is-open {
    z-index: 80;
  }

  header .links .pngm-notify {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
  }
  
  header .links .pngm-notify svg {
    margin: 0 !important;
    height: 20px;
    width: 18px;
    fill: #3d4651;
  }
  
  header .links .pngm-notify:hover svg,
  header .links .pngm-notify-wrap.is-open .pngm-notify svg {
    fill: #006b24;
  }

  header .links .pngm-notify-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1200;
    width: min(320px, calc(100vw - 24px));
    padding: 0;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(22, 32, 42, 0.14);
    overflow: visible;
  }

  body > .pngm-notify-menu {
    position: fixed;
    z-index: 10050;
    width: min(320px, calc(100vw - 24px));
    padding: 0;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(22, 32, 42, 0.14);
  }

  body > .pngm-notify-menu[hidden] {
    display: none !important;
  }

  header .links .pngm-notify-menu::before,
  body > .pngm-notify-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #e6eaf0;
    border-top: 1px solid #e6eaf0;
    transform: rotate(45deg);
  }

  /* Keep menu content clipped to the card, not the caret */
  header .links .pngm-notify-menu-head,
  header .links .pngm-notify-menu-link,
  body > .pngm-notify-menu .pngm-notify-menu-head,
  body > .pngm-notify-menu .pngm-notify-menu-link {
    position: relative;
    z-index: 1;
  }

  body > .pngm-notify-menu .pngm-notify-menu-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 14px;
  }

  body > .pngm-notify-menu .pngm-notify-menu-head strong {
    font-size: 15px;
    font-weight: 700;
    color: #16202a;
    line-height: 1.3;
  }

  body > .pngm-notify-menu .pngm-notify-menu-head em {
    font-style: normal;
    font-size: 13px;
    color: #8a94a0;
    line-height: 1.45;
  }

  body > .pngm-notify-menu .pngm-notify-enable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 4px;
    padding: 0 14px;
    border: 1px solid #2e7d32;
    border-radius: 10px;
    background: #2e7d32;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
  }

  body > .pngm-notify-menu .pngm-notify-enable:hover,
  body > .pngm-notify-menu .pngm-notify-enable:focus {
    background: #256628;
    border-color: #256628;
    outline: none;
  }

  body > .pngm-notify-menu .pngm-notify-enable:disabled {
    opacity: 0.7;
    cursor: wait;
  }

  body > .pngm-notify-menu .pngm-notify-enable.is-error {
    background: #c62828;
    border-color: #c62828;
  }

  body > .pngm-notify-menu .pngm-notify-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eef1f5;
    color: #16202a !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
  }

  body > .pngm-notify-menu .pngm-notify-menu-link > i:first-child {
    width: 18px;
    color: #5c6570;
    text-align: center;
  }

  body > .pngm-notify-menu .pngm-notify-menu-link span {
    flex: 1 1 auto;
  }

  body > .pngm-notify-menu .pngm-notify-menu-link > i:last-child {
    color: #b0b8c2;
    font-size: 12px;
  }

  body > .pngm-notify-menu .pngm-notify-menu-link:hover {
    background: #f6f8fa;
  }

  body > .pngm-notify-menu .pngm-notify-menu-head[hidden],
  body > .pngm-notify-menu .pngm-notify-a2hs[hidden] {
    display: none !important;
  }

  body > .pngm-notify-menu .pngm-notify-a2hs,
  header .links .pngm-notify-a2hs {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 20px);
    margin: 10px 10px 6px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: #eef8f0;
    color: #16202a;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    box-sizing: border-box;
  }

  body > .pngm-notify-menu .pngm-notify-a2hs-ico,
  header .links .pngm-notify-a2hs-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #2e7d32;
    color: #fff;
    font-size: 16px;
  }

  body > .pngm-notify-menu .pngm-notify-a2hs-copy,
  header .links .pngm-notify-a2hs-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  body > .pngm-notify-menu .pngm-notify-a2hs-copy strong,
  header .links .pngm-notify-a2hs-copy strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
  }

  body > .pngm-notify-menu .pngm-notify-a2hs-copy em,
  header .links .pngm-notify-a2hs-copy em {
    font-style: normal;
    font-size: 12px;
    color: #3d7a4a;
    line-height: 1.3;
  }

  body > .pngm-notify-menu .pngm-notify-a2hs:hover,
  header .links .pngm-notify-a2hs:hover {
    background: #e1f3e4;
  }

  header .links .pngm-notify-menu[hidden] {
    display: none !important;
  }

  header .links .pngm-notify-menu-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 14px;
  }

  header .links .pngm-notify-menu-head strong {
    font-size: 15px;
    font-weight: 700;
    color: #16202a;
    line-height: 1.3;
  }

  header .links .pngm-notify-menu-head em {
    font-style: normal;
    font-size: 13px;
    color: #8a94a0;
    line-height: 1.45;
  }

  header .links .pngm-notify-enable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 4px;
    padding: 0 14px;
    border: 1px solid #2e7d32;
    border-radius: 10px;
    background: #2e7d32;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
  }

  header .links .pngm-notify-enable:hover,
  header .links .pngm-notify-enable:focus {
    background: #256628;
    border-color: #256628;
    outline: none;
  }

  header .links .pngm-notify-enable:disabled {
    opacity: 0.7;
    cursor: wait;
  }

  header .links .pngm-notify-enable.is-error {
    background: #c62828;
    border-color: #c62828;
  }

  header .links .pngm-notify-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eef1f5;
    color: #16202a !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
  }

  header .links .pngm-notify-menu-link > i:first-child {
    width: 18px;
    color: #5c6570;
    text-align: center;
  }

  header .links .pngm-notify-menu-link span {
    flex: 1 1 auto;
  }

  header .links .pngm-notify-menu-link > i:last-child {
    color: #b0b8c2;
    font-size: 12px;
  }

  header .links .pngm-notify-menu-link:hover {
    background: #f6f8fa;
  }

  header .links .pngm-notify-menu-head[hidden],
  header .links .pngm-notify-a2hs[hidden],
  html.pngm-pwa-standalone .pngm-notify-a2hs {
    display: none !important;
  }
  
  /* Poller-managed badges render at zero and toggle [hidden]; the badge classes
     set their own display, which would otherwise win over the UA default. */
  [data-pngm-badge][hidden] {
    display: none !important;
  }
  
  header .links .pngm-notify .counter {
    position: absolute;
    top: 6px;
    right: 6px;
    left: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 100px;
    background: #e11d48 !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }
  
  /* Near You: "Near You" + pin + city + Change on one left-aligned row */
  body#home .pngm-near-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    width: 100%;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  
  body#home .pngm-near-head .pngm-section-title {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px 12px !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  
  body#home .pngm-near-head .pngm-section-label {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    color: #16202a;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.25;
  }
  
  body#home .pngm-near-head .pngm-near-meta {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    gap: 6px !important;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #5c6570 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  body#home .pngm-near-head .pngm-near-meta .fa-map-marker-alt {
    display: inline-block !important;
    flex: 0 0 auto;
    margin: 0;
    color: #5c6570 !important;
    font-size: 13px !important;
    line-height: 1;
    visibility: visible !important;
  }
  
  body#home .pngm-near-head .pngm-near-city {
    display: inline !important;
    color: #5c6570 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    visibility: visible !important;
  }
  
  body#home .pngm-near-head .pngm-change-link {
    display: inline !important;
    flex: 0 0 auto;
    margin: 0 !important;
    color: #006b24 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    visibility: visible !important;
  }
  
  body#home .pngm-near-head .pngm-change-link:hover {
    color: #00551c !important;
    text-decoration: underline !important;
  }
  
  body#home .pngm-near-head .pngm-see-all {
    flex: 0 0 auto;
    margin-left: auto;
  }
  
  @media screen and (max-width: 1080px) {
    body#home .pngm-section-title,
    body#home .pngm-section-head h2.pngm-section-title {
      font-size: 18px !important;
    }
  
    body#home .pngm-see-all {
      font-size: 14px !important;
    }
  
    header .links .pngm-notify,
    header .links .pngm-notify-wrap .pngm-notify {
      width: 36px;
      height: 36px;
    }
  
    /* Parent responsive.css sets body#home h2 { flex-direction: column } — keep Near You inline */
    body#home .pngm-near-head h2.pngm-section-title {
      flex-direction: row !important;
      align-items: center !important;
    }
  }
  
  @media screen and (max-width: 767px) {
    header .links .pngm-notify.btn-white,
    header .links .pngm-notify-wrap .pngm-notify.btn-white {
      display: inline-flex !important;
      width: 34px;
      height: 34px;
      margin: 0;
      padding: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    header .links .pngm-notify-menu {
      right: -8px;
      width: min(300px, calc(100vw - 16px));
    }
  
    header .links .pngm-notify svg {
      width: 18px;
      height: 18px;
      fill: #5c6570;
    }
  
    header .links .pngm-notify .counter {
      top: 2px;
      right: 2px;
    }
  
    body#home .pngm-near-head {
      gap: 8px;
      justify-content: flex-start !important;
      text-align: left !important;
    }
  
    body#home .pngm-near-head .pngm-section-title {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-start !important;
      width: auto !important;
      text-align: left !important;
    }
  
    body#home .pngm-near-head .pngm-near-meta {
      font-size: 13px !important;
      gap: 4px 5px !important;
    }
  
    body#home .pngm-near-head .pngm-near-city,
    body#home .pngm-near-head .pngm-change-link {
      font-size: 13px !important;
    }
  }
  
  
  /* ==========================================================================
     SEARCH / CATEGORY mockup UI (Filters sidebar, chips, strip, toolbar, grid)
     ========================================================================== */
  
  body#search .container.primary {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-top: 20px;
    padding-bottom: 28px;
  }
  
  /* --- Filters sidebar --- */
  body#search #search-menu.filter-menu {
    flex: 0 0 260px;
    width: 260px;
    max-width: 260px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  
  body#search #search-menu .wrap {
    margin: 0;
    padding: 16px 16px 18px;
    border: 1px solid #e3e8ed;
    border-radius: 12px;
    background: #fff;
  }
  
  body#search #search-menu form.search-side-form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  
  body#search .pngm-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px 0;
  }
  
  body#search .pngm-filters-head h2 {
    margin: 0;
    color: #16202a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }
  
  body#search .pngm-filters-clear {
    color: #006b24;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  
  body#search .pngm-filters-clear:hover {
    color: #00551c;
    text-decoration: underline;
  }
  
  body#search #search-menu .search-side-form .row {
    margin: 0 0 12px 0;
  }
  
  body#search #search-menu .search-side-form label {
    display: block;
    margin: 0 0 5px 0;
    color: #5c6570;
    font-size: 12px;
    font-weight: 600;
  }
  
  body#search #search-menu .search-side-form .input-box,
  body#search #search-menu .search-side-form .input-box.line {
    width: 100%;
    margin: 0;
    border: 1px solid #d7dee5;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
  }
  
  body#search #search-menu .search-side-form input[type="text"],
  body#search #search-menu .search-side-form input[type="number"],
  body#search #search-menu .search-side-form select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #16202a;
    font-size: 13px;
    box-shadow: none;
  }
  
  body#search #search-menu .search-side-form .line.input-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
  }
  
  body#search #search-menu .search-side-form .line.input-box input {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 6px;
    text-align: left;
  }
  
  body#search #search-menu .search-side-form .line .delim {
    flex: 0 0 auto;
    width: 10px;
    height: 1px;
    background: #c5ced6;
  }
  
  body#search #search-menu .search-side-form .checkboxes,
  body#search #search-menu .search-side-form .row.checkboxes {
    margin: 8px 0 0 0;
    border: 0;
    background: transparent;
  }
  
  body#search #search-menu .search-side-form .input-box-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px 0;
  }
  
  body#search #search-menu .search-side-form .input-box-check label {
    margin: 0;
    color: #16202a;
    font-size: 13px;
    font-weight: 500;
  }
  
  body#search #search-menu .search-side-form .row.buttons.srch {
    margin: 14px 0 0 0;
  }
  
  body#search #search-menu .search-side-form .row.buttons.srch .btn {
    width: 100%;
    height: 42px;
    border-radius: 8px;
    background: #006b24;
    border-color: #006b24;
    font-weight: 700;
  }
  
  /* Make / Brand + attribute filters — clearer spacing */
  body#search #search-menu .search-side-form .row.sidebar-hooks {
    margin: 16px 0 6px 0;
    padding: 16px 0 6px 0;
    border-top: 1px solid #e8edf1;
  }
  
  body#search #search-menu .search-side-form .row.sidebar-hooks #atr-search,
  body#search #search-menu .search-side-form .row.sidebar-hooks .atr-search {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  body#search #search-menu .search-side-form .row.sidebar-hooks #atr-search .control-group,
  body#search #search-menu .search-side-form .row.sidebar-hooks .atr-search .control-group {
    display: block;
    width: 100%;
    margin: 0 0 16px 0;
    clear: both;
  }
  
  body#search #search-menu .search-side-form .row.sidebar-hooks #atr-search .control-group:last-child,
  body#search #search-menu .search-side-form .row.sidebar-hooks .atr-search .control-group:last-child {
    margin-bottom: 2px;
  }
  
  body#search #search-menu .search-side-form .row.sidebar-hooks #atr-search .control-label,
  body#search #search-menu .search-side-form .row.sidebar-hooks .atr-search .control-label {
    display: block;
    width: 100%;
    margin: 0 0 8px 0;
    padding: 0;
    text-align: left;
    color: #16202a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
  }
  
  body#search #search-menu .search-side-form .row.sidebar-hooks #atr-search .controls,
  body#search #search-menu .search-side-form .row.sidebar-hooks .atr-search .controls {
    display: block;
    width: 100%;
    margin: 0;
  }
  
  body#search #search-menu .search-side-form .row.sidebar-hooks #atr-search select,
  body#search #search-menu .search-side-form .row.sidebar-hooks .atr-search select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 42px;
    margin: 0 0 10px 0;
    padding: 0 12px;
    border: 1px solid #d7dee5;
    border-radius: 8px;
    background: #fff;
    color: #16202a;
    font-size: 13px;
    box-shadow: none;
    box-sizing: border-box;
  }
  
  body#search #search-menu .search-side-form .row.sidebar-hooks #atr-search select:last-child,
  body#search #search-menu .search-side-form .row.sidebar-hooks .atr-search select:last-child {
    margin-bottom: 0;
  }
  
  body#search #search-menu .pngm-desktop-hide,
  body#search #search-category-box.pngm-desktop-hide {
    display: none !important;
  }
  
  body#search #search-main {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    width: auto;
  }
  
  /* --- Active filter chips (hidden — keyword/location live in the search bar / filters) --- */
  body#search #search-filters.pngm-search-chips,
  body#search .pngm-search-chips,
  body#search #search-filters {
    display: none !important;
  }
  
  body#search .pngm-search-cat-strips {
    margin: 0 0 16px 0;
  }
  
  body#search .pngm-search-cat-strips > .pngm-search-subcats {
    margin-bottom: 0;
  }
  
  body#search .pngm-search-cat-strips > .pngm-search-nested-subcats {
    margin-top: 10px;
  }
  
  /* --- Category icon-card strip --- */
  body#search .pngm-search-subcats {
    margin: 0 0 16px 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  
  body#search .pngm-search-cats-heading {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #16202a;
  }
  
  body#search .pngm-search-subcats-head {
    display: none !important;
  }
  
  body#search .pngm-search-subcats-scroll {
    padding: 0;
  }
  
  body#search .pngm-search-subcats-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  
  /* Keyword search: same single-row horizontal strip as subcategories */
  body#search .pngm-search-rootcats .pngm-search-subcats-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  
  body#search .pngm-search-rootcats a.pngm-search-subcat {
    flex: 0 0 auto;
    min-width: 92px;
    max-width: 120px;
  }
  
  body#search .pngm-search-subcat-ico-all {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #006b24;
  }
  
  body#search .pngm-search-subcat-ico-all svg {
    width: 32px;
    height: 32px;
    display: block;
  }
  
  body#search #search-menu .pngm-filter-category select {
    width: 100%;
  }
  
  body#search a.pngm-search-subcat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 92px;
    max-width: 120px;
    padding: 12px 10px 10px;
    border: 1px solid #e3e8ed;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    color: #16202a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  
  body#search a.pngm-search-subcat:hover {
    border-color: #006b24;
    background: #fff;
    color: #006b24;
    box-shadow: 0 2px 8px rgba(0, 107, 36, .1);
    text-decoration: none;
  }
  
  body#search a.pngm-search-subcat.is-active,
  body#search a.pngm-search-subcat.pngm-search-subcat-all.is-active {
    border-color: #006b24;
    background: #fff;
    box-shadow: 0 0 0 1px #006b24;
    color: #006b24;
  }
  
  body#search .pngm-search-subcat-ico {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    background: #fff;
    color: #006b24;
    font-size: 16px;
    overflow: hidden;
  }
  
  body#search .pngm-search-subcat-ico img,
  body#search .pngm-search-subcat-ico img.pngm-cat-cover,
  body#search .pngm-search-subcat-ico img.pngm-cat-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
  }
  
  body#search a.pngm-search-subcat.is-active .pngm-search-subcat-ico {
    background: #fff;
    color: #006b24;
    box-shadow: none;
  }
  
  body#search .pngm-search-subcat-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  body#search a.pngm-search-subcat em {
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #6b7785;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
  }
  
  body#search a.pngm-search-subcat.is-active em {
    background: transparent;
    color: #6b7785;
  }
  
  body#search a.pngm-search-subcat-all {
    border-color: #e3e8ed;
    background: #fff;
    color: #16202a;
  }
  
  /* --- Results toolbar --- */
  body#search #search-quick-bar.pngm-search-toolbar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px 0;
    padding: 0;
  }
  
  body#search #search-quick-bar .pngm-search-count {
    display: block !important;
    margin: 0;
    color: #16202a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
  }
  
  body#search #search-quick-bar .pngm-search-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }
  
  body#search #search-quick-bar .sort-type.pngm-sort-control,
  body#search #search-quick-bar .sort-type {
    position: relative;
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    margin: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    overflow: visible;
  }
  
  body#search #search-quick-bar .sort-type .pngm-sort-prefix,
  body#search #search-quick-bar .sort-type .pngm-sort-label-full,
  body#search #search-quick-bar .sort-type .pngm-sort-label-short {
    display: none !important;
  }
  
  body#search #search-quick-bar .sort-type .pngm-sr-only {
    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;
  }
  
  /* Hide native select; custom UI drives it. */
  body#search #search-quick-bar .sort-type select,
  body#search #search-quick-bar .sort-type select.orderSelect {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  
  body#search #search-quick-bar .sort-type::after {
    display: none !important;
    content: none !important;
  }
  
  body#search #search-quick-bar .pngm-sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px 0 12px;
    border: 1.5px solid #d5dde5;
    border-radius: 11px;
    background: #fff;
    color: #16202a;
    box-shadow: 0 1px 2px rgba(16, 32, 42, 0.04);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    user-select: none;
  }
  
  body#search #search-quick-bar .pngm-sort-trigger:hover,
  body#search #search-quick-bar .pngm-sort-control.is-open .pngm-sort-trigger {
    border-color: #86c99a;
    background: #f7fbf8;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.1);
  }
  
  body#search #search-quick-bar .pngm-sort-trigger-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #eef8f1;
    color: #15803d;
    font-size: 13px;
    flex: 0 0 auto;
  }
  
  body#search #search-quick-bar .pngm-sort-trigger-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    line-height: 1.15;
  }
  
  body#search #search-quick-bar .pngm-sort-trigger-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7785;
  }
  
  body#search #search-quick-bar .pngm-sort-trigger-value {
    font-size: 13.5px;
    font-weight: 700;
    color: #16202a;
    white-space: nowrap;
  }
  
  body#search #search-quick-bar .pngm-sort-trigger-chevron {
    margin-left: 4px;
    color: #6b7785;
    font-size: 12px;
    transition: transform 0.16s ease;
    flex: 0 0 auto;
  }
  
  body#search #search-quick-bar .pngm-sort-control.is-open .pngm-sort-trigger-chevron {
    transform: rotate(180deg);
    color: #15803d;
  }
  
  body#search #search-quick-bar .pngm-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    display: none;
    min-width: 240px;
    padding: 8px;
    border: 1px solid #e3e8ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16, 32, 42, 0.14);
    box-sizing: border-box;
  }
  
  body#search #search-quick-bar .pngm-sort-control.is-open .pngm-sort-menu {
    display: block;
    animation: pngmSortMenuIn 0.16s ease;
  }
  
  @keyframes pngmSortMenuIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  body#search #search-quick-bar .pngm-sort-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #16202a;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  
  body#search #search-quick-bar .pngm-sort-option:hover {
    background: #f3f6f8;
  }
  
  body#search #search-quick-bar .pngm-sort-option.is-active {
    background: #eef8f1;
    color: #14532d;
  }
  
  body#search #search-quick-bar .pngm-sort-option-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f3f6f8;
    color: #5b6775;
    font-size: 14px;
    flex: 0 0 auto;
  }
  
  body#search #search-quick-bar .pngm-sort-option.is-active .pngm-sort-option-ico {
    background: #d8f0df;
    color: #15803d;
  }
  
  body#search #search-quick-bar .pngm-sort-option-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  body#search #search-quick-bar .pngm-sort-option-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }
  
  body#search #search-quick-bar .pngm-sort-option-hint {
    font-size: 12px;
    font-weight: 500;
    color: #6b7785;
    line-height: 1.25;
  }
  
  body#search #search-quick-bar .pngm-sort-option.is-active .pngm-sort-option-hint {
    color: #3f7a4f;
  }
  
  body#search #search-quick-bar .pngm-sort-option-check {
    flex: 0 0 auto;
    color: #15803d;
    font-size: 13px;
    opacity: 0;
  }
  
  body#search #search-quick-bar .pngm-sort-option.is-active .pngm-sort-option-check {
    opacity: 1;
  }
  
  body#search #search-quick-bar .pngm-filter-btn {
    display: none;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #d7dee5;
    border-radius: 8px;
    background: #fff;
    color: #16202a;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
  }
  
  body#search #search-quick-bar .pngm-filter-btn svg {
    fill: currentColor;
  }
  
  /* Category pages: show Filter next to Sort on desktop too (mockup). */
  body#search #search-main.pngm-has-category #search-quick-bar .pngm-filter-btn {
    display: inline-flex;
  }
  
  /* Desktop: live filters — hide sidebar Search button (mobile drawer keeps Apply). */
  body#search #search-menu .row.buttons.srch {
    display: none !important;
  }
  
  /* Keep empty-state location banner hidden; sidebar Location filter stays visible. */
  body#search .pngm-empty-location {
    display: none !important;
  }
  
  /* Keyword: no suggestion dropdown on search sidebar. */
  body#search #search-menu .picker.pattern .results,
  body#search #search-menu .picker.pattern.pngm-no-suggest .results {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Search page: hide top global search (filters sidebar has keyword already). */
  body#search .pngm-global-search {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  
  body#search:not(#home) {
    padding-top: 72px !important;
  }
  
  /* --- 4-column search grid + card polish (exclude recently viewed carousel) --- */
  body#search #search-items > .products.grid,
  body#search #search-items .products.grid:not(.nice-scroll) {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 -6px;
  }
  
  body#search #search-items > .products.grid .simple-prod,
  body#search #search-items .products.grid:not(.nice-scroll) .simple-prod {
    width: calc(25% - 12px);
    margin: 0 6px 16px 6px;
  }
  
  body#search #search-items .products.grid .simple-prod .simple-wrap {
    position: relative;
    padding: 0 0 14px 0;
    border-radius: 10px;
  }
  
  body#search #search-items .products.grid .simple-prod .img-wrap {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }
  
  body#search #search-items .products.grid .simple-prod .img-wrap > a img,
  body#search #search-items .products.grid .simple-prod .img-wrap img {
    object-fit: cover !important;
    object-position: center center;
  }
  
  body#search #search-items .products.grid .simple-prod .img-wrap .premium-mark.isGrid,
  body#search #search-items .products.grid .simple-prod .img-wrap .premium-mark {
    display: inline-block !important;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
  }
  
  body#search #search-items .products.grid .simple-prod .data {
    display: flex;
    flex-direction: column;
    padding: 10px 40px 0 12px;
  }
  
  body#search #search-items .products.grid .simple-prod .pngm-card-price {
    order: 1;
    margin: 0 0 4px 0;
    color: #006b24;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
  }
  
  body#search #search-items .products.grid .simple-prod .pngm-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    order: 2;
    margin: 0 0 4px 0;
  }
  
  body#search #search-items .products.grid .simple-prod .pngm-card-title-row .title {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    max-height: 40px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }
  
  body#search #search-items .products.grid .simple-prod .info.pngm-card-loc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    order: 3;
    margin: 0 0 4px 0;
    max-height: none;
    overflow: visible;
    color: #6b7785;
    font-size: 12px;
    line-height: 1.3;
  }
  
  body#search #search-items .products.grid .simple-prod .pngm-card-sep {
    color: #b0b8c0;
  }
  
  body#search #search-items .products.grid .simple-prod .pngm-card-tags {
    order: 4;
    margin: 0;
    color: #8a949e;
    font-size: 12px;
    line-height: 1.35;
  }
  
  body#search #search-items .products.grid .simple-prod .pngm-teaser,
  body#search #search-items .products.grid .simple-prod .extra.pngm-card-meta {
    display: none !important;
  }
  
  body#search #search-items .products.grid .simple-prod .pngm-fav {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin: 0;
  }
  
  body#search #search-items .products.grid .simple-prod .pngm-photo-count {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(16, 24, 32, .62);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }
  
  /* Pagination — green active state (desktop + mobile) */
  body#search #search-items .paginate {
    display: block !important;
    visibility: visible !important;
    margin: 12px 0 4px 0;
    padding: 12px 0 4px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  body#search #search-items .paginate ul {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  body#search #search-items .paginate ul li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  body#search #search-items .paginate ul li a,
  body#search #search-items .paginate ul li span,
  body#search #search-items .paginate a,
  body#search #search-items .paginate span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e3e8ed;
    border-radius: 8px;
    background: #fff;
    color: #16202a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
  }
  
  body#search #search-items .paginate ul li a:hover,
  body#search #search-items .paginate a:hover {
    border-color: #006b24;
    color: #006b24;
    background: #fff;
  }
  
  body#search #search-items .paginate ul li a.searchPaginationSelected,
  body#search #search-items .paginate ul li span.searchPaginationSelected,
  body#search #search-items .paginate .searchPaginationSelected a,
  body#search #search-items .paginate span.searchPaginationSelected,
  body#search #search-items .paginate .active,
  body#search #search-items .paginate a.active {
    background: #006b24 !important;
    border-color: #006b24 !important;
    color: #fff !important;
  }
  
  /* Mobile keyword bar (filters live in the drawer) */
  body#search .pngm-mobile-search-bar .pngm-sr-only {
    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;
  }
  
  body#search .pngm-mobile-search-bar {
    display: none;
    margin: 0 0 14px 0;
  }
  
  body#search .pngm-mobile-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 40px 0 40px;
    border: 1.5px solid #d5dde5;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
  }
  
  body#search .pngm-mobile-search-field:focus-within {
    border-color: #86c99a;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);
  }
  
  body#search .pngm-mobile-search-field > .fa-search {
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -7px;
    color: #6b7785;
    font-size: 14px;
    pointer-events: none;
  }
  
  body#search .pngm-mobile-search-field input.pngm-mobile-pattern {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #16202a;
    font-size: 15px;
    font-weight: 500;
    line-height: 42px;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
  }
  
  body#search .pngm-mobile-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7785;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  
  body#search .pngm-mobile-search-clear[hidden] {
    display: none !important;
  }
  
  @media screen and (max-width: 1200px) {
    body#search #search-items > .products.grid .simple-prod,
    body#search #search-items .products.grid:not(.nice-scroll) .simple-prod {
      width: calc(33.333% - 12px);
    }
  }
  
  @media screen and (max-width: 1080px) {
    body#search .container.primary {
      gap: 16px;
    }
  
    body#search #search-menu.filter-menu {
      flex-basis: 220px;
      width: 220px;
      max-width: 220px;
    }
  
    body#search #search-items > .products.grid .simple-prod,
    body#search #search-items .products.grid:not(.nice-scroll) .simple-prod {
      width: calc(50% - 12px);
    }
  }
  
  @media screen and (max-width: 767px) {
    body#search .container.primary {
      display: block;
      padding-top: 12px;
    }
  
    body#search #search-menu.filter-menu {
      display: none;
    }
  
    body#search #search-main {
      width: 100%;
    }
  
    body#search .pngm-search-cats-heading {
      font-size: 16px;
      margin-bottom: 10px;
    }
  
    body#search .pngm-mobile-search-bar.isMobile,
    body#search .pngm-mobile-search-bar {
      display: block !important;
    }
  
    body#search #search-quick-bar .pngm-filter-btn,
    body#search #search-main.pngm-has-category #search-quick-bar .pngm-filter-btn {
      display: inline-flex !important;
    }
  
    body#search #search-quick-bar.pngm-search-toolbar {
      flex-direction: column !important;
      align-items: stretch !important;
      flex-wrap: nowrap !important;
      gap: 10px;
    }
  
    body#search #search-quick-bar .pngm-search-count {
      font-size: 14px;
      width: 100%;
    }
  
    body#search #search-quick-bar .pngm-search-toolbar-actions {
      width: 100%;
      margin-left: 0;
    }
  
    body#search #search-quick-bar .sort-type .pngm-sort-trigger {
      width: 100%;
    }
  
    body#search #search-quick-bar .sort-type .pngm-sort-trigger-eyebrow {
      display: none;
    }
  
    body#search #breadcrumbs {
      display: none !important;
    }
  
    body#search:not(#home) {
      padding-top: 64px !important;
    }
  
    /* 2-column listing cards (match reference mobile layout) */
    body#search #search-items > .products.grid,
    body#search #search-items .products.grid:not(.nice-scroll) {
      display: flex !important;
      flex-wrap: wrap !important;
      margin: 0 -5px !important;
    }
  
    body#search #search-items > .products.grid .simple-prod,
    body#search #search-items .products.grid:not(.nice-scroll) .simple-prod {
      flex: 0 0 calc(50% - 10px) !important;
      width: calc(50% - 10px) !important;
      max-width: calc(50% - 10px) !important;
      min-width: 0 !important;
      margin: 0 5px 12px 5px !important;
    }
  
    body#search #search-items .products.grid .simple-prod .pngm-card-title-row .title {
      max-height: 40px;
      font-size: 13px;
      line-height: 18px;
    }
  
    body#search #search-items .products.grid .simple-prod .pngm-card-price {
      font-size: 14px;
    }
  
    body#search #search-items .products.grid .simple-prod .data {
      padding: 8px 36px 0 10px;
    }
  
    body#search #search-items .paginate {
      display: block !important;
      margin: 8px 0 16px 0;
      padding: 8px 0 12px 0;
    }
  
    body#search #search-items .paginate ul {
      flex-wrap: nowrap;
      justify-content: flex-start;
      width: max-content;
      min-width: 100%;
      margin: 0 auto;
    }
  
    /* Mobile filter drawer: keep Apply button visible */
    body.pngm-filter-open #side-menu .row.buttons.srch.pngm-filter-apply-only {
      display: block !important;
    }
  
    /* Pattern suggestions stay off in the drawer; location only when populated */
    body.pngm-filter-open #side-menu .picker.pattern .results,
    body.pngm-filter-open #side-menu .picker.pattern.pngm-no-suggest .results,
    body.pngm-filter-open #side-menu .picker .results:empty,
    body.pngm-filter-open #side-menu .picker.location .results:empty {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
    }
  
    body.pngm-filter-open #side-menu .picker.location .results:not(:empty) {
      display: block;
      visibility: visible;
      pointer-events: auto;
      max-height: 200px;
      overflow-y: auto;
      margin-top: 6px;
      border: 1px solid #e3e8ed;
      border-radius: 10px;
      background: #fff;
    }
  
    /* Never resurrect the old category box / desktop-hide leftovers in the drawer */
    body.pngm-filter-open #side-menu #search-category-box,
    body.pngm-filter-open #side-menu #search-category-box.pngm-desktop-hide,
    body.pngm-filter-open #side-menu .pngm-desktop-hide {
      display: none !important;
    }
  
    /* Match desktop filter field chrome inside the cloned drawer */
    body.pngm-filter-open #side-menu .box.filter .section.filter-menu {
      padding: 0 !important;
    }
  
    body.pngm-filter-open #side-menu .box.filter .section > .wrap {
      margin: 0;
      padding: 12px 16px 0;
      border: 0;
      border-radius: 0;
      background: #fff;
      box-shadow: none;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
  
    body.pngm-filter-open #side-menu .box.filter .pngm-filters-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 14px 0;
      padding: 0;
    }
  
    body.pngm-filter-open #side-menu .box.filter .pngm-filters-head h2 {
      margin: 0;
      color: #16202a;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.2;
    }
  
    body.pngm-filter-open #side-menu .box.filter .pngm-filters-clear,
    body.pngm-filter-open #side-menu .box.filter .section a.pngm-filters-clear {
      width: auto !important;
      display: inline-flex !important;
      align-items: center;
      margin: 0 !important;
      padding: 0 !important;
      color: #006b24 !important;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      line-height: 1.2;
    }
  
    body.pngm-filter-open #side-menu .box.filter .pngm-filters-clear:after,
    body.pngm-filter-open #side-menu .box.filter .section a.pngm-filters-clear:after {
      content: none !important;
      display: none !important;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .row {
      margin: 0 0 14px 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form label {
      display: block;
      width: 100%;
      margin: 0 0 5px 0;
      padding: 0;
      color: #5c6570;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box,
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box.line,
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box.picker {
      position: relative;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      overflow: visible;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form input[type="text"],
    body.pngm-filter-open #side-menu .box.filter .search-side-form input[type="number"],
    body.pngm-filter-open #side-menu .box.filter .search-side-form input[type="search"],
    body.pngm-filter-open #side-menu .box.filter .search-side-form select {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: 42px;
      margin: 0;
      padding: 10px 36px 10px 12px;
      border: 1px solid #d8dee6;
      border-radius: 10px;
      background: #fff;
      color: #16202a;
      font-size: 14px;
      line-height: 20px;
      box-sizing: border-box;
      box-shadow: none;
      appearance: none;
      -webkit-appearance: none;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form select {
      padding-right: 36px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6570' d='M1.4.6L6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px 8px;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .line.input-box {
      display: flex;
      align-items: center;
      gap: 0;
      height: 42px;
      padding: 2px;
      border: 1px solid #d8dee6;
      border-radius: 10px;
      background: #fff;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .line.input-box input {
      flex: 1 1 0;
      width: auto !important;
      height: 36px;
      border: 0 !important;
      border-radius: 8px;
      padding: 8px 10px;
      box-shadow: none;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .line .delim {
      width: 1px;
      height: 22px;
      margin: 0 2px;
      background: #d8dee6;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box-check {
      position: relative;
      display: block;
      width: 100%;
      margin: 0 0 10px 0;
      min-height: 22px;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box-check input[type="checkbox"] {
      opacity: 0.01 !important;
      position: absolute !important;
      z-index: 2;
      left: 0;
      top: 1px;
      width: 22px !important;
      height: 22px !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden;
      cursor: pointer;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box-check label {
      position: relative;
      display: block;
      float: none !important;
      clear: both;
      width: auto !important;
      max-width: 100%;
      margin: 0 !important;
      padding: 2px 0 2px 30px !important;
      color: #16202a;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      cursor: pointer;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box-check label:before,
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box-check label:after {
      position: absolute;
      left: 0;
      top: 1px;
      width: 20px;
      height: 20px;
      box-sizing: border-box;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box-check label:before {
      content: "";
      border: 1px solid #d8dee6;
      border-radius: 4px;
      background: #fff;
      box-shadow: none;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box-check label:after {
      content: "\f00c";
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      color: transparent;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box-check input[type="checkbox"]:checked + label:before {
      background: #006b24;
      border-color: #006b24;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .input-box-check input[type="checkbox"]:checked + label:after {
      color: #fff;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .row.checkboxes,
    body.pngm-filter-open #side-menu .box.filter .search-side-form .checkboxes {
      margin: 0 0 8px 0;
    }
  
    body.pngm-filter-open #side-menu .box.filter .row.company,
    body.pngm-filter-open #side-menu .box.filter .row.pngm-filter-seller,
    body.pngm-filter-open #side-menu .box.filter .row.premiums-only,
    body.pngm-filter-open #side-menu .box.filter .row.phone-only,
    body.pngm-filter-open #side-menu .box.filter .row.with-picture {
      display: block !important;
    }
  
    body.pngm-filter-open #side-menu .pngm-filter-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 0 12px;
      scrollbar-width: thin;
      scrollbar-color: #c5ced8 transparent;
    }
  
    body.pngm-filter-open #side-menu .pngm-filter-scroll::-webkit-scrollbar {
      width: 4px;
    }
  
    body.pngm-filter-open #side-menu .pngm-filter-scroll::-webkit-scrollbar-track {
      background: transparent;
    }
  
    body.pngm-filter-open #side-menu .pngm-filter-scroll::-webkit-scrollbar-thumb {
      background: #c5ced8;
      border-radius: 4px;
    }
  
    body.pngm-filter-open #side-menu .box.filter .row.buttons.srch {
      padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
      border-top: 1px solid #eef2f6;
    }
  
    body.pngm-filter-open #side-menu .box.filter .row.buttons.srch .btn {
      width: 100%;
      height: 46px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 700;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .row.sidebar-hooks {
      margin-top: 4px;
    }
  
    body.pngm-filter-open #side-menu .box.filter .search-side-form .row.sidebar-hooks #atr-search select,
    body.pngm-filter-open #side-menu .box.filter .search-side-form .row.sidebar-hooks .atr-search select {
      width: 100% !important;
      max-width: 100% !important;
      height: 42px;
      margin: 0 0 8px 0;
      border: 1px solid #d8dee6;
      border-radius: 10px;
    }
  
    body#search #search-main #recent-ads.onsearch .products.grid,
    body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }
  
    body#search #search-main #recent-ads.onsearch .products.grid .simple-prod,
    body#search #search-main #recent-ads.onsearch .products.grid.nice-scroll .simple-prod {
      flex: 0 0 148px !important;
      width: 148px !important;
      max-width: 148px !important;
      min-width: 148px !important;
      margin: 0 8px 0 0 !important;
    }
  
    body#search a.pngm-search-subcat {
      min-width: 84px;
      padding: 10px 8px 8px;
    }
  }
  
  
  /* PNGMarket mobile messenger fixes - Android + iOS */
  :root {
    --im-chat-vh: 100dvh;
  }
  
  body.im-chat-page {
    overflow-x:hidden;
  }
  
  .pngm-im-board,
  .im-table.im-messages {
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  
  .pngm-composer-dock {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  @media (max-width: 768px) {
    /* No min-height here: it would make the page taller than the visible
       viewport while the keyboard is open, which lets the chat scroll away. */
    .pngm-composer-tip .desktop-tip {
      display:none;
    }
  
    .pngm-composer-tip .mobile-tip {
      display:inline;
    }
  }
  
  @media (min-width:769px) {
    .pngm-composer-tip .mobile-tip {
      display:none;
    }
  }
  
  
  /* PNGM mobile chat keyboard compatibility */
  .pngm-im-chat-layout,
  .pngm-im-thread-pane,
  .im-file-messages {
    min-height: 0;
  }
  
  .pngm-im-thread-pane {
    overflow: hidden;
  }
  
  .im-table.im-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
  }
  
  #im-message-form,
  #pngm-composer,
  .im-composer {
    padding-bottom: env(safe-area-inset-bottom);
    margin-bottom: 0 !important;
    transition: none;
  }
  
  .pngm-composer-tip .mobile-tip {
    display:none;
  }
  
  @media(max-width:768px){
    .pngm-composer-tip .desktop-tip {
      display:none;
    }
    .pngm-composer-tip .mobile-tip {
      display:inline;
    }
  }
  
  
  /* FINAL MOBILE CHAT LAYOUT FIX - keep composer visible on Android/iOS */
  body.im-chat-page {
    overflow-x: hidden;
  }
  
  body.im-chat-page .pngm-im-chat-layout,
  body.im-chat-page .pngm-im-thread-pane,
  body.im-chat-page .im-file-messages {
    min-height: 0;
  }
  
  body.im-chat-page .pngm-im-thread-pane {
    overflow: hidden;
  }
  
  body.im-chat-page .im-table.im-messages {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
  }
  
  body.im-chat-page #im-message-form,
  body.im-chat-page .pngm-composer-dock,
  body.im-chat-page .im-composer {
    position: relative;
    margin-bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  @media(max-width:768px){
    body.im-chat-page .pngm-composer-tip .desktop-tip {
      display:none !important;
    }
    body.im-chat-page .pngm-composer-tip .mobile-tip {
      display:inline !important;
    }
  }
  
  
  /* Composer validation is never surfaced: an empty send is simply ignored. */
  #im-error-list,
  ul#im-error-list,
  .im-error-list,
  body .im-file-messages #im-error-list {
    display: none !important;
  }
  
  /* Mobile only — desktop chat already has its own spacer and bubble rules.
     Short threads hug the composer so the list scrolls, never the page. */
  @media (max-width: 767px) {
    body.im-chat-page .im-table.im-messages::before {
      content: '';
      flex: 1 1 auto;
      min-height: 0;
      order: -1;
    }
  
    body.im-chat-page .im-table.im-messages > .im-show-older,
    body.im-chat-page .im-table.im-messages > .im-row:not(.im-table-row) {
      flex: 0 0 auto;
      clear: both;
    }
  }

  /* Chat photos: pinch / wheel zoom, and a close control that stays above the thread. */
  .pngm-im-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    flex-direction: column;
    background: #000;
    touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .pngm-im-photo-viewer[hidden] {
    display: none !important;
  }

  body.pngm-im-photo-open {
    overflow: hidden;
    touch-action: none;
  }

  body.pngm-im-photo-open #navi-bar,
  body.pngm-im-photo-open header,
  body.pngm-lg-open.pngm-im-photo-open #navi-bar,
  body.pngm-lg-open.pngm-im-photo-open header {
    visibility: hidden;
    pointer-events: none;
  }

  .pngm-im-photo-x {
    position: absolute;
    top: max(10px, env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 4;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #16202a;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .pngm-im-photo-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 3;
    margin: 0;
    padding: 0 16px;
    text-align: center;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.3;
    pointer-events: none;
  }

  .pngm-im-photo-dock {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
  }

  .pngm-im-photo-close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #16202a !important;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .pngm-im-photo-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 64px 12px 8px;
    overflow: hidden;
    touch-action: none;
  }

  .pngm-im-photo-stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
  }

/* ==========================================================================
   iPhone / iPad only.
   Every iOS browser runs WebKit, the only engine that understands
   -webkit-touch-callout, so this block never applies on Android, Windows or
   macOS: those keep rendering exactly as before.
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 767px) {
    /* 16px minimum: iOS Safari and the home-screen app zoom the whole page into
       any focused field smaller than 16px and keep that zoom until the user
       pinches out (search box, login, post wizard, chat composer...). */
    html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="image"]),
    html body select,
    html body textarea {
      font-size: 16px !important;
    }

    /* A double tap no longer zooms the page; pinch zoom still works. */
    html body {
      touch-action: manipulation;
    }

    /* Post wizard: the parent theme turns .status-wrap into a shrink-wrapped
       inline-block, which WebKit can collapse around a 100%-wide <select>.
       Lay the Condition field out like every other field. */
    html body.item-publish.pngm-post-wizard .pngm-post-field.status-wrap {
      display: block;
      width: 100%;
      max-width: 100%;
    }
    html body.pngm-post-wizard #sCondition,
    html body.pngm-post-wizard select.sCondition {
      height: 44px;
      line-height: normal;
    }

    /* Messages: the page shell never scrolls, so a swipe past either end of the
       list must not rubber-band the whole app or drag the header down. */
    html body.im-chat-page {
      overscroll-behavior: none;
    }
    html body.im-chat-page .im-table.im-messages,
    html body.im-chat-page .pngm-im-board {
      overscroll-behavior-y: contain;
    }
  }
}