/* ============================================================================
   GYNOFEM — "PRODUCTS" DROPDOWN, DESKTOP (every page except index.html)
   ----------------------------------------------------------------------------
   Makes the Products mega-dropdown on the inner pages look and behave the same
   as the one on the home page (css/style.css + section 5 of
   css/responsive/index.css). Loaded after each page's own inline <style> and
   its css/responsive/<page>.css, and limited to desktop widths (>= 1025px):
   phones and tablets keep the drawer menu from the responsive stylesheets.

   What was different on the inner pages:
   1. Their nav list carries an inline `transform: translateX(10px)` nudge. A
      transform turns the element into the positioning box for absolutely
      positioned children, so at 1025-1399px — where the panel is meant to
      span the navbar — it was squeezed to the list's ~600px width and the
      five tiles stacked two to a row. The same 10px nudge is now made with a
      margin, which does not create a positioning box: in the navbar's
      space-between row a 20px left margin moves the list right by exactly
      half of that.
   2. At 1400px and up the panel was placed with `right: 30px` and a +760px
      slide; it now uses the home page's `left: 50%` and -500px slide.
   3. company.html opened the panel only through `.menu-open`, a class the nav
      script sets on touch widths, so hovering "Products" on a desktop did
      nothing there. Hover now opens it on every page.
   4. Tile hover matches the home page on every page: the picture grows
      slightly and the label turns pink.
   ============================================================================ */

@media (min-width: 1025px) {
  .nav-links {
    transform: none !important;
    margin-left: 20px;
  }

  .nav-dropdown-2:hover .dropdown-menu-2 {
    opacity: 1;
    visibility: visible;
  }

  .product-item:hover img {
    transform: scale(1.04);
  }

  .product-item:hover span {
    color: #b5179e;
  }
}

@media (min-width: 1400px) {
  .nav-dropdown-2 {
    position: relative;
  }

  .dropdown-menu-2 {
    top: 120%;
    left: 50%;
    right: auto;
    transform: translateX(-480px);
  }

  .nav-dropdown-2:hover .dropdown-menu-2 {
    transform: translateX(-500px);
  }
}