/**
 * Arzoon — Product Detail Page (PDP)
 */

.sf-pdp {
  background: var(--color-bg-base);
  padding-bottom: var(--space-12);
}

.sf-pdp-hero {
  padding-block: var(--space-6);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
}

/* ════════════════════════════════════════════
   Gallery — صحنه‌ی اصلی + کراس‌فید + لایت‌باکس
   ════════════════════════════════════════════ */
.sf-pdp-gallery.product-gallery {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}

.sf-pdp-gallery__stage {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-bg-sunken);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  isolation: isolate;
}

.sf-pdp-gallery__main {
  position: relative;
  width: 100%;
  height: 100%;
}

.sf-pdp-gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--duration-slow) var(--ease-emphasis);
  cursor: zoom-in;
}

.sf-pdp-gallery__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.sf-pdp-gallery__stage:hover .sf-pdp-gallery__slide.is-active {
  transform: scale(1.04);
}

.sf-pdp-gallery__badge {
  position: absolute;
  top: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 3;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: #fff;
}

.sf-pdp-gallery__badge--sale {
  background: var(--color-brand-primary);
  box-shadow: 0 4px 14px rgba(143, 11, 19, 0.35);
}

.sf-pdp-gallery__counter {
  position: absolute;
  bottom: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 3;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(10, 10, 10, 0.55);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  backdrop-filter: blur(4px);
}

.sf-pdp-gallery__zoom {
  position: absolute;
  bottom: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.sf-pdp-gallery__zoom:hover {
  color: var(--color-brand-primary);
  transform: scale(1.08);
}

.sf-pdp-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.sf-pdp-gallery__stage:hover .sf-pdp-gallery__nav,
.sf-pdp-gallery__stage:focus-within .sf-pdp-gallery__nav {
  opacity: 1;
}

.sf-pdp-gallery__nav:hover {
  background: var(--color-brand-primary);
  color: #fff;
}

.sf-pdp-gallery__nav--prev { inset-inline-end: var(--space-3); }
.sf-pdp-gallery__nav--next { inset-inline-start: var(--space-3); }

.product-thumbnails {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  overflow-x: auto;
  padding-block: var(--space-1);
  scrollbar-width: none;
}

.product-thumbnails::-webkit-scrollbar {
  display: none;
}

.product-thumb {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border-default);
  background: var(--color-bg-sunken);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.product-thumb:hover {
  transform: translateY(-2px);
}

.product-thumb.active {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 15%, transparent);
}

/* ════════════════════════════════════════════
   Lightbox — بزرگ‌نمایی تمام‌صفحه
   ════════════════════════════════════════════ */
.sf-pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 10, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal);
}

.sf-pdp-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.sf-pdp-lightbox__stage {
  max-width: min(92vw, 900px);
  max-height: 86vh;
}

.sf-pdp-lightbox__stage img {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.sf-pdp-lightbox__close,
.sf-pdp-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.sf-pdp-lightbox__close:hover,
.sf-pdp-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.sf-pdp-lightbox__close {
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.05rem;
}

.sf-pdp-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 1.2rem;
}

.sf-pdp-lightbox__nav--prev { inset-inline-end: var(--space-4); }
.sf-pdp-lightbox__nav--next { inset-inline-start: var(--space-4); }

.sf-pdp-lightbox__counter {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: var(--font-size-sm);
}

/* Info column */
.sf-pdp-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-detail-brand {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary);
  letter-spacing: var(--letter-spacing-wide);
}

.product-detail-title {
  margin: 0;
  font-size: clamp(var(--font-size-lg), 2.4vw, var(--font-size-xl));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.55;
}

.product-detail-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-warning);
}

.product-detail-rating span {
  color: var(--color-text-muted);
}

.product-detail-price-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
}

.detail-price-discount {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.detail-price-original {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.detail-discount-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-error);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.product-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Rich content */
.product-rich { color: var(--color-text-secondary); }
.product-rich h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: var(--space-5) 0 var(--space-3); color: var(--color-text-primary); }
.product-rich h3 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin: var(--space-4) 0 var(--space-2); color: var(--color-text-primary); }
.product-rich p  { margin: 0 0 var(--space-4); line-height: var(--line-height-relaxed); text-align: justify; text-justify: inter-word; }
.product-rich ul, .product-rich ol { padding-inline-start: var(--space-5); margin: 0 0 var(--space-4); }
.product-rich li { margin-bottom: var(--space-2); }
.product-rich a  { color: var(--color-brand-primary); text-decoration: none; }
.product-rich a:hover { text-decoration: underline; }
.product-rich table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: var(--font-size-sm); }
.product-rich td, .product-rich th { border: 1px solid var(--color-border-default); padding: var(--space-2) var(--space-3); text-align: start; }
.product-rich blockquote { border-inline-start: 3px solid var(--color-brand-accent); padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); background: var(--color-bg-sunken); border-radius: var(--radius-md); }

/* Stock */
.sf-pdp-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.sf-pdp-stock--in { color: var(--color-success); }
.sf-pdp-stock--out { color: var(--color-error); }

/* Actions */
.sf-pdp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.qty-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-surface);
}

.qty-btn {
  width: 2.5rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.qty-btn:hover {
  background: var(--color-brand-primary-subtle);
  color: var(--color-brand-primary);
}

.qty-input {
  width: 3rem;
  height: 2.75rem;
  border: none;
  border-inline: 1px solid var(--color-border-default);
  text-align: center;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: transparent;
}

.qty-input:focus { outline: none; }

.detail-add-cart.add-to-cart-btn {
  flex: 1;
  min-width: 12rem;
}

.detail-wishlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.detail-wishlist-btn:hover,
.detail-wishlist-btn.active {
  border-color: var(--color-error);
  color: var(--color-error);
  background: var(--color-error-subtle);
}

/* Trust grid */
.sf-pdp-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.sf-pdp-trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.sf-pdp-trust__item i {
  font-size: 1.25rem;
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

.sf-pdp-trust__item strong {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.sf-pdp-trust__item span {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* Seller */
.sf-pdp-seller {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-brand-primary-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
}

/* Share */
.sf-pdp-share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sf-pdp-share .social-link {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
  background: var(--color-bg-sunken);
  color: var(--color-text-secondary);
}

/* Layout */
.sf-pdp-layout {
  display: grid;
  gap: var(--space-10);
  padding-block: var(--space-8);
}

@media (min-width: 992px) {
  .sf-pdp-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Tabs */
.sf-pdp-tabs {
  margin-top: var(--space-8);
}

.sf-pdp-tabs .nav-tabs {
  border-bottom: 1px solid var(--color-border-default);
  gap: var(--space-1);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.sf-pdp-tabs .nav-tabs::-webkit-scrollbar {
  display: none;
}

.sf-pdp-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sf-pdp-tabs .nav-link:hover {
  color: var(--color-text-primary);
}

.sf-pdp-tabs .nav-link.active {
  color: var(--color-brand-primary);
  border-bottom-color: var(--color-brand-primary);
  background: transparent;
}

.sf-pdp-tabs .tab-content {
  padding: var(--space-8);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Reviews */
.review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-bg-sunken);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}

.review-summary__score {
  min-width: 5rem;
  text-align: center;
}

.review-summary__bar-row {
  font-size: var(--font-size-xs);
}

.review-summary__star-label {
  min-width: 1.25rem;
}

.review-summary__progress {
  height: 0.375rem;
}

.review-summary__bar-fill {
  transition: width var(--transition-slow);
}

.review-summary__count {
  min-width: 1.875rem;
}

.sf-pdp-review__body {
  font-size: 0.84375rem;
  line-height: 1.8;
}

.stars-wrap {
  line-height: 1;
}

.sf-pdp-review {
  padding: var(--space-5);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
}

.sf-pdp-review__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

#reviewFormWrap {
  padding: var(--space-6);
  background: var(--color-bg-sunken);
  border-radius: var(--radius-xl);
  margin-top: var(--space-6);
}

.stars-wrap .star-input {
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring);
}

.stars-wrap .star-input.selected,
.stars-wrap .star-input.hovered {
  color: var(--color-warning);
}

.stars-wrap .star-input:not(.selected):not(.hovered) {
  color: var(--color-border-strong);
}

/* Specs table */
.sf-pdp-specs .table {
  margin: 0;
  font-size: var(--font-size-sm);
}

.sf-pdp-specs th {
  width: 30%;
  background: var(--color-bg-sunken);
  font-weight: var(--font-weight-semibold);
}

/* Related */
.sf-pdp-related {
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-border-default);
  margin-top: var(--space-8);
}

.sf-pdp-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .sf-pdp-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .sf-pdp-related__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Mobile buy bar */
.pdp-buybar {
  position: fixed;
  inset-inline: 0;
  bottom: 3.75rem;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border-default);
  box-shadow: 0 -4px 24px rgba(10, 10, 10, 0.06);
}

.pdp-buybar .t-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.pdp-buybar .detail-add-cart {
  flex: 1;
}

@media (min-width: 992px) {
  .pdp-buybar { display: none !important; }
}

body.sf-pdp-has-buybar {
  padding-bottom: calc(3.75rem + 4rem);
}

@media (min-width: 992px) {
  body.sf-pdp-has-buybar { padding-bottom: 0; }
}

@media (max-width: 991px) {
  .sf-pdp-gallery.product-gallery {
    position: static;
  }

  .sf-pdp-actions .detail-add-cart {
    display: none;
  }
}

@media (max-width: 575px) {
  .sf-pdp-gallery__nav {
    opacity: 1;
    width: 2.15rem;
    height: 2.15rem;
    font-size: 0.9rem;
  }

  .sf-pdp-gallery__zoom {
    width: 2.1rem;
    height: 2.1rem;
  }

  .product-thumb {
    width: 3.75rem;
    height: 3.75rem;
  }

  .sf-pdp-lightbox__nav {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
}