/*=============== PRODUCT PAGE STYLES ===============*/

  /* Page Header */
  .page-header {
      background: linear-gradient(135deg, var(--first-color) 0%, var(--first-color-alt) 100%);
      color: white;
      padding: 6rem 0 3rem;
      text-align: center;
      margin-top: var(--header-height);
  }

  .page-header h1 {
      font-size: var(--big-font-size);
      margin-bottom: var(--mb-1);
      color: white;
  }

  .page-header p {
      font-size: var(--h3-font-size);
      color: rgba(255, 255, 255, 0.9);
  }

  /* Product Section */
  .product-section {
      padding: 5rem 0;
      background-color: var(--body-color);
  }

  .product-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
  }

  .product-image {
      text-align: center;
  }

  .product-image img {
      max-width: 100%;
      border-radius: 1rem;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
  }

  .product-image img:hover {
      transform: scale(1.02);
  }

  .product-details h2 {
      font-size: var(--h1-font-size);
      color: var(--title-color);
      margin-bottom: var(--mb-1);
  }

  .short-desc {
      font-size: var(--h3-font-size);
      color: var(--text-color);
      line-height: 1.6;
      margin-bottom: var(--mb-2);
  }

  .points {
      list-style: none;
      margin-bottom: var(--mb-2);
  }

  .points li {
      padding: 0.5rem 0;
      color: var(--text-color);
      font-size: var(--normal-font-size);
  }

  .points li:before {
      content: "✓";
      color: var(--first-color);
      font-weight: bold;
      margin-right: 10px;
  }

  .btn-primary {
      display: inline-block;
      background-color: var(--first-color);
      color: white;
      padding: 1rem 2.5rem;
      border-radius: 0.5rem;
      font-weight: var(--font-medium);
      font-size: var(--h3-font-size);
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
  }

  .btn-primary:hover {
      background-color: var(--first-color-alt);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  /* Features Section */
  .features {
      padding: 5rem 0;
      background-color: var(--first-color-lighten);
      text-align: center;
  }

  .features h2 {
      color: var(--title-color);
      margin-bottom: var(--mb-1);
      font-size: var(--h1-font-size);
  }

  .desc {
      max-width: 800px;
      margin: 0 auto var(--mb-3);
      color: var(--text-color);
      line-height: 1.8;
      font-size: var(--normal-font-size);
  }

  .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 20px auto;
  }

  .card {
      background-color: var(--container-color);
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
  }

  .card:hover {
      transform: translateY(-10px);
  }

  .card h3 {
      color: var(--title-color);
      margin-bottom: var(--mb-1);
      font-size: var(--h2-font-size);
  }

  .card p {
      color: var(--text-color);
      line-height: 1.6;
  }

  /* Ingredients Section */
  .ingredients {
      padding: 5rem 0;
      background-color: var(--body-color);
  }

  .ingredients h2 {
      text-align: center;
      color: var(--title-color);
      margin-bottom: var(--mb-3);
      font-size: var(--h1-font-size);
  }

  .ingredients-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
  }

  .ingredient {
      text-align: center;
      padding: 2rem;
      background-color: var(--container-color);
      border-radius: 1rem;
      transition: all 0.3s ease;
  }

  .ingredient:hover {
      background-color: var(--first-color-lighten);
      transform: translateY(-5px);
  }

  .ingredient h4 {
      color: var(--title-color);
      margin-bottom: var(--mb-0-75);
      font-size: var(--h3-font-size);
  }

  .ingredient p {
      color: var(--text-color);
      line-height: 1.6;
      font-size: var(--small-font-size);
  }

  /* Benefits Section */
  .benefits {
      padding: 5rem 0;
      background-color: var(--first-color-lighten);
  }

  .benefits h2 {
      text-align: center;
      color: var(--title-color);
      margin-bottom: var(--mb-2);
      font-size: var(--h1-font-size);
  }

  .benefit-list {
      max-width: 600px;
      margin: 0 auto;
      list-style: none;
  }

  .benefit-list li {
      padding: 0.75rem 0;
      color: var(--text-color);
      font-size: var(--normal-font-size);
      border-bottom: 1px solid var(--first-color-lighten);
  }

  .benefit-list li:last-child {
      border-bottom: none;
  }

  .benefit-list li:before {
      content: "✓";
      color: var(--first-color);
      font-weight: bold;
      margin-right: 10px;
  }

  /* Usage Section */
  .usage {
      padding: 5rem 0;
      background-color: var(--body-color);
      text-align: center;
  }

  .usage h2 {
      color: var(--title-color);
      margin-bottom: var(--mb-1);
      font-size: var(--h1-font-size);
  }

  .usage p {
      max-width: 800px;
      margin: 0 auto;
      color: var(--text-color);
      line-height: 1.8;
      font-size: var(--normal-font-size);
  }

  /* CTA Section */
  .cta {
      padding: 5rem 0;
      background: linear-gradient(135deg, var(--first-color) 0%, var(--first-color-alt) 100%);
      color: white;
      text-align: center;
  }

  .cta h2 {
      color: white;
      margin-bottom: var(--mb-1);
      font-size: var(--h1-font-size);
  }

  .cta p {
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: var(--mb-2);
      font-size: var(--h3-font-size);
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
  }

  .cta .btn-primary {
      background-color: white;
      color: var(--first-color);
  }

  .cta .btn-primary:hover {
      background-color: var(--first-color-lighten);
      color: var(--first-color);
  }

  /* Dark Theme Support */
  .dark-theme .page-header {
      background: linear-gradient(135deg, var(--first-color-dark) 0%, hsl(var(--hue), 8%, 25%) 100%);
  }

  .dark-theme .product-section {
      background-color: var(--body-color);
  }

  .dark-theme .features {
      background-color: hsl(var(--hue), 8%, 18%);
  }

  .dark-theme .card {
      background-color: var(--container-color);
  }

  .dark-theme .ingredients {
      background-color: var(--body-color);
  }

  .dark-theme .ingredient {
      background-color: var(--container-color);
  }

  .dark-theme .ingredient:hover {
      background-color: hsl(var(--hue), 8%, 20%);
  }

  .dark-theme .benefits {
      background-color: hsl(var(--hue), 8%, 18%);
  }

  .dark-theme .benefit-list li {
      border-bottom-color: hsl(var(--hue), 8%, 25%);
  }

  .dark-theme .usage {
      background-color: var(--body-color);
  }

  .dark-theme .cta {
      background: linear-gradient(135deg, var(--first-color-dark) 0%, hsl(var(--hue), 8%, 25%) 100%);
  }

  .dark-theme .cta .btn-primary {
      background-color: white;
      color: var(--first-color);
  }

  /* Responsive Design */
  @media screen and (max-width: 992px) {
      .product-wrapper {
          grid-template-columns: 1fr;
          gap: 3rem;
      }

      .product-image {
          order: 1;
      }

      .product-details {
          order: 2;
      }

      .features-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media screen and (max-width: 768px) {
      .page-header {
          padding: 4rem 0 2rem;
      }

      .page-header h1 {
          font-size: var(--h1-font-size);
      }

      .product-section,
      .features,
      .ingredients,
      .benefits,
      .usage,
      .cta {
          padding: 3rem 0;
      }

      .features-grid {
          grid-template-columns: 1fr;
      }

      .ingredients-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .btn-primary {
          padding: 0.75rem 2rem;
          font-size: var(--normal-font-size);
      }
  }

  @media screen and (max-width: 480px) {
      .ingredients-grid {
          grid-template-columns: 1fr;
      }

      .product-details h2 {
          font-size: var(--h2-font-size);
      }

      .short-desc {
          font-size: var(--normal-font-size);
      }
  }

  /* Navigation Styles */
  .nav__toggle {
      display: none;
  }

  @media screen and (max-width: 767px) {
      .nav__toggle {
          display: inline-flex;
          font-size: 1.25rem;
          cursor: pointer;
          color: var(--title-color);
      }

      .nav__menu {
          position: fixed;
          background-color: var(--container-color);
          width: 80%;
          height: 100%;
          top: 0;
          right: -100%;
          box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, .1);
          padding: 4rem 0 0 3rem;
          border-radius: 1rem 0 0 1rem;
          transition: .3s;
          z-index: var(--z-fixed);
      }

      .nav__close {
          font-size: 1.5rem;
          position: absolute;
          top: 1rem;
          right: 1.25rem;
          cursor: pointer;
          color: var(--title-color);
      }

      .show-menu {
          right: 0;
      }

      .dark-theme .nav__menu {
          background-color: var(--container-color);
      }
  }