/* Desktop: reuse mobile-style recommend section inside the right list pane.
   Scoped to avoid global side effects. */

.pane-list .recommend-section{
  --recommend-card-width: 172px;
  background:#ffffff;
  /*border-radius:20px;
  padding:16px;
  box-shadow:0 18px 36px rgba(15,23,42,.10);
  border:1px solid rgba(15,23,42,.06);*/
  margin:0 0 16px;
}

.pane-list .recommend-section .section-header{
    display: flex;
    gap: 12px;
    align-items: center;
    flex-direction: row;
    margin-left: 10px;
    margin-bottom : 0px;
}

.pane-list .recommend-section .section-title-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.pane-list .recommend-section .section-title{
  margin:0;
  font-size:14px;
  font-weight:900;
  letter-spacing:-0.2px;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pane-list .section-title-emoji{font-size:16px;line-height:1}

.pane-list .recommend-section .section-ad-label{
  font-size:12px;
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  height:30px;
  border-radius:999px;
  font-weight:900;
  background:linear-gradient(135deg,#f97316,#ef4444);
  box-shadow:0 10px 22px rgba(239,68,68,.20);
  border:1px solid rgba(255,255,255,.26);
  white-space:nowrap;
}

.pane-list .recommend-scroll{
  margin-top:14px;
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  scroll-padding:16px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
}

.pane-list .recommend-scroll{scrollbar-width:none}
.pane-list .recommend-scroll.is-dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
.pane-list .recommend-scroll:not(.is-dragging){cursor:grab}

.pane-list .recommend-scroll::after{content:"";flex:0 0 16px}

/* ===== Swipe (one card per view) ===== */
.pane-list .recommend-section.recommend-section--grid .recommend-scroll{
  display:flex;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}

/* ===== Recommend stack variant (featured-only page: one per row) ===== */
.pane-list .recommend-section.recommend-section--stack .recommend-scroll{
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:visible;
  padding-bottom:0;
  scroll-snap-type: none;
}

.pane-list .recommend-section.recommend-section--stack .recommend-card{
  flex:initial;
  width:auto;
  min-width:0;
}

.pane-list .recommend-section.recommend-section--grid .recommend-card{scroll-snap-align:start}

.pane-list .recommend-scroll::-webkit-scrollbar{display:none}

.pane-list .recommend-card{
  position:relative;
  flex:0 0 var(--recommend-card-width);
  width:var(--recommend-card-width);
  min-width:var(--recommend-card-width);
  border-radius:16px;
  padding:12px;
  border:1px solid #eceff3;
  background:#ffffff;
  box-shadow:0 6px 14px rgba(12,16,28,.06);
  overflow:hidden;
  scroll-snap-align:start;
}

@media (max-width: 420px){
  .pane-list .recommend-section{--recommend-card-width: 172px;}
}

.pane-list .recommend-img{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  border-radius:12px;
  background:#f1f2f5;
  background-size:cover;
  background-position:center;
  margin-bottom:10px;
}

@supports not (aspect-ratio: 1 / 1){
  .pane-list .recommend-img{height:0;padding-top:100%}
}

.pane-list .recommend-ad-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:-0.2px;
  color:#ffffff;
  background:linear-gradient(135deg,#f97316,#ef4444);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 18px rgba(239,68,68,.18);
  pointer-events:none;
}

.pane-list .recommend-ad-badge::before{content:'★';display:inline-block;margin-right:6px;font-size:12px;line-height:1}

.pane-list .card-like-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:none;
  background-color:rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 16px rgba(15,23,42,.12);
  cursor:pointer;
}

.pane-list .heart-icon{position:relative;width:18px;height:16px}

.pane-list .heart-icon::before,
.pane-list .heart-icon::after{
  content:"";
  position:absolute;
  left:9px;
  top:0;
  width:9px;
  height:14px;
  background-color:#ffffff;
  border-radius:10px 10px 0 0;
  border:1.5px solid #e5e7eb;
  border-bottom:none;
  transform:rotate(-45deg);
  transform-origin:0 100%;
  box-sizing:border-box;
}

.pane-list .heart-icon::after{left:0;transform:rotate(45deg);transform-origin:100% 100%}

.pane-list .card-like-btn.is-liked .heart-icon::before,
.pane-list .card-like-btn.is-liked .heart-icon::after{
  background-color:#f97316;
  border-color:#f97316;
}

.pane-list .recommend-info{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#0f172a;
  text-decoration:none;
}

.pane-list .recommend-type{font-size:12px;color:#6b7280}
.pane-list .recommend-price{font-size:14px;font-weight:800;color:#0f1523}

.pane-list .recommend-meta{
  font-size:12px;
  color:#6b7280;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  align-items:center;
}

.pane-list .recommend-dot{margin:0 2px}

.pane-list .recommend-stats{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#9ca3af;
}

.pane-list .recommend-stats .stat{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.pane-list .recommend-stats .stat-value{font-weight:800;color:#64748b}

.pane-list .more-list-btn.more-list-btn--featured{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:12px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,#f97316 0%,#ef4444 55%,#fb923c 100%);
  color:#ffffff;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(249,115,22,.35);
  box-shadow:0 14px 28px rgba(249,115,22,.16);
}

.pane-list .more-list-btn.more-list-btn--featured .more-list-btn__inner{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.pane-list .more-list-btn.more-list-btn--featured .more-list-btn__badge{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);font-size:12px;font-weight:900;letter-spacing:.04em}
.pane-list .more-list-btn.more-list-btn--featured .more-list-btn__arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:rgba(15,23,42,.14);border:1px solid rgba(255,255,255,.22);font-size:18px;line-height:1}

/* ===== Condition latest tabs ===== */
.pane-list .property-latest-tabs{padding:16px}

.pane-list .property-latest-tabs__bar{
  margin-top:12px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 10px;
  scroll-snap-type:x mandatory;
}

.pane-list .property-latest-tabs__bar::-webkit-scrollbar{display:none}

.pane-list .property-latest-tabs__tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background:#f8fafc;
  color:#475569;
  font-size:13px;
  font-weight:900;
  letter-spacing:-0.02em;
  cursor:pointer;
  scroll-snap-align:start;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.pane-list .property-latest-tabs__tab:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.10)}

.pane-list .property-latest-tabs__tab.is-active{
  background:#0f172a;
  border-color:rgba(15,23,42,.22);
  color:#ffffff;
  box-shadow:0 14px 26px rgba(15,23,42,.18);
}

.pane-list .property-latest-tabs__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
}

.pane-list .property-latest-tabs__icon svg{width:18px;height:18px;display:block}

.pane-list .property-latest-tabs__label{line-height:1}

.pane-list .property-latest-tabs__panes{margin-top:10px}

.pane-list .property-latest-tabs__pane{display:none}
.pane-list .property-latest-tabs__pane.is-active{display:block}

.pane-list .recommend-empty{
  padding:18px 10px;
  font-size:13px;
  font-weight:700;
  color:#64748b;
}

.pane-list .recommend-empty.is-loading{color:#0f172a}