/* /market listing page: gallery, lightbox, price block, facts, trust strip, sticky call-to-action. Owned by the listing stream. Colours: var(--ay-*) only. */

/* Breadcrumb links should have full-sized tap areas on phones. */
body.pt .ls-crumbs a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; box-sizing: border-box; }

.ls-ico{flex:0 0 auto;width:20px;height:20px}
.ls-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0 0 8px;padding:0;font-size:13px;color:var(--ay-text-muted)}
.ls-crumbs li+li::before{content:"‹";margin-inline:6px;color:var(--ay-text-muted)}
.ls-crumbs a{color:var(--ay-text-muted);text-decoration:none;display:inline-block;padding:6px 0}
.ls-crumbs a:hover{color:var(--ay-accent)}
.ls-crumbs li[aria-current]{color:var(--ay-text);max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 0}

.ls-page{display:block;padding:0 0 16px;overflow:hidden;background:var(--ay-surface);color:var(--ay-text);border-color:var(--ay-border)}
.ls-page>*:not(.ls-gallery):not(.ls-nophoto){margin-inline:16px}

/* gallery: a native snap scroller, so it works without JavaScript */
.ls-gallery{position:relative;margin:0 0 12px;background:var(--ay-surface-2)}
.ls-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline-offset:-3px}
.ls-track::-webkit-scrollbar{display:none}
.ls-track:focus-visible{outline:3px solid var(--ay-focus)}
.ls-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;max-height:70vh}
.ls-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.ls-open img{display:block;width:100%;height:100%;object-fit:cover}
.ls-counter{position:absolute;inset-block-end:10px;inset-inline-start:10px;padding:2px 10px;border-radius:999px;background:var(--ay-surface);color:var(--ay-text);border:1px solid var(--ay-border);font-size:13px;font-weight:700;line-height:1.7}
.ls-thumbs{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;scrollbar-width:none}
.ls-thumbs::-webkit-scrollbar{display:none}
.ls-thumb{flex:0 0 72px;width:72px;height:54px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--ay-surface);opacity:.75;cursor:pointer}
.ls-thumb[aria-current]{border-color:var(--ay-accent);opacity:1}
.ls-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ls-thumb:focus-visible{outline:3px solid var(--ay-focus);outline-offset:1px}
.ls-nophoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:4/3;max-height:50vh;max-height:50dvh;margin:0 0 12px;background:var(--ay-surface-2);color:var(--ay-text-muted);border-bottom:1px solid var(--ay-border)}
.ls-nophoto .ls-ico{width:40px;height:40px;color:var(--ay-accent)}
.ls-nophoto b{color:var(--ay-text);font-size:16px}

/* lightbox */
body.ls-lb-open{overflow:hidden}
.ls-lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:var(--ay-bg);color:var(--ay-text)}
.ls-lightbox[hidden]{display:none}
.ls-lb-bar{position:absolute;inset-block-start:0;inset-inline:0;display:flex;align-items:center;gap:8px;padding:8px 12px;z-index:2}
.ls-lb-count{margin-inline-end:auto;font-weight:700;font-size:14px}
.ls-lb-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ay-border);background:var(--ay-surface);color:var(--ay-text);cursor:pointer;padding:0}
.ls-lb-btn:focus-visible{outline:3px solid var(--ay-focus);outline-offset:2px}
.ls-lb-prev,.ls-lb-next{position:absolute;inset-block-start:50%;margin-top:-22px;z-index:2}
.ls-lb-prev{inset-inline-start:8px}
.ls-lb-next{inset-inline-end:8px}
.ls-lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y pinch-zoom}
.ls-lb-stage.is-zoomed{overflow:auto;display:block;touch-action:auto}
.ls-lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none}
.ls-lb-stage.is-zoomed .ls-lb-img{max-width:none;max-height:none;width:220%;height:auto;cursor:zoom-out}

/* header, price */
.ls-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ls-head .pt-h1{font-size:19px;line-height:1.6;margin:0}
.ls-place{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 2px;font-size:14px}
.ls-place .ls-ico,.ls-where-line .ls-ico{width:18px;height:18px;color:var(--ay-accent)}
.ls-meta{margin:2px 0 0}
.ls-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--ay-border);background:var(--ay-surface);color:var(--ay-text);cursor:pointer;padding:0}
.ls-icon-btn:focus-visible,.ls-menu-item:focus-visible,.ls-more-btn:focus-visible{outline:3px solid var(--ay-focus);outline-offset:2px}
.ls-more-wrap{position:relative;flex:0 0 auto}
.ls-menu{position:absolute;inset-inline-end:0;inset-block-start:48px;z-index:20;min-width:200px;background:var(--ay-surface);border:1px solid var(--ay-border);border-radius:14px;padding:6px;box-shadow:0 8px 24px var(--ay-border)}
.ls-menu[hidden]{display:none}
.ls-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:none;color:var(--ay-text);font:inherit;font-weight:600;cursor:pointer;text-align:start}
.ls-menu-item:hover{background:var(--ay-surface-2)}
.ls-menu-item[aria-pressed=true] .ls-ico{color:var(--ay-accent)}
.ls-price{margin:12px 0 8px;padding:12px 14px;border-radius:14px;background:var(--ay-surface-2);border:1px solid var(--ay-border)}
.ls-price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:2px 0}
.ls-price-label{color:var(--ay-text-muted);font-size:14px;min-width:84px}
.ls-price-value{color:var(--ay-accent);font-size:20px;font-weight:800}
.ls-price-words{flex-basis:100%;color:var(--ay-text-muted);font-size:13px}
.ls-per-meter{margin:6px 0 0;font-size:14px}

/* chips, trust strip */
.ls-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-block:8px}
.ls-chips li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--ay-border);background:var(--ay-surface);font-size:13px}
.ls-chips .ls-ico{width:18px;height:18px;color:var(--ay-accent)}
.ls-trust{display:grid;gap:8px;list-style:none;padding:12px 14px;margin-block:12px;border-radius:14px;border:1px solid var(--ay-border);background:var(--ay-surface-2)}
.ls-trust li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.7}
.ls-trust .ls-ico{color:var(--ay-ok);margin-top:2px}

/* sections */
.ls-section{margin-block:16px}
.ls-section .pt-h2{font-size:16px}
.ls-specs{width:100%;border-collapse:collapse}
.ls-specs th,.ls-specs td{padding:10px 4px;border-bottom:1px solid var(--ay-border);text-align:start;font-size:14px}
.ls-specs th{font-weight:600;color:var(--ay-text-muted);white-space:nowrap}
.ls-specs th .ls-ico{vertical-align:middle;margin-inline-end:8px;color:var(--ay-accent)}
.ls-specs td{font-weight:700;color:var(--ay-text)}
.ls-amen{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.ls-amen li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;background:var(--ay-surface-2);font-size:14px}
.ls-amen .ls-ico{color:var(--ay-accent)}
.ls-desc{line-height:1.9;white-space:pre-line;overflow-wrap:anywhere}
.ls-desc p{margin:0}
.ls-desc.is-clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ls-more-btn{margin-top:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ay-accent);font:inherit;font-weight:700;cursor:pointer}
.ls-more-btn[hidden]{display:none}
.ls-where-line{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-weight:600}
.ls-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* inline actions (desktop); on a phone the sticky bar below replaces them */
.ls-cta{margin-block:16px}
.ls-bar{display:none}
@media (max-width:767.98px){
  .ls-cta{display:none}
  .ls-bar{position:fixed;inset-inline:0;bottom:calc(var(--tabh, 60px) + env(safe-area-inset-bottom));z-index:28;display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:8px;padding:8px 12px;background:var(--ay-surface);border-top:1px solid var(--ay-border)}
  .ls-bar .pt-btn{min-height:44px;padding:6px 8px;font-size:13px;white-space:nowrap}
  .ls-bar .pt-btn.primary{color:var(--ay-on-accent);background:var(--ay-accent-fill);border-color:var(--ay-accent)}
  body.pt-kb .ls-bar{display:none}
  .ls-page{margin-bottom:76px}
  #pt-similar-box{margin-bottom:72px}
}
@media (min-width:768px){
  .ls-page>*:not(.ls-gallery):not(.ls-nophoto){margin-inline:24px}
  .ls-head .pt-h1{font-size:22px}
  .ls-slide{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){.ls-track{scroll-behavior:auto}}


/* NavyGold / Ashiyan Night — token-driven styles for both themes. */
.ls-price {
  background: linear-gradient(145deg, var(--ay-surface), var(--ay-surface-2)) !important;
  border: 1px solid var(--ay-border) !important;
  box-shadow: var(--ay-shadow-md) !important;
}
.ls-trust {
  background: var(--ay-surface-2) !important;
  border-color: var(--ay-border) !important;
}
.ls-bar {
  background: var(--ay-surface) !important;
  border-top: 1px solid var(--ay-border) !important;
}
.ls-bar .pt-btn.primary {
  background: var(--ay-accent-fill) !important;
  color: var(--ay-on-accent) !important;
  border: 1px solid var(--ay-accent) !important;
  font-weight: 800 !important;
}

/* responsive audit: keep the lightbox controls out of the iOS notch / home indicator area */
.ls-lb-bar{padding-block-start:max(8px,env(safe-area-inset-top));padding-inline:max(12px,env(safe-area-inset-left),env(safe-area-inset-right))}
.ls-lb-prev{inset-inline-start:max(8px,env(safe-area-inset-left))}
.ls-lb-next{inset-inline-end:max(8px,env(safe-area-inset-right))}

/* landscape phones: no second fixed bar above the tab bar; the inline actions come back */
@media (max-width:767.98px) and (orientation:landscape) and (max-height:480px){
  .ls-cta{display:grid}
  .ls-bar{display:none}
  .ls-page{margin-bottom:0}
}