/* ==========================================
   HERO BANNERS (Banner Manager) — shared by storefront + admin preview.
   Layout switches on the banner's own width (container query), so the
   same markup is the mobile banner in a phone and the big banner on
   desktop, and the admin preview frames render both exactly.
   ========================================== */
.carousel-slide.bn-slide {
  padding: 0;
}

.bn-frame {
  container-type: inline-size;
  width: 100%;
  height: 100%;
}

.bn {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 46%;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  height: 260px;
  padding: 1rem 0.9rem 1.4rem 1.1rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  box-sizing: border-box;
}
.bn *, .bn *::before, .bn *::after { box-sizing: border-box; }

/* Themes */
.bn-theme-ocean    { background: radial-gradient(circle at 78% 45%, rgba(56, 189, 248, 0.45), transparent 55%), linear-gradient(135deg, #0b1b33 0%, #0c4a6e 55%, #b45309 130%); }
.bn-theme-sunset   { background: radial-gradient(circle at 78% 45%, rgba(249, 115, 22, 0.5), transparent 55%), linear-gradient(135deg, #0c0a09 0%, #431407 55%, #c2410c 130%); }
.bn-theme-royal    { background: radial-gradient(circle at 78% 45%, rgba(236, 72, 153, 0.45), transparent 55%), linear-gradient(135deg, #1a0b1f 0%, #6b1043 55%, #db2777 140%); }
.bn-theme-maroon   { background: radial-gradient(circle at 78% 45%, rgba(244, 114, 182, 0.5), transparent 55%), linear-gradient(135deg, #1c0a12 0%, #7f1d1d 55%, #d97706 135%); }
.bn-theme-emerald  { background: radial-gradient(circle at 78% 45%, rgba(52, 211, 153, 0.45), transparent 55%), linear-gradient(135deg, #03140f 0%, #065f46 55%, #ca8a04 135%); }
.bn-theme-violet   { background: radial-gradient(circle at 78% 45%, rgba(167, 139, 250, 0.5), transparent 55%), linear-gradient(135deg, #0f0a1f 0%, #4c1d95 55%, #db2777 135%); }
.bn-theme-gold     { background: radial-gradient(circle at 78% 45%, rgba(251, 191, 36, 0.35), transparent 55%), linear-gradient(135deg, #050505 0%, #1c1917 55%, #a16207 135%); }
.bn-theme-midnight { background: radial-gradient(circle at 78% 45%, rgba(96, 165, 250, 0.45), transparent 55%), linear-gradient(135deg, #020617 0%, #1e3a8a 55%, #7c3aed 135%); }

.bn-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.bn-deco-1 {
  width: 220px;
  height: 220px;
  right: -60px;
  top: -70px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}
.bn-deco-2 {
  width: 120px;
  height: 120px;
  left: -40px;
  bottom: -50px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.35), transparent 70%);
}

.bn-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  text-align: left;
}
.bn-tag {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.66rem;
  font-weight: 700;
}
.bn-title {
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.bn-sub {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.78);
}
.bn-price {
  margin-top: 0.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.bn-price b {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 2px 12px rgba(251, 191, 36, 0.35);
}
.bn-price del {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}
.bn-timer {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.85);
}
.bn-timer b {
  margin-left: 0.2rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: #ef4444;
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bn-btn {
  position: relative;
  overflow: hidden;
  margin-top: 0.2rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
}
.bn-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: bnBtnShine 2.8s ease-in-out infinite;
}
@keyframes bnBtnShine {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}

.bn-media {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 22px;
  background: #fff;
  padding: 6px;
  transform: rotate(4deg);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 16px 34px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s ease;
}
.bn-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.bn:hover .bn-media {
  transform: rotate(2deg) scale(1.03);
}
.bn-off {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: -14px;
  width: 54px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-4deg);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
}
.bn-off small {
  font-size: 0.55rem;
  font-weight: 700;
  margin-top: 2px;
}

/* People/clothing photos are portrait: taller tile, keep faces in frame */
.bn-portrait .bn-media {
  aspect-ratio: 4 / 5;
  max-height: 215px;
  justify-self: center;
}
.bn-portrait .bn-media img {
  object-position: center top;
}

/* ---------- Desktop / wide banner ---------- */
@container (min-width: 600px) {
  .bn {
    height: 100%;
    min-height: 420px;
    grid-template-columns: 1fr 42%;
    gap: 2rem;
    padding: 2.5rem 3.5rem 2.8rem;
  }
  .bn-deco-1 { width: 460px; height: 460px; right: -120px; top: -160px; }
  .bn-deco-2 { width: 280px; height: 280px; left: -90px; bottom: -120px; }
  .bn-text { gap: 0.7rem; }
  .bn-tag { font-size: 0.85rem; padding: 0.3rem 0.85rem; }
  .bn-title { font-size: 2.4rem; line-height: 1.2; }
  .bn-sub { font-size: 1.02rem; }
  .bn-price { gap: 0.7rem; }
  .bn-price b { font-size: 2.7rem; }
  .bn-price del { font-size: 1.15rem; }
  .bn-timer { font-size: 0.9rem; }
  .bn-btn { margin-top: 0.5rem; padding: 0.85rem 1.9rem; font-size: 1.02rem; }
  .bn-media {
    width: auto;
    height: 330px;
    max-width: 100%;
    justify-self: center;
    border-radius: 28px;
    padding: 8px;
  }
  .bn-media img { border-radius: 21px; }
  .bn-portrait .bn-media { max-height: 350px; height: 350px; }
  .bn-off { width: 78px; height: 78px; font-size: 1.3rem; top: -18px; left: -20px; border-width: 3px; }
  .bn-off small { font-size: 0.72rem; }
}

/* ==========================================
   Rongin Bazar: light magenta banner theme (default) and solid magenta button on every theme
   ========================================== */
.bn-btn {
  background: #e11d74 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(225, 29, 116, 0.38) !important;
}
.bn:hover .bn-btn { background: #be185d !important; }

.bn-theme-rongin {
  background:
    radial-gradient(circle at 80% 45%, rgba(225, 29, 116, 0.22), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(13, 148, 136, 0.18), transparent 50%),
    linear-gradient(135deg, #fff1f7 0%, #ffe4ef 55%, #e9fbf7 100%);
  border: 1px solid #fbcfe8;
  color: #0f172a;
}
.bn-theme-rongin .bn-title { color: #0f172a; text-shadow: none; }
.bn-theme-rongin .bn-sub { color: #475569; }
.bn-theme-rongin .bn-tag { background: #ffffff; border-color: #f9a8d4; color: #be185d; }
.bn-theme-rongin .bn-price b { color: #e11d74; text-shadow: none; }
.bn-theme-rongin .bn-price del { color: #94a3b8; }
.bn-theme-rongin .bn-timer { color: #475569; }
.bn-theme-rongin .bn-deco-1 { border-color: rgba(225, 29, 116, 0.22); }
.bn-theme-rongin .bn-deco-2 { background: radial-gradient(circle, rgba(13, 148, 136, 0.25), transparent 70%); }
.bn-theme-rongin .bn-media img { box-shadow: 0 14px 34px rgba(225, 29, 116, 0.22); }

/* ==========================================
   Rongin Bazar: premium dark themes (white button with magenta text, gold price)
   ========================================== */
.bn-theme-deepwine {
  background:
    radial-gradient(circle at 80% 40%, rgba(244, 114, 182, 0.38), transparent 55%),
    radial-gradient(circle at 8% 95%, rgba(251, 191, 36, 0.14), transparent 45%),
    linear-gradient(135deg, #3b0a24 0%, #831843 58%, #be185d 120%);
}
.bn-theme-plumteal {
  background:
    radial-gradient(circle at 82% 42%, rgba(236, 72, 153, 0.35), transparent 55%),
    radial-gradient(circle at 6% 92%, rgba(13, 148, 136, 0.45), transparent 48%),
    linear-gradient(135deg, #2e1065 0%, #581c87 50%, #701a75 110%);
}
.bn-theme-richmagenta {
  background:
    radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.22), transparent 52%),
    radial-gradient(circle at 10% 95%, rgba(251, 191, 36, 0.2), transparent 45%),
    linear-gradient(135deg, #9d174d 0%, #c0135f 55%, #e11d74 110%);
}
.bn-theme-deepwine .bn-btn, .bn-theme-plumteal .bn-btn, .bn-theme-richmagenta .bn-btn {
  background: #ffffff !important;
  color: #be185d !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3) !important;
}
.bn-theme-deepwine:hover .bn-btn, .bn-theme-plumteal:hover .bn-btn, .bn-theme-richmagenta:hover .bn-btn { background: #fdf2f8 !important; }
.bn-theme-deepwine .bn-price b, .bn-theme-plumteal .bn-price b { color: #fcd34d; }
.bn-theme-richmagenta .bn-price b { color: #fff7d6; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.bn-theme-deepwine .bn-tag, .bn-theme-richmagenta .bn-tag { border-color: rgba(252, 211, 77, 0.45); }
.bn-theme-plumteal .bn-tag { border-color: rgba(94, 234, 212, 0.5); }
.bn-theme-deepwine .bn-media img, .bn-theme-plumteal .bn-media img, .bn-theme-richmagenta .bn-media img { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }