/* =========================================================
   Promo carousel (DHgate-style auto-rotating promo strip)
   Used on shop / category pages next to the title row.
   Prefix: dg-promo
   ========================================================= */

.dg-promo {
  position: relative; width: 560px; max-width: 100%; height: 120px;
  overflow: hidden; border-radius: 10px; background: #fff;
  border: 1px solid var(--line, #E5EAF1);
  box-shadow: 0 6px 18px rgba(11,37,69,.08);
  flex: none;
}
.dg-promo-track {
  display: flex; height: 100%;
  transition: transform .5s ease;
  will-change: transform;
}
.dg-promo-slide {
  min-width: 100%; height: 100%; display: flex; align-items: center; gap: 16px;
  padding: 12px 44px 12px 16px; text-decoration: none; background: #fff;
  box-sizing: border-box;
}
.dg-promo-slide img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 8px; flex: none;
  background: var(--bg-soft, #F5F8FC);
}
.dg-promo-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dg-promo-tag {
  font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .5px;
  color: #fff; background: #E23744; padding: 2px 10px; border-radius: 20px;
  align-self: flex-start; text-transform: uppercase;
}
.dg-promo-name {
  font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink, #0B2545);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dg-promo-cta {
  font-size: 13px; font-weight: 700; color: var(--accent, #1B6FD8);
}
.dg-promo-slide:hover .dg-promo-cta { text-decoration: underline; }

/* 箭头 */
.dg-promo-prev, .dg-promo-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--ink, #0B2545);
  font-size: 18px; line-height: 1; cursor: pointer; z-index: 5;
  box-shadow: 0 2px 8px rgba(11,37,69,.15); display: flex; align-items: center;
  justify-content: center;
}
.dg-promo-prev { left: 8px; }
.dg-promo-next { right: 8px; }
.dg-promo-prev:hover, .dg-promo-next:hover { color: var(--accent, #1B6FD8); }

/* 圆点指示 */
.dg-promo-dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 6px; z-index: 5;
}
.dg-promo-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(11,37,69,.25);
  cursor: pointer; transition: background .2s, width .2s;
}
.dg-promo-dots span.active { background: var(--accent, #1B6FD8); width: 18px; border-radius: 4px; }

/* 标题行布局：左侧标题 + 右侧轮播 */
.dg-shop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 12px;
}
.dg-shop-head-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

/* 响应式：小屏隐藏轮播 */
@media (max-width: 1024px) {
  .dg-promo { width: 460px; }
}
@media (max-width: 820px) {
  .dg-promo { display: none; }
}

/* ===== 首页促销轮播（Hero 左侧栏，高度约为原分类栏一半，随页面滚动不固定） ===== */
.dg-promo-home {
  position: relative;
  overflow: hidden;
  height: 132px;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.dg-promo-home .dg-promo-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform .5s ease;
}
.dg-promo-home .dg-promo-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: #16325c;
  box-sizing: border-box;
  padding: 8px;
}
.dg-promo-home .dg-promo-slide img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #eee;
}
.dg-promo-home .dg-promo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.dg-promo-home .dg-promo-tag {
  font-style: normal;
  background: #ff3040;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 700;
}
.dg-promo-home .dg-promo-name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  max-width: 180px;
}
.dg-promo-home .dg-promo-cta {
  font-size: 10px;
  color: #1B6FD8;
  font-weight: 700;
}
.dg-promo-home .dg-promo-prev,
.dg-promo-home .dg-promo-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(22, 50, 92, .55);
  color: #fff;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.dg-promo-home .dg-promo-prev:hover,
.dg-promo-home .dg-promo-next:hover { background: rgba(22, 50, 92, .8); }
.dg-promo-home .dg-promo-prev { left: 2px; }
.dg-promo-home .dg-promo-next { right: 2px; }
.dg-promo-home .dg-promo-dots { display: none; }

/* 首页矮条响应式 */
@media (max-width: 820px) {
  .dg-promo-home { height: 104px; }
  .dg-promo-home .dg-promo-slide img { width: 48px; height: 48px; }
}