/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---------- Variables ---------- */
:root {
  --color-orange: hsl(26, 100%, 55%);
  --color-orange-light: hsl(25, 100%, 94%);
  --color-black: hsl(0, 0%, 8%);
  --color-dark-gray: hsl(0, 0%, 41%);
  --color-gray: hsl(220, 14%, 75%);
  --color-light-gray: hsl(223, 64%, 98%);
  --color-white: hsl(0, 0%, 100%);

  --font-family: 'Kumbh Sans', sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-family);
  color: var(--color-black);
  line-height: 1.5;
}

/* ---------- Header ---------- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e0e0e0;

.cart-btn {
  position: relative; /* قبلاً هم داشتیم، مطمئن شو تکراری نشه */
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 1rem;
  min-width: 18px;
  text-align: center;
}

}

.header__left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.menu-btn {
  display: none; /* فقط توی موبایل نمایش داده می‌شه */
}

.logo img {
  height: 20px;
}

.nav ul {
  display: flex;
  gap: 2rem;
}

.nav a {
  color: var(--color-dark-gray);
  font-size: 0.9rem;
  padding: 1.5rem 0;
  position: relative;
}

.nav a:hover {
  color: var(--color-black);
}

/* خط زیر منو موقع هاور - جزئیات ریز ولی مهم برای شبیه شدن به دیزاین */
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-orange);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nav a:hover::after {
  transform: scaleX(1);
}

.header__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cart-btn {
  position: relative;
}

.avatar-btn img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.avatar-btn:hover img {
  border-color: var(--color-orange);
}

/* ---------- Product Gallery ---------- */
.product-gallery {
  max-width: 445px;
}

.main-image-wrapper {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.main-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: zoom-in; /* نشون می‌ده قابل کلیک برای بزرگ‌نمایی هست */
}

.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-white);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: none; /* پیش‌فرض مخفی، فقط تو دسکتاپ نشون می‌دیم */
  align-items: center;
  justify-content: center;
}

.gallery-prev {
  left: 1rem;
}

.gallery-next {
  right: 1rem;
}

/* روی دسکتاپ این دکمه‌ها رو نشون بده */
@media (min-width: 768px) {
  .gallery-prev,
  .gallery-next {
    display: flex;
  }

  .gallery-prev:hover,
  .gallery-next:hover {
    background: var(--color-orange);
  }
  .gallery-prev:hover img,
  .gallery-next:hover img {
    filter: brightness(0) invert(1); /* آیکون رو سفید می‌کنه موقع هاور */
  }
}

.thumbnails {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.thumbnail {
  border-radius: 0.5rem;
  overflow: hidden;
  opacity: 1;
  border: 2px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.thumbnail img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.thumbnail:hover {
  opacity: 0.7;
}

.thumbnail.active {
  border-color: var(--color-orange);
  opacity: 0.5; /* دیزاین معمولاً تامبنیل فعال رو کم‌رنگ‌تر نشون میده با یه بردر نارنجی دورش */
}

/* ---------- Product Info ---------- */
.product-info {
  max-width: 445px;
  padding: 2rem 0;
}

.product-info__brand {
  color: var(--color-orange);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.product-info__title {
  font-size: 2rem;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.product-info__desc {
  color: var(--color-dark-gray);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* ---------- Price ---------- */
.product-info__price {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.price-current {
  font-size: 1.75rem;
  font-weight: 700;
}

.price-discount {
  background: var(--color-black);
  color: var(--color-orange);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
}

.price-old {
  color: var(--color-gray);
  text-decoration: line-through;
  font-weight: 700;
}

/* ---------- Cart Controls ---------- */
.product-info__cart-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .product-info__cart-controls {
    flex-direction: row;
  }
}

.quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-light-gray);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

.quantity__decrease,
.quantity__increase {
  color: var(--color-orange);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.5rem;
}

.quantity__value {
  font-weight: 700;
}

.add-to-cart-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--color-orange);
  color: var(--color-white);
  font-weight: 700;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2rem -0.5rem hsla(26, 100%, 55%, 0.5);
  transition: opacity 0.2s ease;
}

.add-to-cart-btn:hover {
  opacity: 0.7;
}

/* ---------- Main Layout ---------- */
.product {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .product {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    padding: 4rem 2rem;
  }

  .product-gallery,
  .product-info {
    flex: 1;
  }
}

/* ---------- Mobile Menu ---------- */
.menu-btn {
  display: block; /* حالا تو موبایل نشونش می‌دیم */
}

.nav {
  display: none; /* پیش‌فرض مخفیه تو موبایل */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75); /* پس‌زمینه تیره پشت منو */
  z-index: 100;
}

.nav.open {
  display: block;
}

.nav ul {
  flex-direction: column;
  background: var(--color-white);
  width: 70%;
  max-width: 300px;
  height: 100%;
  padding: 6rem 1.5rem;
  gap: 1.5rem;
}

.nav a {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0; /* اون padding قبلی مخصوص دسکتاپ بود */
}

.nav-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: none;
}

/* ---------- دسکتاپ: منو همیشه نمایان و همبرگر مخفی ---------- */
@media (min-width: 768px) {
  .menu-btn {
    display: none;
  }

  .nav {
    display: block;
    position: static;
    background: none;
    width: auto;
    height: auto;
  }

  .nav ul {
    flex-direction: row;
    background: none;
    width: auto;
    height: auto;
    padding: 0;
    gap: 2rem;
  }

  .nav a {
    padding: 1.5rem 0; /* برمی‌گردونیم پدینگ دسکتاپ */
  }
}

/* ---------- Cart Widget ---------- */
.cart-widget {
  display: none; /* پیش‌فرض مخفی؛ با JS نمایانش می‌کنیم */
  position: absolute;
  top: 5rem;
  right: 1rem;
  width: 90%;
  max-width: 350px;
  background: var(--color-white);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  z-index: 200;
}

.cart-widget.open {
  display: block;
}

.cart-widget__header {
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.cart-widget__header h2 {
  font-size: 1rem;
}

.cart-widget__body {
  padding: 1.5rem;
}

.cart-empty-msg {
  text-align: center;
  color: var(--color-dark-gray);
  font-weight: 700;
  padding: 2rem 0;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cart-item img {
  width: 40px;
  height: 40px;
  border-radius: 0.25rem;
  object-fit: cover;
}

.cart-item__info {
  flex: 1;
  font-size: 0.9rem;
  color: var(--color-dark-gray);
}

.cart-item__info strong {
  color: var(--color-black);
}

.checkout-btn {
  width: 100%;
  background: var(--color-orange);
  color: var(--color-white);
  font-weight: 700;
  padding: 1rem;
  border-radius: 0.75rem;
}

.checkout-btn:hover {
  opacity: 0.7;
}

/* ---------- Lightbox ---------- */
.lightbox {
  display: none; /* پیش‌فرض مخفی */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 300;
  align-items: center;
  justify-content: center;
}

.lightbox.open {
  display: flex;
}

.lightbox-close {
  position: absolute;
  top: -3rem;
  right: 0;
}

.lightbox-close img {
  filter: brightness(0) invert(1); /* آیکون بسته شدن رو سفید می‌کنه */
}

.lightbox__gallery {
  position: relative;
  max-width: 450px;
  width: 90%;
}

.lightbox__main-image {
  width: 100%;
  border-radius: 1rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.lightbox__gallery .gallery-prev,
.lightbox__gallery .gallery-next {
  display: flex; /* برخلاف گالری اصلی، این‌جا همیشه نمایانن (فقط تو دسکتاپ باز می‌شه اصلاً) */
}

.lightbox__gallery .thumbnails {
  margin-top: 1.5rem;
}

/* ---------- Profile Dropdown ---------- */
.profile-dropdown {
  display: none;
  position: absolute;
  top: 5rem;
  right: 1rem;
  width: 260px;
  background: var(--color-white);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
  z-index: 200;
  overflow: hidden;
}

.profile-dropdown.open {
  display: block;
}

.profile-dropdown__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.profile-dropdown__avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.profile-dropdown__name {
  font-weight: 700;
  font-size: 0.95rem;
}

.profile-dropdown__email {
  color: var(--color-dark-gray);
  font-size: 0.8rem;
}

.profile-dropdown__body {
  padding: 1.5rem;
}

.profile-dropdown__member-since {
  color: var(--color-dark-gray);
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.profile-dropdown__loyalty {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loyalty-badge {
  background: var(--color-black);
  color: var(--color-orange);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 1rem;
}

.loyalty-points {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-orange);
}