/* NN Shoppable Videos - front end. Sab values inline CSS variables se aati hain. */
.nn-sv,
.nn-sv *,
.nn-sv-modal,
.nn-sv-modal * { box-sizing: border-box; }

.nn-sv {
  width: 100%;
  background: var(--sv-bg);
  padding: var(--sv-pad-y) var(--sv-pad-x);
  font-family: var(--sv-font);
}
.nn-sv__inner { max-width: var(--sv-max); margin: 0 auto; }

.nn-sv .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Heading ---------- */
.nn-sv__head { margin: 0 0 var(--sv-head-gap); text-align: var(--sv-align, center); }
.nn-sv--left   .nn-sv__head { text-align: left; }
.nn-sv--center .nn-sv__head { text-align: center; }
.nn-sv--right  .nn-sv__head { text-align: right; }

.nn-sv__title {
  margin: 0;
  font-family: var(--sv-title-font);
  font-size: var(--sv-title-s);
  font-weight: var(--sv-title-w);
  color: var(--sv-title-c);
  text-transform: var(--sv-title-t);
  letter-spacing: var(--sv-title-ls);
  line-height: 1.2;
}
.nn-sv__desc {
  max-width: 680px;
  margin: 10px 0 0;
  font-family: var(--sv-desc-font);
  font-size: var(--sv-desc-s);
  font-weight: var(--sv-desc-w);
  color: var(--sv-desc-c);
  line-height: 1.6;
}
.nn-sv__title:only-child { margin-bottom: 0; }
.nn-sv--center .nn-sv__desc { margin-left: auto; margin-right: auto; }
.nn-sv--right  .nn-sv__desc { margin-left: auto; margin-right: 0; }
.nn-sv--left   .nn-sv__desc { margin-left: 0; margin-right: auto; }

/* ---------- Track (slider / grid) ---------- */
.nn-sv__wrap { position: relative; }
.nn-sv__track {
  --cols: var(--sv-cols-d);
  --gap: var(--sv-gap);
  display: grid;
  gap: var(--gap);
}
.nn-sv[data-mode="slider"] .nn-sv__track {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 8px 0 16px;
  margin: -8px 0 -16px;
}
.nn-sv[data-mode="slider"] .nn-sv__track::-webkit-scrollbar { display: none; }
.nn-sv[data-mode="grid"] .nn-sv__track {
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

/* ---------- Card ---------- */
.nn-sv__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sv-card-bg);
  border: var(--sv-card-bw) solid var(--sv-card-bc);
  border-radius: var(--sv-card-r);
  overflow: hidden;
  scroll-snap-align: start;
}
.nn-sv--shadow-soft   .nn-sv__card { box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.nn-sv--shadow-strong .nn-sv__card { box-shadow: 0 12px 34px rgba(0, 0, 0, .18); }
.nn-sv--lift .nn-sv__card { transition: transform .25s ease, box-shadow .25s ease; }
.nn-sv--lift .nn-sv__card:hover { transform: translateY(-4px); }

.nn-sv__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--sv-aspect);
  background: #000;
  cursor: pointer;
  overflow: hidden;
  outline-offset: -3px;
}
.nn-sv__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
  pointer-events: none;
}
.nn-sv__play {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.nn-sv__play svg { margin-left: 2px; }

/* ---------- Product info ---------- */
.nn-sv__info {
  display: flex; align-items: center; gap: 10px;
  padding: var(--sv-card-pad);
  font-family: var(--sv-font);
}
.nn-sv__thumb {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: 8px;
  background: #f3f3f3;
}
.nn-sv__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nn-sv__pt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--sv-pt-s);
  font-weight: var(--sv-pt-w);
  color: var(--sv-pt-c);
  line-height: 1.35;
  text-decoration: none;
}
a.nn-sv__pt:hover { text-decoration: underline; }
.nn-sv__price {
  font-size: var(--sv-price-s);
  font-weight: var(--sv-price-w);
  color: var(--sv-price-c);
  line-height: 1.3;
}
.nn-sv__price del { opacity: .55; margin-right: 6px; font-weight: 400; }
.nn-sv__price ins { text-decoration: none; background: none; color: inherit; }
.nn-sv__price .amount, .nn-sv__price bdi { color: inherit; }

/* ---------- Button (card + popup) ---------- */
.nn-sv__btn,
.nn-sv-modal__btn {
  display: flex; align-items: center; justify-content: center;
  height: var(--sv-btn-h);
  padding: 0 18px;
  background: var(--sv-btn-bg);
  color: var(--sv-btn-c);
  border: var(--sv-btn-bw) solid var(--sv-btn-bc);
  border-radius: var(--sv-btn-r);
  font-family: var(--sv-font);
  font-size: var(--sv-btn-s);
  font-weight: var(--sv-btn-w);
  text-transform: var(--sv-btn-t);
  letter-spacing: var(--sv-btn-ls);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nn-sv__btn:hover,
.nn-sv__btn:focus-visible,
.nn-sv-modal__btn:hover,
.nn-sv-modal__btn:focus-visible {
  background: var(--sv-btn-hbg);
  color: var(--sv-btn-hc);
  text-decoration: none;
}
.nn-sv__card > .nn-sv__btn { margin: auto var(--sv-card-pad) var(--sv-card-pad); }
.nn-sv__info + .nn-sv__btn { margin-top: 0; }
.nn-sv__media + .nn-sv__btn { margin-top: var(--sv-card-pad); }

/* ---------- Slider arrows ---------- */
.nn-sv__arrow {
  position: absolute; top: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  transform: translateY(-50%);
  background: #fff; color: #111;
  border: 0; border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.nn-sv__arrow:hover { transform: translateY(-50%) scale(1.06); }
.nn-sv__arrow--prev { left: 10px; }
.nn-sv__arrow--next { right: 10px; }
.nn-sv__arrow.is-hidden { opacity: 0; pointer-events: none; }
.nn-sv[data-mode="grid"] .nn-sv__arrow { display: none; }

.nn-sv-empty { padding: 14px; border: 1px dashed #bbb; text-align: center; color: #666; }

/* ---------- Popup ---------- */
.nn-sv-lock { overflow: hidden !important; }
.nn-sv-modal {
  position: fixed; inset: 0; z-index: 999999;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .78);
  font-family: var(--sv-font, inherit);
}
.nn-sv-modal.is-open { display: flex; }
.nn-sv-modal__dialog {
  position: relative;
  display: flex;
  width: min(880px, 100%);
  height: min(88vh, 720px);
  background: var(--sv-card-bg, #fff);
  border-radius: var(--sv-card-r, 14px);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.nn-sv-modal__vid {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: var(--sv-aspect, 9 / 16);
  max-width: 62%;
  background: #000;
}
.nn-sv-modal__video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.nn-sv-modal__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 30px;
  overflow-y: auto;
  color: var(--sv-pt-c, #111);
}
.nn-sv-modal__prod { display: flex; align-items: center; gap: 14px; }
.nn-sv-modal__img { flex: 0 0 auto; width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: #f3f3f3; }
.nn-sv-modal__title {
  font-size: calc(var(--sv-pt-s, 14px) + 3px);
  font-weight: var(--sv-pt-w, 500);
  color: var(--sv-pt-c, #111);
  line-height: 1.35;
}
.nn-sv-modal__price {
  margin-top: 4px;
  font-size: calc(var(--sv-price-s, 14px) + 3px);
  font-weight: var(--sv-price-w, 600);
  color: var(--sv-price-c, #111);
}
.nn-sv-modal__price del { opacity: .55; margin-right: 6px; font-weight: 400; }
.nn-sv-modal__price ins { text-decoration: none; background: none; color: inherit; }
.nn-sv-modal__price .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.nn-sv-modal__btn--ghost {
  background: transparent;
  color: var(--sv-btn-bg);
  border-color: var(--sv-btn-bg);
}
.nn-sv-modal__btn--ghost:hover { background: var(--sv-btn-bg); color: var(--sv-btn-c); }
.nn-sv-modal__btn[hidden], .nn-sv-modal__prod[hidden] { display: none !important; }

.nn-sv-modal__close,
.nn-sv-modal__nav {
  position: absolute; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: rgba(255, 255, 255, .95); color: #111;
  border: 0; border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.nn-sv-modal__close { top: 12px; right: 12px; }
.nn-sv-modal__nav { top: 50%; transform: translateY(-50%); position: fixed; }
.nn-sv-modal__nav--prev { left: 16px; }
.nn-sv-modal__nav--next { right: 16px; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .nn-sv__track { --cols: var(--sv-cols-t); }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .nn-sv { padding: var(--sv-pad-y-m) var(--sv-pad-x-m); }
  .nn-sv__track { --cols: var(--sv-cols-m); --gap: var(--sv-gap-m); }
  .nn-sv__head { margin-bottom: var(--sv-head-gap-m); }
  .nn-sv__title { font-size: var(--sv-title-s-m); }
  .nn-sv__desc { font-size: var(--sv-desc-s-m); }
  .nn-sv__arrow { width: 34px; height: 34px; }
  .nn-sv__arrow--prev { left: 6px; }
  .nn-sv__arrow--next { right: 6px; }
  .nn-sv__thumb { width: 38px; height: 38px; }

  .nn-sv-modal { padding: 0; align-items: flex-end; }
  .nn-sv-modal__dialog {
    flex-direction: column;
    width: 100%; height: auto; max-height: 94vh;
    border-radius: var(--sv-card-r, 14px) var(--sv-card-r, 14px) 0 0;
  }
  .nn-sv-modal__vid { width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; max-height: 56vh; flex: 0 0 auto; }
  .nn-sv-modal__video { max-height: 56vh; }
  .nn-sv-modal__body { padding: 16px; gap: 12px; justify-content: flex-start; }
  .nn-sv-modal__img { width: 56px; height: 56px; }
  .nn-sv-modal__nav { width: 34px; height: 34px; top: 28%; }
  .nn-sv-modal__nav--prev { left: 8px; }
  .nn-sv-modal__nav--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-sv--lift .nn-sv__card, .nn-sv__arrow { transition: none; }
}