/*
 * Mashin Irani — Hero Product Slider (CR-005)
 * Adapted from a Figma hero slider into the MashinIrani design system: dark navy-900 surface,
 * two-layer scrim, gold accent, ivory type, .btn-buy / .btn-ghost-light CTAs, RTL.
 * All colors/spacing/radius/shadow/motion from --mi-* tokens (hex fallbacks for standalone use).
 */

.mi-hs {
  --mi-hs-dur: 520ms;
  --mi-hs-ease: var(--mi-ease-standard, cubic-bezier(.2, 0, 0, 1));
  --mi-hs-gold: var(--mi-color-gold-300, #e0c58f);
  --mi-hs-ivory: var(--mi-color-ivory-50, #f5f0e9);
  --mi-hs-sand: var(--mi-color-sand-200, #d9cbc2);
  --mi-hs-navy: var(--mi-color-navy-900, #102134);
  --mi-hs-bg: var(--mi-color-navy-900, #102134);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  direction: rtl;
  text-align: right;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  background-color: var(--mi-hs-bg, #102134);
  transition: background-color 700ms var(--mi-hs-ease);
  color: var(--mi-hs-ivory);
  font-family: var(--mi-font-sans, "Vazirmatn", Tahoma, sans-serif);
}
.mi-hs *,
.mi-hs *::before,
.mi-hs *::after { box-sizing: border-box; }

.mi-hs .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layered background (matches .hero__scrim) ---- */
.mi-hs__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mi-hs__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .12) 68%, rgba(0, 0, 0, .58) 100%),
    radial-gradient(120% 90% at 22% 45%, transparent 46%, rgba(0, 0, 0, .4) 100%);
}
.mi-hs__grid {
  position: absolute; inset: 0; opacity: .035;
  background-image:
    linear-gradient(rgba(224, 197, 143, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 197, 143, .5) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 30% 40%, #000 25%, transparent 75%);
          mask-image: radial-gradient(120% 80% at 30% 40%, #000 25%, transparent 75%);
}

/* ---- Layout shell ---- */
.mi-hs__inner {
  position: relative; z-index: 1;
  max-width: var(--mi-container-wide, 1280px);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 72px) var(--mi-container-padding-inline, clamp(16px, 4vw, 40px)) clamp(72px, 8vw, 104px);
}
.mi-hs__track { position: relative; }

/* Pre-JS / no-JS: only the first slide is shown, in normal flow (defines height, no CLS). */
.mi-hs__slide {
  display: none;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}
.mi-hs__slide.is-active { display: grid; }

/* JS-enhanced: stack every slide absolutely for the crossfade. */
.mi-hs.is-ready .mi-hs__slide {
  position: absolute; inset: 0;
  display: grid;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.mi-hs.is-ready .mi-hs__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
.mi-hs.is-ready .mi-hs__slide.is-leaving { opacity: 0; visibility: visible; z-index: 1; }

/* ---- Content column (inline-start = right in RTL) ---- */
.mi-hs__content { display: flex; flex-direction: column; gap: var(--mi-space-4, 16px); max-width: 34rem; }

.mi-hs__eyebrow {
  display: inline-flex; align-items: center; gap: var(--mi-space-2, 8px);
  margin: 0;
  color: var(--mi-hs-gold);
  font-size: var(--mi-font-size-caption, .8125rem);
  font-weight: 600;
  letter-spacing: .01em;
}
.mi-hs__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--mi-hs-gold); flex: 0 0 auto; }

.mi-hs__title { margin: 0; line-height: 1.06; letter-spacing: -.01em; }
.mi-hs__title a {
  color: var(--mi-hs-ivory);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  text-decoration: none;
}
.mi-hs__model {
  margin: 0;
  color: var(--mi-hs-gold);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 700;
}

.mi-hs__chips { display: flex; flex-wrap: wrap; gap: var(--mi-space-2, 8px); list-style: none; margin: var(--mi-space-1, 4px) 0 0; padding: 0; }
.mi-hs__chip {
  padding: 5px var(--mi-space-3, 12px);
  border: 1px solid rgba(224, 197, 143, .35);
  background: rgba(224, 197, 143, .08);
  border-radius: var(--mi-radius-pill, 999px);
  color: var(--mi-hs-gold);
  font-size: var(--mi-font-size-overline, .75rem);
  font-weight: 600;
}

.mi-hs__desc {
  margin: 0;
  color: var(--mi-hs-sand);
  font-size: clamp(.9rem, 1.4vw, 1.02rem);
  line-height: 1.75;
  max-width: 44ch;
}

.mi-hs__rating { display: flex; align-items: center; gap: var(--mi-space-2, 8px); }
.mi-hs__stars { display: inline-flex; gap: 2px; }
.mi-hs__stars svg { width: 16px; height: 16px; fill: var(--mi-color-gold-500, #896f3d); }
.mi-hs__stars svg.is-off { opacity: .3; }
.mi-hs__rating .num { color: var(--mi-hs-gold); font-weight: 700; font-size: var(--mi-font-size-body-sm, .875rem); }
.mi-hs__reviews { color: var(--mi-hs-sand); font-size: var(--mi-font-size-caption, .8125rem); opacity: .8; }

/* ---- Buy line: price + CTAs ---- */
.mi-hs__buyline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mi-space-5, 20px); margin-top: var(--mi-space-2, 8px); }
.mi-hs__pricerow { display: flex; align-items: baseline; gap: var(--mi-space-3, 12px); }
.mi-hs__price {
  color: var(--mi-hs-gold);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1;
}
.mi-hs__price small { font-size: .55em; font-weight: 600; color: var(--mi-hs-sand); }
.mi-hs__strike { color: var(--mi-hs-sand); opacity: .7; text-decoration: line-through; font-size: var(--mi-font-size-body-sm, .875rem); }
.num { font-variant-numeric: tabular-nums; }

.mi-hs__cta { display: flex; flex-wrap: wrap; gap: var(--mi-space-3, 12px); }

/* Buttons — token-faithful replicas of .btn / .btn-buy / .btn-ghost-light / .btn-lg (home.css). */
.mi-hs .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mi-space-2, 8px);
  font-family: inherit; font-weight: 600; font-size: .9375rem;
  padding: var(--mi-space-3, 12px) var(--mi-space-5, 20px);
  border-radius: var(--mi-radius-md, 8px);
  border: 0; min-height: 44px; cursor: pointer; text-decoration: none;
  transition: background-color var(--mi-motion-duration-120, 120ms) var(--mi-hs-ease),
              box-shadow var(--mi-motion-duration-120, 120ms),
              transform var(--mi-motion-duration-120, 120ms);
}
.mi-hs .btn:hover { transform: translateY(-1px); }
.mi-hs .btn:active { transform: translateY(0) scale(.98); }
.mi-hs .btn-lg { padding: var(--mi-space-4, 16px) var(--mi-space-8, 32px); font-size: 1rem; min-height: 52px; }
.mi-hs .btn-buy { background: var(--mi-color-action-buy, #112250); color: var(--mi-hs-ivory); box-shadow: var(--mi-shadow-e1, 0 1px 2px rgba(16, 33, 52, .06)); }
.mi-hs .btn-buy:hover { background: #0c1b3f; box-shadow: var(--mi-shadow-e2, 0 4px 12px rgba(16, 33, 52, .08)); }
.mi-hs .btn-ghost-light { background: rgba(245, 240, 233, .08); border: 1.5px solid rgba(224, 197, 143, .5); color: var(--mi-hs-ivory); }
.mi-hs .btn-ghost-light:hover { background: rgba(245, 240, 233, .14); }
.mi-hs__icn { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.mi-hs__btn .mi-hs__icn { width: 18px; height: 18px; }
.mi-hs__icn--flip { transform: scaleX(-1); }

/* ---- Media column (inline-end = left in RTL) ---- */
.mi-hs__media {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px;
  aspect-ratio: 1 / 1;
}
.mi-hs__glow {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 197, 143, .3) 0%, rgba(224, 197, 143, .1) 45%, transparent 70%);
  filter: blur(28px);
  z-index: 0;
}
.mi-hs__img {
  position: relative; z-index: 1;
  width: auto; height: auto;
  max-width: 100%; max-height: 58vh;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .5));
  -webkit-user-select: none; user-select: none;
}

/* ---- Slide transitions + choreographed reveal (only once JS marks .is-ready) ---- */
/* Content children reveal in sequence */
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__content > * { animation: mi-hs-item-in .55s var(--mi-hs-ease) both; }
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__content > *:nth-child(1) { animation-delay: .04s; }
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__content > *:nth-child(2) { animation-delay: .10s; }
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__content > *:nth-child(3) { animation-delay: .16s; }
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__content > *:nth-child(4) { animation-delay: .22s; }
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__content > *:nth-child(5) { animation-delay: .28s; }
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__content > *:nth-child(6) { animation-delay: .34s; }
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__content > *:nth-child(7) { animation-delay: .40s; }
.mi-hs.is-ready .mi-hs__slide.is-leaving .mi-hs__content { animation: mi-hs-content-out var(--mi-hs-dur) var(--mi-hs-ease) both; }

/* Media: bold slide + scale + tilt in, drift out */
.mi-hs.is-ready.mi-hs--next .mi-hs__slide.is-active .mi-hs__media { animation: mi-hs-media-in-next .7s var(--mi-hs-ease) both; }
.mi-hs.is-ready.mi-hs--prev .mi-hs__slide.is-active .mi-hs__media { animation: mi-hs-media-in-prev .7s var(--mi-hs-ease) both; }
.mi-hs.is-ready.mi-hs--next .mi-hs__slide.is-leaving .mi-hs__media { animation: mi-hs-media-out-next var(--mi-hs-dur) var(--mi-hs-ease) both; }
.mi-hs.is-ready.mi-hs--prev .mi-hs__slide.is-leaving .mi-hs__media { animation: mi-hs-media-out-prev var(--mi-hs-dur) var(--mi-hs-ease) both; }
/* Ambient: glow blooms in, product gently floats while active */
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__glow { animation: mi-hs-glow-in .9s var(--mi-hs-ease) both; }
.mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__img { animation: mi-hs-float 6s ease-in-out .7s infinite; }

@keyframes mi-hs-item-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mi-hs-content-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-18px); } }
@keyframes mi-hs-media-in-next { from { opacity: 0; transform: translateX(72px) scale(.84) rotate(3deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes mi-hs-media-in-prev { from { opacity: 0; transform: translateX(-72px) scale(.84) rotate(-3deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes mi-hs-media-out-next { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-48px) scale(.9); } }
@keyframes mi-hs-media-out-prev { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(48px) scale(.9); } }
@keyframes mi-hs-glow-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes mi-hs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---- Control bar ---- */
.mi-hs__bar {
  position: relative; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--mi-space-4, 16px);
  margin-top: var(--mi-space-6, 24px);
}
.mi-hs__arrows { display: flex; align-items: center; gap: var(--mi-space-2, 8px); order: 2; }
.mi-hs__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border-radius: var(--mi-radius-pill, 999px);
  cursor: pointer;
  transition: background-color var(--mi-motion-duration-200, 200ms) var(--mi-hs-ease),
              border-color var(--mi-motion-duration-200, 200ms), transform var(--mi-motion-duration-120, 120ms);
}
.mi-hs__nav .mi-hs__icn { width: 20px; height: 20px; stroke-width: 2; }
.mi-hs__nav--prev { background: var(--mi-hs-gold); border: 0; color: var(--mi-hs-navy); }
.mi-hs__nav--prev:hover { transform: scale(1.06); background: var(--mi-color-gold-500, #896f3d); }
.mi-hs__nav--next { background: transparent; border: 1.5px solid rgba(224, 197, 143, .45); color: var(--mi-hs-ivory); }
.mi-hs__nav--next:hover { transform: scale(1.06); border-color: var(--mi-hs-gold); }
.mi-hs__nav--prev .mi-hs__icn { transform: scaleX(-1); }
.mi-hs__play { background: transparent; border: 1.5px solid rgba(224, 197, 143, .3); color: var(--mi-hs-sand); }
.mi-hs__play:hover { border-color: var(--mi-hs-gold); color: var(--mi-hs-gold); }
.mi-hs__play .mi-hs__icn--play { display: none; }
.mi-hs__play[aria-pressed="true"] .mi-hs__icn--pause { display: none; }
.mi-hs__play[aria-pressed="true"] .mi-hs__icn--play { display: block; }
.mi-hs__play .mi-hs__icn--pause { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mi-hs__play .mi-hs__icn--play { fill: currentColor; stroke: none; }

.mi-hs__pager { display: flex; align-items: center; gap: var(--mi-space-4, 16px); order: 1; }
.mi-hs__count { display: flex; align-items: baseline; gap: var(--mi-space-1, 4px); }
.mi-hs__cur { color: var(--mi-hs-gold); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: .9; }
.mi-hs__total { color: var(--mi-hs-sand); opacity: .55; font-size: var(--mi-font-size-body-sm, .875rem); font-weight: 500; }
.mi-hs__dots { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mi-hs__dot { padding: 4px 0; border: 0; background: transparent; cursor: pointer; display: block; }
.mi-hs__dot span {
  display: block; height: 2px; width: 16px; border-radius: 2px;
  background: rgba(245, 240, 233, .28);
  transition: width var(--mi-motion-duration-300, 300ms) var(--mi-hs-ease), background-color var(--mi-motion-duration-300, 300ms);
}
.mi-hs__dot.is-active span { width: 40px; background: var(--mi-hs-gold); }
.mi-hs__dot:hover span { background: rgba(224, 197, 143, .6); }

/* ---- Autoplay progress ---- */
.mi-hs__progress { position: relative; z-index: 3; height: 3px; margin-top: var(--mi-space-4, 16px); background: rgba(224, 197, 143, .18); border-radius: 2px; overflow: hidden; }
.mi-hs__progress i { display: block; height: 100%; width: 0; background: var(--mi-hs-gold); }
.mi-hs[data-autoplay="0"] .mi-hs__progress { display: none; }

/* ---- Thumbnail rail (wide only) ---- */
.mi-hs__thumbs {
  position: absolute; z-index: 3;
  inset-inline-end: clamp(12px, 2vw, 28px);
  top: 42%; transform: translateY(-50%);
  display: none; flex-direction: column; gap: var(--mi-space-3, 12px);
}
.mi-hs__thumb {
  width: 56px; height: 56px; padding: 0;
  border: 2px solid transparent; border-radius: var(--mi-radius-lg, 12px);
  overflow: hidden; cursor: pointer; opacity: .4;
  background: var(--mi-color-navy-800, #112250);
  transition: opacity var(--mi-motion-duration-300, 300ms), border-color var(--mi-motion-duration-300, 300ms), transform var(--mi-motion-duration-300, 300ms);
}
.mi-hs__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mi-hs__thumb.is-active { opacity: 1; border-color: var(--mi-hs-gold); transform: scale(1.06); }
.mi-hs__thumb:hover { opacity: .85; }

/* ---- Responsive ---- */
@media (min-width: 1280px) {
  .mi-hs__thumbs { display: flex; }
  .mi-hs__inner { padding-inline: clamp(72px, 7vw, 120px); }
}
@media (max-width: 1023px) {
  .mi-hs__slide { gap: clamp(16px, 3vw, 40px); }
  .mi-hs__content { max-width: none; }
  .mi-hs__img { max-height: 46vh; }
}
@media (max-width: 767px) {
  .mi-hs__slide { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: var(--mi-space-5, 20px); align-content: center; }
  .mi-hs__media { order: -1; min-height: 0; aspect-ratio: auto; height: clamp(200px, 40vh, 300px); }
  .mi-hs__img { max-height: 100%; }
  .mi-hs__content { gap: var(--mi-space-3, 12px); align-items: flex-start; }
  .mi-hs__desc { display: none; }
  .mi-hs__bar { flex-direction: row; align-items: center; }
  /* The fixed live-chat FAB owns the bottom-inline-end corner (left in RTL) at every scroll
     offset, so no control may live there. Arrows move to the inline-start; the pager mirrors
     internally so the non-interactive counter — not the dots — takes the FAB's corner. */
  .mi-hs__arrows { order: 1; }
  .mi-hs__pager { order: 2; }
  .mi-hs__count { order: 2; }
  .mi-hs__cur { font-size: 2rem; }
  .mi-hs__dots { flex-direction: row; align-items: center; order: 1; }
  .mi-hs__dot span { width: 14px; }
  .mi-hs__dot.is-active span { width: 28px; }
  .mi-hs .btn-lg { padding: var(--mi-space-3, 12px) var(--mi-space-5, 20px); min-height: 48px; font-size: .9375rem; }
}
@media (max-width: 420px) {
  .mi-hs__buyline { gap: var(--mi-space-3, 12px); }
  .mi-hs__cta { width: 100%; }
  .mi-hs__cta .btn { flex: 1 1 auto; }
  .mi-hs__model { display: none; }
}

/* ---- Reduced motion: no slide animation, instant crossfade, no autoplay bar ---- */
@media (prefers-reduced-motion: reduce) {
  .mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__content > *,
  .mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__media,
  .mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__img,
  .mi-hs.is-ready .mi-hs__slide.is-active .mi-hs__glow,
  .mi-hs.is-ready .mi-hs__slide.is-leaving .mi-hs__content,
  .mi-hs.is-ready .mi-hs__slide.is-leaving .mi-hs__media { animation: none !important; }
  .mi-hs { transition: none !important; }
  .mi-hs__progress { display: none !important; }
  .mi-hs__dot span, .mi-hs__nav, .mi-hs__thumb { transition: none !important; }
}