/* Homepage hero slider — same look as the Overlay hero */
.hero-overlay.hs-wrap > .hs { padding: 0 !important; border-radius: 0 !important; }
.hs { position: relative; width: 100%; height: 100%; overflow: hidden; color: #f5edd8; background: #120d08; outline: none; }
/* The new slide fades in on top while the old one stays put underneath, so there is no dark flash. */
.hs-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 4rem; opacity: 0; visibility: hidden; z-index: 1;
  transition: opacity 0s linear .75s, visibility 0s linear .75s; }
.hs-slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .7s ease, visibility 0s; }
.hs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.04); transition: transform 8s ease-out; }
.hs-slide.is-active .hs-bg { transform: scale(1); }
.hs-bg.is-blur { filter: blur(22px) saturate(1.1) brightness(.75); transform: scale(1.2) !important; }
.hs-bg-empty { background: var(--dark2); }
.hs-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 10%, #120d08 98%); }
.has-side .hs-shade { background: linear-gradient(to right, rgba(18,13,8,.92) 0%, rgba(18,13,8,.6) 45%, rgba(18,13,8,.15) 100%), linear-gradient(to bottom, transparent 40%, rgba(18,13,8,.8) 100%); }
.hs-content { position: relative; z-index: 2; max-width: 800px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.has-side .hs-content { max-width: min(800px, 56%); }
.hs-content .hero-era { color: #f5edd8; font-weight: 500; text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.hs-content .hero-title a { color: inherit; text-decoration: none; }
.hs .hs-text { margin-bottom: 2rem; color: rgba(245,237,216,.9); text-shadow: 0 1px 4px rgba(0,0,0,.8);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hs-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hs .hs-ghost { background: transparent !important; border: 1px solid rgba(245,237,216,.55) !important; color: #f5edd8 !important; }
.hs-ghost:hover { border-color: #f5edd8; }
.hs-off { color: #f5edd8 !important; opacity: .7; }
.hs-price { font-family: var(--ff-bangla-ui); font-size: 1.6rem; font-weight: 700; margin: -1rem 0 1.2rem; }
.hs-price s { font-size: 1rem; opacity: .6; margin-left: .4rem; }
.hs .mzc-print { background: #f5edd8; border-color: #f5edd8; color: #1d1712 !important; }
.hs .mzc-print:hover { background: transparent; color: #f5edd8 !important; }
.hs .mzc-row { margin-top: 0; }

/* Cover / product photo on the right */
.hs .hs-side { position: absolute; z-index: 2; right: 7%; top: 50%; height: 78%; aspect-ratio: 595 / 842; transform: translateY(-50%);
  box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.hs .hs-k-product .hs-side { aspect-ratio: 1 / 1; height: 70%; }
.hs-side img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Controls */
.hs-nav { position: absolute; z-index: 5; right: 2rem; bottom: 2rem; display: flex; align-items: center; gap: .6rem; }
.hs-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245,237,216,.45);
  background: rgba(18,13,8,.45); color: #f5edd8; cursor: pointer; transition: background .2s, border-color .2s; }
.hs-arrow:hover { background: var(--gold); border-color: var(--gold); }
.hs-arrow:focus-visible, .hs-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hs-pause .i-play { display: none; }
.is-stopped .hs-pause .i-play { display: block; }
.is-stopped .hs-pause .i-pause { display: none; }
.hs-dots { display: flex; gap: .4rem; }
.hs-dot { width: 34px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.hs-dot::before { content: ''; grid-area: 1 / 1; height: 3px; background: rgba(245,237,216,.35); }
.hs-dot span { grid-area: 1 / 1; height: 3px; width: 0; background: #f5edd8; }
.hs-dot.is-active span { width: 100%; }
.is-playing .hs-dot.is-active span { width: 0; animation: hsProgress var(--hs-time, 7s) linear forwards; }
@keyframes hsProgress { to { width: 100%; } }

@media (max-width: 1100px) {
  .hs .hs-side { right: 4%; height: 62%; }
  .has-side .hs-content { max-width: 58%; }
}
/* Phones & tablets: picture on top, text at the bottom */
@media (max-width: 768px) {
  .hs-slide { padding: 1.5rem 1.25rem 4.4rem; }
  .has-side .hs-content { max-width: 100%; }
  .has-side .hs-shade { background: linear-gradient(to bottom, rgba(18,13,8,.15) 0%, rgba(18,13,8,.55) 45%, #120d08 85%); }
  .hs .hs-side { right: auto; left: 50%; top: 1.2rem; height: 40%; transform: translateX(-50%); }
  .hs .hs-k-product .hs-side { height: 36%; }
  .hs .hs-k-magazine .hs-side { height: 30%; top: 1rem; }
  /* Admin → slide → "On phones": custom picture, or none */
  .hs .phone-hide { display: none !important; }
  .hs .hs-bg.phone-sharp { filter: none; transform: none !important; }
  .phone-plain { background: radial-gradient(circle at 50% 25%, #2b2018 0%, #120d08 70%); }
  .has-side:not(.phone-side) .hs-shade { background: linear-gradient(to bottom, transparent 10%, #120d08 98%); }
  .phone-plain .hs-shade { background: none; }
  .hs-price { margin: -.4rem 0 .9rem; font-size: 1.3rem; }
  .hs-text { margin-bottom: 1.1rem !important; }
  .hs-nav { left: 1.25rem; right: 1.25rem; bottom: .7rem; justify-content: space-between; gap: .3rem; }
  .hs-nav .hs-arrow { width: 40px; height: 40px; }
  .hs-dots { flex: 1; justify-content: center; }
  .hs-dot { width: 26px; }
}
@media (max-width: 480px) {
  .hs-slide { padding: 1.25rem 1rem 4.2rem; }
  .hs .mzc { min-height: 46px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-slide, .hs-bg { transition: none !important; }
  .hs-bg { transform: none; }
}


/* ── Phones: every slide uses the same short layout ──
   one-line label · title (max 2 lines) · one full-width button with the price or an arrow inside */
@media (max-width: 768px) {
  .hs-slide { align-items: flex-end; }
  .hs .hs-content { width: 100%; max-width: 100%; }
  .hs .hero-era, .hs .hero-era.bn-text { display: block; font-family: var(--ff-label) !important; font-size: .74rem !important;
    letter-spacing: 2px !important; font-weight: 500; line-height: 1.4; margin: 0 0 .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hs .hero-era.bn-text, .hs .hero-era.is-bn { font-family: var(--ff-bangla-ui) !important; letter-spacing: 0 !important; font-size: .85rem !important; text-transform: none !important; }
  .hs .hero-era::before { display: inline-block; vertical-align: middle; margin-right: .6rem; }
  .hs .hero-title { font-size: clamp(1.45rem, 6vw, 1.85rem) !important; line-height: 1.3 !important; margin: 0 0 1.1rem !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hs .hs-text, .hs .hs-price, .hs .mzc-print, .hs .hs-ghost, .hs .hs-off + .hs-ghost { display: none !important; }
  .hs .hs-actions, .hs .mzc-row { display: block; margin: 0; padding: 0; }
  .hs .mzc-primary, .hs .hs-main, .hs .hs-off { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between;
    gap: .9rem; padding: .55rem 1.1rem; font-family: var(--ff-bangla-ui) !important; font-size: 1rem !important; font-weight: 600;
    letter-spacing: 0 !important; text-transform: none !important; box-shadow: none; text-shadow: none; }
  .hs .hs-main::after { content: '→'; font-weight: 700; padding-left: .9rem; border-left: 1px solid currentColor; }
}