/* Property360 Listing UI Polish — Overlay 342
   - canonical gallery only (no duplicate photo gallery below)
   - media player inherits agency theme
   - mobile listing tabs stay compact and horizontally scrollable
*/

.p360-xp{
  --xp-brand:var(--xp-agency-brand,var(--p360-theme-primary,var(--p360-primary,#0795df)));
  --xp-brand-deep:var(--p360-theme-primary-deep,var(--p360-primary-deep,var(--xp-brand)));
  border-color:color-mix(in srgb,var(--xp-brand) 18%,#dbe6f0);
}
.p360-xp__kicker{color:var(--xp-brand)}
.p360-xp__badges span{
  background:color-mix(in srgb,var(--xp-brand) 11%,#fff);
  color:var(--xp-brand-deep);
}
.p360-xp__tab.is-active{
  background:var(--xp-brand);
  border-color:var(--xp-brand);
}
.p360-xp__thumb.is-active{
  border-color:var(--xp-brand);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--xp-brand) 14%,transparent);
}
.p360-xp__download-option:hover{
  border-color:color-mix(in srgb,var(--xp-brand) 45%,#dbe6f0);
  background:color-mix(in srgb,var(--xp-brand) 4%,#fff);
}
.p360-xp__download-option>span:first-child{
  background:color-mix(in srgb,var(--xp-brand) 10%,#fff);
  color:var(--xp-brand-deep);
}

/* The Experience Player is the canonical photo browser. When it is present,
   the old Spek photo grid is the exact same media repeated a second time.
   Keep Spek statistics/details, remove only the duplicate gallery. */
.p360-lh-experience ~ .p360-lh-tabs + .p360-lh-panel[data-lh-panel="spek"] .p360-lh-gallery{
  display:none !important;
}

/* The old lightbox belongs to that duplicate gallery; no visual space needed. */
.p360-lh-experience ~ .p360-lh-tabs + .p360-lh-panel[data-lh-panel="spek"] .p360-lh-gallery + *{
  margin-top:0;
}

/* Internal listing page should consistently inherit the current workspace /
   agency theme instead of mixing gold/blue/Property360 defaults. */
.p360-lh-experience{
  --p360-primary:var(--p360-theme-primary,var(--p360-primary,#0795df));
  --p360-primary-deep:var(--p360-theme-primary-deep,var(--p360-primary-deep,var(--p360-theme-primary,#0679b7)));
}
.p360-lh-tab.is-active{
  background:var(--p360-theme-primary,var(--p360-primary,#0795df)) !important;
  border-color:var(--p360-theme-primary,var(--p360-primary,#0795df)) !important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--p360-theme-primary,var(--p360-primary,#0795df)) 24%,transparent) !important;
}
.p360-lh-tab:hover{
  border-color:color-mix(in srgb,var(--p360-theme-primary,var(--p360-primary,#0795df)) 35%,#d9e3ef);
}

/* Mobile polish: one clean tab row instead of two bulky rows. */
@media(max-width:640px){
  .p360-lh-tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:7px !important;
    margin:0 -4px 14px !important;
    padding:2px 4px 6px !important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .p360-lh-tab{
    flex:0 0 auto !important;
    height:42px !important;
    padding:0 16px !important;
    border-radius:13px !important;
    scroll-snap-align:start;
    white-space:nowrap;
  }

  .p360-lh-experience{
    padding:12px !important;
    border-radius:18px !important;
    margin-bottom:12px !important;
  }

  .p360-xp{
    padding:10px;
    border-radius:16px;
    box-shadow:0 8px 22px rgba(16,42,67,.07);
  }

  .p360-xp__rail{
    gap:8px;
    padding-top:10px;
  }
  .p360-xp__thumb{
    flex-basis:86px;
    height:58px;
    border-radius:10px;
  }

  /* Photo type tabs should look like a compact filter, not a second huge nav. */
  .p360-xp__tabs{
    margin-top:10px;
    gap:6px;
  }
  .p360-xp__tab{
    padding:7px 12px;
    font-size:11px;
  }

  .p360-lh-panel[data-lh-panel="spek"]{
    padding-top:0;
  }
}

/* Very narrow screens: use slightly smaller thumbnails but keep enough of
   the next card visible to communicate horizontal scrolling. */
@media(max-width:390px){
  .p360-xp__thumb{
    flex-basis:80px;
    height:54px;
  }
  .p360-lh-tab{
    height:40px !important;
    padding:0 14px !important;
    font-size:12px !important;
  }
}