/* Product page: gallery above grain without moving DOM.
 * On product page, main does not create a stacking context so the gallery's z-index can sit above .nu-grain (99). */
body.nu-page-product #main-content {
  z-index: auto;
}
body.nu-page-product #nu-product-gallery {
  z-index: 100 !important;
}

/* Index (home): products section above grain so product images are not covered. */
body.nu-page-home #main-content {
  z-index: auto;
}
body.nu-page-home #products {
  position: relative;
  z-index: 100;
}

/* Product page: highlight size guide card when user selects that size (M, L, XL, XXL) */
.nu-size-card.nu-size-card-selected {
  border-color: #E5A00C !important;
  box-shadow: 0 0 0 2px rgba(229, 160, 12, 0.5) !important;
  background: rgba(229, 160, 12, 0.12) !important;
}
html.nu-theme-light .nu-size-card.nu-size-card-selected {
  border-color: #b45309 !important;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.35) !important;
  background: rgba(229, 160, 12, 0.15) !important;
}