/* =====================================================================
 JobLik 0.33.503 — Automotive desktop gallery architecture
 Desktop only. Mobile gallery contract remains untouched.
 Architecture:
  - sticky row 1: category / search / city
  - sticky row 2: filter icon + operational chips
  - right filter panel
  - results grid
  - listing card content stays inherited from existing/mobile contract
 ===================================================================== */

@media (min-width:761px){

  body.j503-gallery-desktop{
    --j503-top-1:56px;
    --j503-top-2:50px;
    --j503-sidebar:285px;
    --j503-gap:14px;
    background:#f7f9fa!important;
  }

  /* Gallery pages should not have mobile-only controls on desktop. */
  body.j503-gallery-desktop .jam-bottom-nav,
  body.j503-gallery-desktop .j431-divar-nav,
  body.j503-gallery-desktop .jam-home-top,
  body.j503-gallery-desktop .jam-top-mounted,
  body.j503-gallery-desktop .jam-filter-strip,
  body.j503-gallery-desktop .jam-primary-row{
    display:none!important;
  }

  body.j503-gallery-desktop .j503-gallery-shell{
    direction:rtl;
    width:100%;
    max-width:none;
    box-sizing:border-box;
    margin:0;
    padding:0 14px 24px;
    background:#f7f9fa;
  }

  /* ---------------- Top fixed/sticky row 1 ---------------- */
  body.j503-gallery-desktop .j503-topbar-primary{
    position:sticky;
    top:0;
    z-index:1100;
    display:grid;
    grid-template-columns:190px minmax(280px,1fr) 180px;
    gap:12px;
    align-items:center;
    min-height:var(--j503-top-1);
    margin:0 -14px;
    padding:8px 18px;
    box-sizing:border-box;
    background:rgba(255,255,255,.985);
    border-bottom:1px solid #e4e8eb;
    box-shadow:0 1px 4px rgba(0,0,0,.035);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
  }

  body.j503-gallery-desktop .j503-category,
  body.j503-gallery-desktop .j503-search-wrap,
  body.j503-gallery-desktop .j503-city{
    height:40px;
    min-width:0;
    display:flex;
    align-items:center;
    border:1px solid #dfe5e9;
    border-radius:9px;
    background:#fff;
    color:#34424d;
    box-sizing:border-box;
  }

  body.j503-gallery-desktop .j503-category,
  body.j503-gallery-desktop .j503-city{
    padding:0 12px;
    gap:8px;
    justify-content:space-between;
    font-weight:700;
    white-space:nowrap;
  }

  body.j503-gallery-desktop .j503-search-wrap{
    position:relative;
    padding:0 12px;
  }

  body.j503-gallery-desktop .j503-search-wrap svg{
    flex:0 0 20px;
    width:20px;
    height:20px;
    stroke:#75808a;
  }

  body.j503-gallery-desktop .j503-search{
    width:100%;
    height:100%;
    min-width:0;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    color:#26333d!important;
    font:500 13px/1.5 Vazirmatn,Tahoma,sans-serif!important;
    padding:0 10px!important;
  }

  body.j503-gallery-desktop .j503-search::placeholder{
    color:#8a949c!important;
    opacity:1!important;
  }

  /* ---------------- Top fixed/sticky row 2 ---------------- */
  body.j503-gallery-desktop .j503-topbar-secondary{
    position:sticky;
    top:var(--j503-top-1);
    z-index:1090;
    display:flex;
    align-items:center;
    gap:8px;
    min-height:var(--j503-top-2);
    margin:0 -14px 14px;
    padding:6px 18px;
    box-sizing:border-box;
    overflow-x:auto;
    scrollbar-width:none;
    background:rgba(255,255,255,.985);
    border-bottom:1px solid #e7ebee;
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
  }
  body.j503-gallery-desktop .j503-topbar-secondary::-webkit-scrollbar{display:none}

  body.j503-gallery-desktop .j503-filter-toggle,
  body.j503-gallery-desktop .j503-chip{
    flex:0 0 auto;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 13px;
    border:1px solid #dfe5e9;
    border-radius:8px;
    background:#fff;
    color:#46535d;
    font:700 12px/1 Vazirmatn,Tahoma,sans-serif;
    cursor:pointer;
    text-decoration:none;
    white-space:nowrap;
  }
  body.j503-gallery-desktop .j503-filter-toggle{
    margin-left:auto;
  }
  body.j503-gallery-desktop .j503-chip.is-active{
    color:#e85e0b;
    border-color:#ffc6a4;
    background:#fff7f2;
  }
  body.j503-gallery-desktop .j503-filter-toggle svg,
  body.j503-gallery-desktop .j503-chip svg{
    width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
  }

  /* ---------------- Workspace ---------------- */
  body.j503-gallery-desktop .j503-workspace{
    direction:ltr;
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--j503-sidebar);
    gap:var(--j503-gap);
    align-items:start;
  }

  body.j503-gallery-desktop .j503-results{
    direction:rtl;
    min-width:0;
    order:1;
  }

  body.j503-gallery-desktop .j503-sidebar{
    direction:rtl;
    order:2;
    position:sticky;
    top:calc(var(--j503-top-1) + var(--j503-top-2) + 12px);
    max-height:calc(100vh - var(--j503-top-1) - var(--j503-top-2) - 26px);
    overflow:auto;
    box-sizing:border-box;
    border:1px solid #e1e6e9;
    border-radius:11px;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.035);
  }

  body.j503-gallery-desktop .j503-sidebar-head{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:48px;
    padding:0 14px;
    background:#fff;
    border-bottom:1px solid #edf0f2;
  }
  body.j503-gallery-desktop .j503-sidebar-head strong{
    font-size:15px;color:#202c35;
  }
  body.j503-gallery-desktop .j503-sidebar-close{
    display:none;
  }

  body.j503-gallery-desktop .j503-filter-section{
    padding:13px 14px;
    border-bottom:1px solid #edf0f2;
  }
  body.j503-gallery-desktop .j503-filter-section:last-of-type{border-bottom:0}
  body.j503-gallery-desktop .j503-filter-section h4{
    margin:0 0 10px;
    color:#26343e;
    font-size:12.5px;
    font-weight:850;
  }
  body.j503-gallery-desktop .j503-filter-section label{
    display:flex;
    align-items:center;
    gap:7px;
    margin:7px 0;
    color:#4b5963;
    font-size:12px;
    line-height:1.5;
  }
  body.j503-gallery-desktop .j503-filter-section input[type=checkbox],
  body.j503-gallery-desktop .j503-filter-section input[type=radio]{
    width:15px;height:15px;accent-color:#f36a21;
  }
  body.j503-gallery-desktop .j503-field,
  body.j503-gallery-desktop .j503-select{
    width:100%;
    height:38px;
    box-sizing:border-box;
    border:1px solid #dfe5e9;
    border-radius:8px;
    background:#fff;
    color:#394750;
    font:500 12px/1.5 Vazirmatn,Tahoma,sans-serif;
    padding:0 10px;
    outline:0;
  }
  body.j503-gallery-desktop .j503-range{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  body.j503-gallery-desktop .j503-filter-actions{
    position:sticky;
    bottom:0;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:8px;
    padding:10px 12px;
    background:#fff;
    border-top:1px solid #e5e9ec;
  }
  body.j503-gallery-desktop .j503-filter-actions button{
    height:39px;
    border-radius:8px;
    font:800 12px Vazirmatn,Tahoma,sans-serif;
    cursor:pointer;
  }
  body.j503-gallery-desktop .j503-apply{
    border:1px solid #f36a21;
    background:#f36a21;
    color:#fff;
  }
  body.j503-gallery-desktop .j503-reset{
    border:1px solid #dfe5e9;
    background:#fff;
    color:#4b5963;
  }

  /* ---------------- Result header ---------------- */
  body.j503-gallery-desktop .j503-results-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:38px;
    margin:0 0 8px;
    color:#63707a;
    font-size:11.5px;
  }
  body.j503-gallery-desktop .j503-view-icons{
    display:flex;gap:6px;
  }
  body.j503-gallery-desktop .j503-view-icons button{
    width:34px;height:34px;border:1px solid #e0e5e8;border-radius:8px;
    background:#fff;color:#7a858d;cursor:pointer;
  }
  body.j503-gallery-desktop .j503-view-icons button.is-active{
    color:#ef6517;background:#fff8f3;border-color:#ffc8a9;
  }

  /* Existing real gallery section becomes the result canvas. */
  body.j503-gallery-desktop .j503-results #featured,
  body.j503-gallery-desktop .j503-results .v064-featured,
  body.j503-gallery-desktop .j503-results .automotive-gallery-only{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
  }

  body.j503-gallery-desktop .j503-results .j146-legacy-gallery{
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  body.j503-gallery-desktop .j503-results [data-public-gallery],
  body.j503-gallery-desktop .j503-results .v064-cars-row.apg-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    align-items:stretch!important;
  }

  /* ---------------- Cards: mobile content contract, desktop canvas ----------------
     We don't recreate card data. Existing card contents/images/meta remain intact.
     Runtime only marks the existing card and its media wrapper. */
  body.j503-gallery-desktop .j503-card{
    position:relative!important;
    display:block!important;
    min-width:0!important;
    min-height:174px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid #e2e7ea!important;
    border-radius:9px!important;
    background:#fff!important;
    box-shadow:0 1px 4px rgba(0,0,0,.025)!important;
    color:#26343e!important;
  }

  body.j503-gallery-desktop .j503-card:hover{
    border-color:#f0b28b!important;
    box-shadow:0 3px 10px rgba(0,0,0,.055)!important;
  }

  body.j503-gallery-desktop .j503-card > a.j503-card-link,
  body.j503-gallery-desktop .j503-card .j503-card-link{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 154px!important;
    grid-template-rows:minmax(132px,auto) auto!important;
    min-height:172px!important;
    width:100%!important;
    box-sizing:border-box!important;
    color:inherit!important;
    text-decoration:none!important;
  }

  body.j503-gallery-desktop .j503-card-media{
    grid-column:2!important;
    grid-row:1!important;
    width:154px!important;
    height:132px!important;
    margin:10px 10px 4px 0!important;
    overflow:hidden!important;
    border-radius:7px!important;
    background:#eef1f3!important;
    align-self:start!important;
  }
  body.j503-gallery-desktop .j503-card-media img,
  body.j503-gallery-desktop .j503-card-media picture,
  body.j503-gallery-desktop .j503-card-media video{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    margin:0!important;
  }

  body.j503-gallery-desktop .j503-card-copy{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    padding:11px 11px 5px 8px!important;
    box-sizing:border-box!important;
  }

  body.j503-gallery-desktop .j503-card-title{
    display:block!important;
    margin:0 0 7px!important;
    color:#ef6517!important;
    font-size:13px!important;
    line-height:1.65!important;
    font-weight:850!important;
    white-space:normal!important;
  }

  body.j503-gallery-desktop .j503-card-copy,
  body.j503-gallery-desktop .j503-card-copy *{
    line-height:1.65;
  }

  body.j503-gallery-desktop .j503-card-meta{
    grid-column:1 / -1!important;
    grid-row:2!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:30px!important;
    padding:4px 10px!important;
    box-sizing:border-box!important;
    border-top:1px solid #f0f2f3!important;
    background:#fff!important;
    color:#71808a!important;
    font-size:10.5px!important;
  }

  body.j503-gallery-desktop .j503-card .j503-verified{
    color:#159b57!important;
    font-weight:800!important;
  }

  /* Remove old outer desktop card dimensions but not their actual content. */
  body.j503-gallery-desktop .j503-card[style]{
    max-width:none!important;
  }

  body.j503-gallery-desktop .j503-empty{
    grid-column:1/-1;
    padding:36px 20px;
    border:1px solid #e0e5e8;
    border-radius:10px;
    background:#fff;
    text-align:center;
    color:#697781;
    font-size:13px;
  }

  @media (max-width:1180px){
    body.j503-gallery-desktop{
      --j503-sidebar:250px;
    }
    body.j503-gallery-desktop .j503-results [data-public-gallery],
    body.j503-gallery-desktop .j503-results .v064-cars-row.apg-grid{
      grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
  }
}

/* Absolute guard: 503 has zero layout effect on the locked mobile gallery. */
@media (max-width:760px){
  .j503-gallery-shell,
  .j503-topbar-primary,
  .j503-topbar-secondary,
  .j503-sidebar,
  .j503-results-head{
    all:revert;
  }
}