#size-guide-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 21;
  background-color: #FFF;
  width: 340px;
  padding: 16px;
}

.admin-bar #size-guide-drawer {
  top: 32px !important;
}

.link-btn {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  font-family: "Work Sans", sans-serif;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

}

#close-size-guide-drawer {
  position: absolute;
  right: 10px;
  top: 10px;
}

.size-guide-open .site-header,
.size-guide-open #purefun-rolling-banner-container,
.size-guide-open .col-full-nav {
  z-index: 6 !important;
}

#size-guide-drawer {
  position: fixed;
  z-index: 102 !important;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  background-color: white;
  padding: 12px 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.size-guide-open::before {
  display: block;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000%;
  background: rgba(52, 53, 55, 0.4);
  content: "";
  cursor: pointer;
  transition: opacity 0.5s, visibility 0.5s;
}

#size-guide-drawer.show {
  visibility: visible !important;
  transform: translateX(0) !important;
}

#size-guide-drawer.show.hide {
  transform: translateX(100%) !important;
}

@media (max-width: 768px) {
  #size-guide-drawer {
    width: 340px !important;
  }
}