/* 咸鱼 2026-11-05：首页轮播图（xy/40-banner.js）。电脑、手机各放各的图：电脑框跟第一张电脑图的比例，手机框固定 690:160。 */
.xy-hb { position: relative; min-width: 0; }
.xy-hb-box { position: relative; overflow: hidden; aspect-ratio: var(--hb-r, 7.24); border-radius: 18px; background: #1a1319; touch-action: pan-y; }
.xy-hb-slide { position: absolute; inset: 0; transform: translateX(100%); transition: transform .45s cubic-bezier(.22, .8, .24, 1); }
.xy-hb-slide.is-on { transform: none; }
.xy-hb-media { display: block; width: 100%; height: 100%; object-fit: cover; }

.xy-hb-arrow {
  position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; min-height: 0; margin-top: -17px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(12, 8, 12, .55); color: #fff; opacity: 0; cursor: pointer; transition: opacity .2s;
}
.xy-hb-arrow.is-prev { left: 12px; }
.xy-hb-arrow.is-next { right: 12px; }
.xy-hb-arrow svg { width: 18px; height: 18px; }
.xy-hb:hover .xy-hb-arrow, .xy-hb-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .xy-hb-arrow { display: none; } }

.xy-hb-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.xy-hb-dot {
  width: 6px; height: 6px; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .5);
  cursor: pointer; pointer-events: auto; transition: width .25s, background .25s;
}
.xy-hb-dot[aria-current="true"] { width: 18px; background: #fff; }

/* 手机上图只有 47px 高，点放到图下面，不压画面 */
@media (max-width: 760px) {
  /* 手机比例业主定的 690:160，长图居中裁两边 */
  .xy-hb-box { aspect-ratio: 690 / 160; border-radius: 14px; }
  .xy-hb-arrow { display: none; }
  .xy-hb-dots { position: static; margin-top: 7px; }
  .xy-hb-dot { background: var(--text-4); }
  .xy-hb-dot[aria-current="true"] { background: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .xy-hb-slide, .xy-hb-dot, .xy-hb-arrow { transition: none; }
}

/* 店长管理行：电脑、手机两个图位并排，不走 .pg-queue 的共用列（那一列只有头像宽） */
.xy-pg .xy-hb-rows { display: grid; }
.xy-pg .xy-hb-rows > .pg-row.xy-hb-row { grid-template-columns: 340px minmax(0, 1fr) auto; grid-template-areas: "lead main acts"; align-items: center; gap: 0 16px; }
.xy-pg .xy-hb-rows > .pg-row.xy-hb-row > .xy-hb-slots { grid-area: lead; }
.xy-pg .xy-hb-rows > .pg-row.xy-hb-row > .pg-main { grid-area: main; }
.xy-pg .xy-hb-rows > .pg-row.xy-hb-row > .pg-acts { grid-area: acts; margin: 0; }
.xy-pg .xy-hb-rows > .pg-row.xy-hb-row > :is(.pg-people, .pg-amount, .pg-meta, .pg-tail):empty { display: none; }
/* 两列按 2172:300 和 690:160 分宽，两个图位正好一样高 */
.xy-hb-slots { display: grid; grid-template-columns: 7.24fr 4.31fr; gap: 8px; min-width: 0; }
.xy-hb-slot { position: relative; display: grid; place-items: center; overflow: hidden; min-width: 0; border-radius: 6px; background: #1a1319; cursor: pointer; }
.xy-hb-slot.is-desktop { aspect-ratio: 7.24; }
.xy-hb-slot.is-phone { aspect-ratio: 4.31; }
.xy-hb-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xy-hb-slot.is-empty { border: 1px dashed var(--text-4); background: transparent; color: var(--text-2); font-size: 12px; }
.xy-hb-slot.is-empty span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.xy-hb-slot svg { width: 14px; height: 14px; }
.xy-hb-slot[data-busy="true"] { opacity: .55; pointer-events: none; }
.xy-hb-size { margin-right: 10px; white-space: nowrap; }
.xy-hb-add input { display: none; }
@media (max-width: 760px) {
  .xy-pg .xy-hb-rows > .pg-row.xy-hb-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lead lead" "main acts"; gap: 8px 12px; }
}