/* Home page listings slideshow (2026-09-28).
   A red panel (#FF0604, the red from the "MIGHA" reference) holding a
   horizontal 3D slideshow of 8 solid white listing cards with a parallax feel,
   after "Horizontal navigation slideshow – Delassus": as the track moves,
   each card's content drifts at its own speed, cards away from the middle
   shrink a little, and a big word band behind them moves slower still. */
html:root body .hf-show{
  position:relative; overflow:hidden; margin-top:4px;
  background:#000; border-radius:28px; padding:34px 0 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(13,13,11,0.08), 0 16px 34px -14px rgba(13,13,11,0.38);
}
/* Big lettering behind the cards (moves slower than the cards) */
html:root body .hf-show-bg{
  position:absolute; left:0; top:50%; transform:translateY(-58%); pointer-events:none; white-space:nowrap;
  will-change:transform;
}
html:root body .hf-show-bg span{
  display:block; font-family:var(--b-display, inherit) !important; font-weight:800 !important;
  font-size:clamp(96px, 15vw, 220px); line-height:.9; letter-spacing:-.05em; text-transform:uppercase;
  color:rgba(0,0,0,0.16) !important;
}
/* The track: horizontal, snapping, swipe/drag/arrow keys */
html:root body .hf-show-track{
  position:relative; z-index:1; display:flex; gap:22px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:32px; padding:10px 32px 18px; scrollbar-width:none;
  cursor:grab; perspective:1400px; perspective-origin:50% 50%;
}
html:root body .hf-show-track::-webkit-scrollbar{ display:none; }
html:root body .hf-show-track::after{ content:''; flex:0 0 10px; }
html:root body .hf-show-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
html:root body .hf-show-track.is-dragging a{ pointer-events:none; }
html:root body .hf-show-track:focus-visible{ outline:2px solid #0d0d0b; outline-offset:-4px; border-radius:20px; }
html:root body .hf-show-track > .hf-card{
  flex:0 0 clamp(270px, 36%, 440px); min-height:250px; overflow:hidden; scroll-snap-align:start;
  transform-origin:50% 50%; will-change:transform; transition:box-shadow .2s ease;
  background:#fff !important; border:1px solid #fff !important;
  box-shadow:0 2px 4px rgba(0,0,0,0.12), 0 22px 40px -16px rgba(0,0,0,0.55) !important;
}
html:root body .hf-show-track > .hf-card:hover{ transform:none; }
html:root body .hf-show-track .hf-card-in{ display:flex; flex-direction:column; gap:8px; will-change:transform; }
html:root body .hf-show-track .hf-card-title{ font-size:20px !important; -webkit-line-clamp:3; }
/* Counter + arrows */
html:root body .hf-show-nav{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 32px 0;
}
html:root body .hf-show-count{ font-size:14px; font-weight:700; letter-spacing:.14em; color:#0d0d0b; font-variant-numeric:tabular-nums; }
html:root body .hf-show-progress{ flex:1 1 auto; height:3px; margin:0 8px; border-radius:3px; background:rgba(0,0,0,0.22); overflow:hidden; }
html:root body .hf-show-progress span{ display:block; height:100%; width:12.5%; background:#0d0d0b; border-radius:3px; transition:transform .25s ease; transform-origin:0 50%; }
html:root body .hf-show-btns{ display:flex; gap:8px; }
html:root body .hf-show-btn{
  width:44px; height:38px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:999px; border:1.5px solid #000; color:#000;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.78) 55%, rgba(255,255,255,0.62) 100%);
  box-shadow:inset 0 2px 1px #fff, 0 8px 18px -10px rgba(20,21,26,0.45);
}
html:root body .hf-show-btn:hover{ background:#000; color:#fff; }
html:root body .hf-show-btn:disabled{ opacity:.35; cursor:default; background:rgba(255,255,255,0.6); color:#000; }
html:root body .hf-show-btn:focus-visible{ outline:2px solid #0d0d0b; outline-offset:3px; }
html:root body .hf-show-btn svg{ width:18px; height:18px; stroke:currentColor; }
@media (max-width:640px){
  html:root body .hf-show{ border-radius:22px; padding:24px 0 16px; }
  html:root body .hf-show-track{ padding:8px 18px 14px; scroll-padding-inline:18px; gap:14px; }
  html:root body .hf-show-track > .hf-card{ flex-basis:82%; }
  html:root body .hf-show-nav{ padding:2px 18px 0; }
}
@media (prefers-reduced-motion: reduce){
  html:root body .hf-show-track > .hf-card, html:root body .hf-show-track .hf-card-in, html:root body .hf-show-bg{ transform:none !important; }
}

/* Black panel: counter and progress in white */
html:root body .hf-show-count{ color:#fff !important; }
html:root body .hf-show-progress{ background:rgba(255,255,255,0.25) !important; }
html:root body .hf-show-progress span{ background:#fff !important; }
/* Gliding on its own: no snapping while it moves */
html:root body .hf-show-track.is-auto{ scroll-snap-type:none; }
/* A tapped (held) listing: green ring, tap again to open */
html:root body .hf-show-track > .hf-card.is-held{ outline:3px solid #00a63d; outline-offset:3px; }
/* Phones: listings stack down the page instead of sliding sideways.
   First 4 show; "Show 4 More Listings" reveals the rest. */
html:root body .hf-more-btn{ display:none; }
@media (max-width:640px){
  html:root body .hf-show{ padding:16px 14px 18px !important; }
  html:root body .hf-show-track{
    display:grid !important; grid-template-columns:1fr !important; gap:12px !important;
    overflow:visible !important; scroll-snap-type:none !important; padding:0 !important; perspective:none !important; cursor:default !important;
  }
  html:root body .hf-show-track::after{ display:none !important; }
  html:root body .hf-show-track > .hf-card{ flex:none !important; width:auto !important; min-height:0 !important; transform:none !important; }
  html:root body .hf-show-track > .hf-card:nth-child(n+5){ display:none !important; }
  html:root body .hf-show-track.show-all > .hf-card:nth-child(n+5){ display:flex !important; }
  html:root body .hf-show-track .hf-card-in{ transform:none !important; }
  html:root body .hf-show-nav{ display:none !important; }
  html:root body .hf-more-btn{
    display:flex; align-items:center; justify-content:center; width:100%; height:38px; margin-top:12px; cursor:pointer;
    border-radius:999px; border:2px solid #00a63d; background:#00a63d; color:#fff; font:700 14px/1 inherit;
    box-shadow:inset 0 2px 1px rgba(255,255,255,0.35), 0 10px 22px -10px rgba(0,166,61,0.6);
  }
  html:root body .hf-more-btn:is(:hover, :active){ background:#00a63d; color:#fff; filter:brightness(.92); }
}