/* ========================================
   BASE
======================================== */

.navbar_dropdown-list:is(.is-2, .is-3, .is-4) .link-wrapper-3,
.navbar_dropdown-links .link-wrapper-3 {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.navbar_dropdown-list:is(.is-2, .is-3, .is-4) .link.link-dropdown-demo-2,
.navbar_dropdown-list:is(.is-2, .is-3, .is-4) .product_icon.grey,
.navbar_dropdown-links .link.link-dropdown-demo-2,
.navbar_dropdown-links .product_icon.grey {
  transition:
    color 0.3s ease,
    fill 0.3s ease;
}

/* ========================================
   CURRENT PAGE — ALL DEVICES
======================================== */

/* Current page text stays yellow */
.navbar_dropdown-list:is(.is-2, .is-3, .is-4)
  .link.link-dropdown-demo-2.w--current,
.navbar_dropdown-links .link.link-dropdown-demo-2.w--current {
  color: #f0a601;
}

/* Current page icon stays yellow */
.navbar_dropdown-list:is(.is-2, .is-3, .is-4)
  .link-wrapper-3:has(.link.link-dropdown-demo-2.w--current)
  .product_icon.grey,
.navbar_dropdown-links
  .link-wrapper-3:has(.link.link-dropdown-demo-2.w--current)
  .product_icon.grey {
  color: #f0a601;
  fill: #f0a601;
}

/* Current page item always fully visible */
.navbar_dropdown-list:is(.is-2, .is-3, .is-4)
  .link-wrapper-3:has(.link.link-dropdown-demo-2.w--current),
.navbar_dropdown-links
  .link-wrapper-3:has(.link.link-dropdown-demo-2.w--current) {
  opacity: 1;
}

/* ========================================
   DESKTOP HOVER ONLY
======================================== */

@media (min-width: 992px) and (hover: hover) {
  /* ----------------------------------------
     OPACITY FADE
  ---------------------------------------- */

  .navbar_dropdown-list:is(.is-2, .is-3, .is-4)
    .navbar_dropdown-item:has(.link-wrapper-3:hover)
    .link-wrapper-3 {
    opacity: 0.4;
  }

  .navbar_dropdown-list:is(.is-2, .is-3, .is-4)
    .navbar_dropdown-item:has(.link-wrapper-3:hover)
    .link-wrapper-3:hover {
    opacity: 1;
  }

  .navbar_dropdown-links:has(.link-wrapper-3:hover) .link-wrapper-3 {
    opacity: 0.4;
  }

  .navbar_dropdown-links:has(.link-wrapper-3:hover) .link-wrapper-3:hover {
    opacity: 1;
  }

  /* ----------------------------------------
     1. NORMAL LINK HOVER
     text = #1c1f2c
  ---------------------------------------- */

  .navbar_dropdown-list:is(.is-2, .is-3, .is-4)
    .link-wrapper-3:hover
    .link.link-dropdown-demo-2:not(.w--current),
  .navbar_dropdown-links
    .link-wrapper-3:hover
    .link.link-dropdown-demo-2:not(.w--current) {
    color: #1c1f2c;
  }

  /* ----------------------------------------
     2. LINK WITH ICON HOVER
     text = #1c1f2c
     icon = #f0a601
  ---------------------------------------- */

  .navbar_dropdown-list:is(.is-2, .is-3, .is-4)
    .link-wrapper-3:hover
    .product_icon.grey,
  .navbar_dropdown-links .link-wrapper-3:hover .product_icon.grey {
    color: #f0a601;
    fill: #f0a601;
  }
}

/* ========================================
   TABLET + MOBILE
======================================== */

@media (max-width: 991px) {
  /* No opacity fading */
  .navbar_dropdown-list .link-wrapper-3,
  .navbar_dropdown-links .link-wrapper-3 {
    opacity: 1 !important;
  }

  /* Tap/focus normal link = dark */
  .navbar_dropdown-list
    .link-wrapper-3:focus-within
    .link.link-dropdown-demo-2:not(.w--current),
  .navbar_dropdown-links
    .link-wrapper-3:focus-within
    .link.link-dropdown-demo-2:not(.w--current) {
    color: #1c1f2c;
  }

  /* Tap/focus icon = yellow */
  .navbar_dropdown-list .link-wrapper-3:focus-within .product_icon.grey,
  .navbar_dropdown-links .link-wrapper-3:focus-within .product_icon.grey {
    color: #f0a601;
    fill: #f0a601;
  }
}