* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background: #0b0b0b;
  color: #f5f5f5;
  line-height: 1.6;
}


/* =========================
   HEADER
========================= */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;

  background: linear-gradient(
    135deg,
    #0b0b0b 0%,
    #310000 45%,
    #760000 100%
  );

  border-bottom: 2px solid #d4af37;
  gap: 2rem;
}

h1,
h2,
h3 {
  color: #d4af37;
}

.logo img {
  max-height: 50px;
}


/* =========================
   NAVIGATION
========================= */

header nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
}

header nav ul li a {
  text-decoration: none;
  color: #fff8e7;
  font-weight: 500;
  font-size: 1rem;
  position: relative;
  transition: color 0.3s ease;
}

header nav ul li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;

  background: linear-gradient(
    90deg,
    #9b7415,
    #ffd76a,
    #d4af37
  );

  transition: width 0.3s ease;
}

header nav ul li a:hover {
  color: #ffd76a;
}

header nav ul li a:hover::after {
  width: 100%;
}


/* =========================
   HEADER RIGHT
========================= */

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


/* =========================
   SEARCH BOX
========================= */

.search-box {
  display: flex;
  align-items: center;

  border: 1px solid #d4af37;
  border-radius: 25px;

  padding: 0.3rem 0.8rem;
  gap: 0.5rem;

  background: rgba(255,255,255,0.06);
}

.search-box input {
  border: none;
  outline: none;
  font-size: 0.9rem;
  width: 180px;

  background: transparent;
  color: #ffffff;
}

.search-box input::placeholder {
  color: #d6d6d6;
}


/* =========================
   ICONS
========================= */

.icons {
  display: flex;
  gap: 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  color: #d4af37;
}

.icons i:hover {
  color: #ff2929;
}


/* =========================
   PRODUCT
========================= */

.product {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 2rem 5%;
  gap: 3rem;

  background:
    radial-gradient(
      circle at top,
      rgba(196,0,0,0.12),
      transparent 45%
    );
}


/* =========================
   GALLERY
========================= */

.gallery {
  flex: 1;
  text-align: center;
}

.main-img {
  width: 100%;
  max-width: 500px;

  border-radius: 10px;
  border: 2px solid #d4af37;

  box-shadow:
    0 0 15px rgba(212,175,55,0.25),
    0 0 30px rgba(196,0,0,0.15);
}


/* =========================
   PRICE
========================= */

.price {
  font-size: 1.5rem;
  color: #ffd76a;
  font-weight: bold;
  margin: 1rem 0;
}


/* =========================
   THUMBNAILS
========================= */

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

.thumbnails img {
  width: 60px;
  border-radius: 10px;

  border: 2px solid transparent;

  cursor: pointer;
  transition:
    border 0.3s ease,
    transform 0.3s ease;
}

.thumbnails img:hover {
  border: 2px solid #d4af37;
  transform: translateY(-3px);
}


/* =========================
   DETAILS
========================= */

.details {
  flex: 1;
}

.details h3 {
  color: #d4af37;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.details h1 {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  color: #ffd76a;
}


/* =========================
   RATING
========================= */

.rating {
  color: #ffd700;
  font-size: 1.2rem;
}

.rating .reviews {
  color: #d4af37;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}


/* =========================
   STOCK
========================= */

.stock {
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.stock .in-stock {
  color: #ff3b3b;
  font-weight: bold;
}


/* =========================
   COLORS
========================= */

.colors {
  display: flex;
  gap: 10px;
  margin: 1rem 0;
}

.colors span {
  width: 25px;
  height: 25px;
  border-radius: 50%;

  cursor: pointer;

  border: 2px solid #d4af37;

  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.colors span:hover {
  transform: scale(1.2);

  border: 2px solid #ffd76a;

  box-shadow:
    0 0 10px rgba(212,175,55,0.7);
}


/* =========================
   SPECS
========================= */

.specs {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  color: #e7e7e7;
}

.specs li {
  margin: 0.4rem 0;
}


/* =========================
   DESCRIPTION
========================= */

.desc {
  font-size: 0.9rem;
  color: #d6d6d6;
  margin: 1rem 0;
}


/* =========================
   QUANTITY
========================= */

.quantity {
  margin: 1.5rem 0;
}

.qty-box {
  display: flex;
  align-items: center;

  border: 2px solid #d4af37;
  border-radius: 12px;

  overflow: hidden;
  width: 120px;

  background: #171010;

  box-shadow:
    0 2px 10px rgba(212,175,55,0.2);
}

.qty-box button {
  flex: 1;
  border: none;

  background:
    linear-gradient(
      135deg,
      #760000,
      #c40000
    );

  color: #ffd76a;

  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.5rem;

  cursor: pointer;

  transition:
    background 0.3s,
    transform 0.2s;
}

.qty-box button:hover {
  background:
    linear-gradient(
      135deg,
      #d4af37,
      #ffd76a
    );

  color: #3d0000;

  transform: scale(1.05);
}

.qty-box input {
  width: 50px;

  text-align: center;

  border: none;
  outline: none;

  background: #171010;
  color: #ffd76a;

  font-size: 1.2rem;
  font-weight: 600;
}


/* =========================
   BUTTONS
========================= */

.buttons {
  display: flex;
  gap: 1rem;
}

.add-cart,
.buy-now {
  flex: 1;

  padding: 0.8rem 1rem;

  font-size: 1rem;
  font-weight: bold;

  border-radius: 25px;

  cursor: pointer;

  transition: all 0.3s ease;

  text-align: center;
  text-decoration: none;

  display: inline-block;
}


/* LOGIN */

.add-cart {
  background:
    linear-gradient(
      135deg,
      #760000,
      #c40000,
      #e31616
    );

  color: #ffffff;

  border: 2px solid #d4af37;

  box-shadow:
    0 5px 15px rgba(196,0,0,0.25);
}

.add-cart:hover {
  background:
    linear-gradient(
      135deg,
      #d4af37,
      #ffd76a
    );

  color: #3d0000;

  transform: translateY(-2px);

  box-shadow:
    0 7px 20px rgba(212,175,55,0.35);
}


/* REGISTER */

.buy-now {
  background:
    linear-gradient(
      135deg,
      #9b7415,
      #ffd76a,
      #d4af37
    );

  border: 2px solid #ffd76a;

  color: #3d0000;

  box-shadow:
    0 5px 15px rgba(212,175,55,0.25);
}

.buy-now:hover {
  background:
    linear-gradient(
      135deg,
      #760000,
      #c40000
    );

  border-color: #ffd76a;

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow:
    0 7px 20px rgba(196,0,0,0.35);
}


/* =========================
   REVIEWS
========================= */

.gallery .reviews {
  margin-top: 2rem;
  text-align: left;
}

.reviews {
  margin-top: 1.5rem;
  padding: 1rem;

  background:
    linear-gradient(
      145deg,
      #171010,
      #260909
    );

  border: 1px solid rgba(212,175,55,0.35);

  border-radius: 12px;

  box-shadow:
    0 4px 15px rgba(0,0,0,0.35);

  animation: fadeInUp 1s ease-in-out;
}

.reviews h3 {
  font-size: 1.3rem;

  color: #ffd76a;

  margin-bottom: 1rem;
  text-align: left;
}

.review {
  padding: 0.8rem;

  border-bottom:
    1px solid rgba(212,175,55,0.25);

  opacity: 0;

  transform: translateY(20px);

  animation:
    fadeSlide 0.8s ease forwards;
}

.review:last-child {
  border-bottom: none;
}

.review:nth-child(2) {
  animation-delay: 0.3s;
}

.review:nth-child(3) {
  animation-delay: 0.6s;
}


/* =========================
   ANIMATIONS
========================= */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================
   FOOTER
========================= */

.footer {
  background:
    linear-gradient(
      135deg,
      #070707 0%,
      #290000 55%,
      #0b0b0b 100%
    );

  padding: 3rem 5%;

  font-family: Arial, sans-serif;

  color: #e7e7e7;

  border-top: 2px solid #d4af37;
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
}

.footer-col h3,
.footer-col .logo {
  margin-bottom: 1rem;

  font-weight: bold;

  color: #ffd76a;
}

.footer-col p {
  margin: 0.5rem 0;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin: 0.4rem 0;
}

.footer-col ul li a {
  text-decoration: none;

  color: #e7e7e7;

  transition: color 0.3s ease;
}

.footer-col ul li a:hover {
  color: #ffd76a;
}


/* =========================
   SUBSCRIBE
========================= */

.subscribe {
  margin-top: 1rem;

  display: flex;
  flex-direction: column;

  gap: 0.5rem;
}

.subscribe input {
  padding: 0.5rem;

  border: none;
  border-bottom: 2px solid #d4af37;

  background: transparent;

  color: #fff;

  outline: none;
}

.subscribe button {
  background:
    linear-gradient(
      135deg,
      #760000,
      #c40000
    );

  color: #fff;

  border: 1px solid #d4af37;

  padding: 0.6rem;

  cursor: pointer;

  transition: all 0.3s ease;
}

.subscribe button:hover {
  background:
    linear-gradient(
      135deg,
      #d4af37,
      #ffd76a
    );

  color: #3d0000;
}


/* =========================
   SOCIAL ICONS
========================= */

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

.socials a {
  color: #d4af37;
  font-size: 1.5rem;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.socials a:hover {
  color: #ff2929;
  transform: translateY(-3px);
}


/* =========================
   FOOTER BOTTOM
========================= */

.footer-bottom {
  margin-top: 2rem;

  text-align: center;

  font-size: 0.9rem;

  border-top:
    1px solid rgba(212,175,55,0.4);

  padding-top: 1rem;

  color: #cfcfcf;
}


/* =========================
   RESPONSIVE FOOTER TABLET
========================= */

@media (max-width: 768px) {

  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

}


/* =========================
   RESPONSIVE FOOTER MOBILE
========================= */

@media (max-width: 480px) {

  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .socials {
    justify-content: center;
  }

}


/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {

  .product {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .details {
    display: flex;
    flex-direction: column;

    text-align: left;

    margin-top: 2rem;

    width: 100%;
  }

  .details .buttons {
    order: 1;
    margin-bottom: 1.5rem;
    flex-direction: column;
    display: flex;
  }

  .details h3 {
    order: 2;
  }

  .details h1 {
    order: 3;
  }

  .stock {
    order: 4;
  }

  .rating {
    order: 5;
  }

  .colors {
    order: 6;
  }

  .quantity {
    order: 7;
  }

  .price {
    order: 8;
  }

  .desc,
  .specs {
    order: 9;
    margin-top: 1rem;
  }

  .reviews {
    order: 10;
    margin-top: 2rem;
  }

  .gallery .reviews {
    text-align: center;
  }

  .qty-box {
    width: 140px;
  }

}


/* =========================
   MOBILE LARGE
========================= */

@media (max-width: 768px) {

  header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  header nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .header-right {
    flex-direction: column;
    gap: 1rem;
  }

  .product {
    flex-direction: column;
    gap: 2rem;
  }

  .main-img {
    order: 0;
    max-width: 90%;
  }

  .gallery .buttons {
    order: 2;

    display: flex;

    justify-content: center;

    flex-direction: column;

    gap: 1rem;

    margin-top: 1rem;

    width: 100%;
  }

  .gallery .buttons a {
    flex: 1;

    min-width: 120px;

    text-align: center;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;
  }

}


/* =========================
   MOBILE SMALL
========================= */

@media (max-width: 480px) {

  body {
    font-size: 0.9rem;
  }

  header {
    padding: 1rem 2%;
  }

  .logo img {
    max-height: 40px;
  }

  .search-box input {
    width: 140px;
    font-size: 0.8rem;
  }

  .main-img {
    order: 0;
    max-width: 100%;
  }

  .gallery .buttons {
    order: 2;

    flex-direction: column;

    margin-top: 10px;

    width: 100%;
  }

  .gallery .buttons a {
    width: 100%;
    text-align: center;
  }

  .thumbnails img {
    width: 45px;
  }

  .qty-box {
    width: 100px;
  }

  .qty-box button {
    font-size: 1rem;
    padding: 0.4rem;
  }

  .qty-box input {
    width: 35px;
    font-size: 1rem;
  }

  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .socials {
    justify-content: center;
  }

}