/* ============================================================
   HIDE /rent — Choose your flat (shop + booking)
   Mobile-first. Reuses css/v4.css for tokens, buttons, topbar, type.
   Three stacked swipeable carousels: Studios · 1 Bedroom · 2 Bedroom.
   ============================================================ */

/* page intro */
.shop-hero{ padding:104px 0 26px; }
.shop-hero .eyebrow{ margin-bottom:18px; }
.shop-hero h1{ font-family:var(--display); font-weight:400; font-size:clamp(36px,8vw,68px); line-height:1.0; letter-spacing:-0.02em; }
.shop-hero h1 em{ font-style:italic; color:var(--accent); }
.shop-hero .lede{ font-size:clamp(15px,1.7vw,18px); color:var(--ink-soft); max-width:52ch; margin-top:16px; }
.shop-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; }
.shop-meta .m{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); font-weight:500; }
.shop-meta .m b{ color:var(--ink); font-weight:700; }
.shop-meta .m .pip{ width:7px; height:7px; border-radius:50%; background:var(--accent); position:relative; }
.shop-meta .m .pip::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--accent); animation:pulse 2.2s var(--ease-io) infinite; }

/* type filter (jump links) */
.typenav{ position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line); }
.typenav-in{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:12px 0; }
.typenav-in::-webkit-scrollbar{ display:none; }
.tnchip{ flex:none; border:1px solid var(--line-2); background:transparent; border-radius:var(--pill); font-size:13px; font-weight:600; padding:9px 16px; color:var(--ink-soft); transition:all var(--d-fast) var(--ease); white-space:nowrap; }
.tnchip:hover{ color:var(--ink); border-color:var(--ink); }
.tnchip.on{ background:var(--ink); color:#14110c; border-color:var(--ink); }
.tnchip small{ opacity:.6; margin-left:5px; }

/* group block */
.group{ padding:42px 0 30px; }
.group-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.group-head .gl .eyebrow{ margin-bottom:10px; }
.group-head .gl h2{ font-family:var(--display); font-weight:400; font-size:clamp(28px,4.6vw,44px); line-height:1.0; letter-spacing:-0.018em; }
.group-head .gl .gsub{ font-size:14px; color:var(--ink-soft); margin-top:8px; max-width:48ch; }
.group-head .gr{ display:none; gap:8px; flex:none; }
.cbtn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; transition:all var(--d-fast) var(--ease); }
.cbtn:hover:not(:disabled){ border-color:var(--ink); background:rgba(245,240,232,.05); transform:translateY(-1px); }
.cbtn:disabled{ opacity:.3; cursor:default; }
.cbtn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; }

/* carousel */
.carousel-wrap{ position:relative; }
.carousel{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:6px 0 8px; scroll-padding-left:0; }
.carousel::-webkit-scrollbar{ display:none; }
.carousel.edge{ margin:0 -18px; padding-left:18px; padding-right:18px; }

/* flat card */
.fcard{ flex:none; width:82vw; max-width:340px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--d) var(--ease), border-color var(--d) var(--ease); }
.fcard:hover{ border-color:var(--line-2); }
.fcard.sold{ opacity:.72; }
.fc-media{ position:relative; aspect-ratio:4/3.1; overflow:hidden; cursor:zoom-in; background:var(--surface-2); }
.fc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.fcard:hover .fc-media img{ transform:scale(1.05); }
.fc-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(11,10,9,.5),transparent 42%); pointer-events:none; }
.fc-badge{ position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:700; letter-spacing:.04em; padding:6px 11px; border-radius:var(--pill); backdrop-filter:blur(8px); }
.fc-badge.av{ background:rgba(231,200,154,.16); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); }
.fc-badge.few{ background:rgba(231,200,154,.92); color:#1a1510; }
.fc-badge.sold{ background:rgba(20,18,14,.7); color:var(--ink-soft); border:1px solid var(--line-2); text-transform:uppercase; letter-spacing:.1em; }
.fc-photos{ position:absolute; bottom:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#fff; background:rgba(11,10,9,.5); backdrop-filter:blur(8px); padding:6px 10px; border-radius:var(--pill); }
.fc-photos svg{ width:13px; height:13px; stroke:#fff; fill:none; stroke-width:1.8; }

.fc-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.fc-name{ font-family:var(--display); font-weight:400; font-size:24px; line-height:1.04; letter-spacing:-0.015em; }
.fc-view{ font-size:13.5px; color:var(--ink-soft); margin-top:5px; line-height:1.45; min-height:2.5em; }
.fc-specs{ display:flex; flex-wrap:wrap; gap:7px; margin:15px 0 0; }
.fc-spec{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--pill); padding:6px 11px; }
.fc-spec svg{ width:14px; height:14px; stroke:var(--accent); fill:none; stroke-width:1.7; }
.fc-foot{ margin-top:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.fc-price{ line-height:1; }
.fc-price .p{ font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:-0.02em; }
.fc-price .p s{ color:var(--ink-faint); text-decoration-thickness:1.5px; }
.fc-price .u{ font-size:12px; color:var(--ink-soft); display:block; margin-top:3px; }
.fc-cta{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.fc-cta .btn{ width:100%; }
.fc-left{ font-size:12.5px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:7px; margin-top:2px; }
.fc-left::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* progress dots */
.cdots{ display:flex; gap:7px; justify-content:center; margin-top:16px; }
.cdots i{ width:7px; height:7px; border-radius:50%; background:var(--ink-ghost); transition:all var(--d) var(--ease); cursor:pointer; }
.cdots i.on{ background:var(--accent); width:22px; border-radius:99px; }

/* sticky help bar */
.helpbar{ position:sticky; bottom:0; z-index:25; margin-top:30px; }
.helpbar-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:14px 16px 14px 20px; box-shadow:0 -10px 40px -20px rgba(0,0,0,.6); }
.helpbar-in .ht{ font-size:14px; }
.helpbar-in .ht b{ font-weight:700; }
.helpbar-in .ht small{ display:block; color:var(--ink-soft); font-size:12px; margin-top:1px; }

/* ============ Lightbox ============ */
.lb{ position:fixed; inset:0; z-index:100; background:rgba(6,5,4,.92); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity var(--d) var(--ease); display:flex; flex-direction:column; }
.lb.open{ opacity:1; pointer-events:auto; }
.lb-top{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; flex:none; }
.lb-title{ font-family:var(--display); font-size:20px; }
.lb-title small{ font-family:var(--sans); font-size:12px; color:var(--ink-soft); display:block; letter-spacing:0; }
.lb-close{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.lb-close svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.lb-stage{ flex:1; position:relative; overflow:hidden; min-height:0; }
.lb-track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.lb-track::-webkit-scrollbar{ display:none; }
.lb-track > div{ flex:none; width:100%; height:100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center; padding:0 12px; }
.lb-track img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; }
.lb-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0; background:rgba(20,18,14,.6); backdrop-filter:blur(8px); color:#fff; display:none; align-items:center; justify-content:center; z-index:3; }
.lb-arrow svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; }
.lb-arrow.prev{ left:16px; } .lb-arrow.next{ right:16px; }
/* Whose apartment is in the gallery — 'group' or stock photos have to say so. Empty and
   display:none for a unit shot in that unit, which needs no caption. */
.lb-note{ flex:none; margin:0; padding:10px 18px 0; font-size:12.5px; line-height:1.45; color:var(--ink-soft); }
.lb-note:empty{ display:none; }
.lb-bottom{ flex:none; padding:14px 18px calc(16px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lb-dots{ display:flex; gap:7px; }
.lb-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(245,240,232,.25); transition:all var(--d) var(--ease); }
.lb-dots i.on{ background:var(--accent); width:22px; border-radius:99px; }

@media(min-width:760px){
  .shop-hero{ padding:120px 0 30px; }
  .group-head .gr{ display:flex; }
  .fcard{ width:340px; }
  .cdots{ display:none; }
  .lb-arrow{ display:flex; }
  .helpbar{ position:static; }
}
@media(min-width:1100px){
  .fcard{ width:360px; }
}