@charset "utf-8";

#shoplift-preview-control { position: fixed; max-width: 332px; height: 56px; background-color: rgb(20, 20, 20); z-index: 9999; bottom: 20px; display: flex; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0) 13px 22px 7px, rgba(0, 0, 0, 0.01) 9px 14px 7px, rgba(0, 0, 0, 0.05) 5px 8px 6px, rgba(0, 0, 0, 0.09) 2px 4px 4px, rgba(0, 0, 0, 0.1) 1px 1px 2px, rgba(0, 0, 0, 0.1) 0px 0px; align-items: center; margin: 0px auto; left: 16px; right: 16px; opacity: 0; transform: translateY(20px); visibility: hidden; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s; }

#shoplift-preview-control.visible { opacity: 1; transform: translateY(0px); visibility: visible; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility; }

#shoplift-preview-control * { font-family: Inter, sans-serif; color: rgb(255, 255, 255); box-sizing: border-box; font-size: 16px; }

#shoplift-preview-variant-title { font-weight: 400; line-height: 140%; font-size: 16px; text-align: start; letter-spacing: -0.16px; flex-grow: 1; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }

#shoplift-preview-variant-selector { position: relative; display: block; padding: 6px 0px; height: 100%; min-width: 0px; flex: 1 1 auto; }

#shoplift-preview-variant-menu-trigger { border-top: none; border-bottom: none; border-image: initial; cursor: pointer; width: 100%; background-color: transparent; padding: 0px 16px; border-left: 1px solid rgb(51, 51, 51); border-right: 1px solid rgb(51, 51, 51); height: 100%; display: flex; align-items: center; justify-content: start; gap: 8px; }

#shoplift-preview-variant-selector .menu-variant-label { width: 24px; height: 24px; border-radius: 50%; padding: 6px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; letter-spacing: -0.12px; flex-shrink: 0; }

#shoplift-preview-variant-selector .preview-variant-menu { position: absolute; bottom: 110%; transform: translate3d(0px, 20px, 0px); visibility: hidden; pointer-events: none; opacity: 0; cursor: pointer; background-color: rgb(20, 20, 20); border: 1px solid rgb(20, 20, 20); border-radius: 6px; width: 100%; max-height: 156px; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px; z-index: 1; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s; }

#shoplift-preview-variant-selector .preview-variant-menu.preview-variant-menu__visible { visibility: visible; pointer-events: auto; opacity: 100; transform: translateZ(0px); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility; }

@media screen and (max-width: 400px) {
  #shoplift-preview-variant-selector .preview-variant-menu { position: fixed; left: 0px; right: 0px; width: auto; bottom: 110%; }
}

#shoplift-preview-variant-selector .preview-variant-menu .preview-variant-menu--item { padding: 12px 16px; display: flex; overflow: hidden; }

#shoplift-preview-variant-selector .preview-variant-menu .preview-variant-menu--item .menu-variant-label { margin-right: 6px; }

#shoplift-preview-variant-selector .preview-variant-menu .preview-variant-menu--item span { overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; white-space-collapse: collapse; color: rgb(246, 246, 246); font-size: 14px; font-style: normal; font-weight: 500; }

#shoplift-preview-variant-selector .preview-variant-menu .preview-variant-menu--item:hover { background-color: rgb(84, 84, 84); }

#shoplift-preview-variant-selector .preview-variant-menu .preview-variant-menu--item:last-of-type { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }

#shoplift-preview-variant-selector .preview-variant-menu .preview-variant-menu--item:first-of-type { border-top-left-radius: 6px; border-top-right-radius: 6px; }

#shoplift-preview-control div:has(#shoplift-exit-preview-button) { padding: 0px 16px; }

#shoplift-exit-preview-button { padding: 6px 8px; font-weight: 500; line-height: 75%; border-radius: 4px; background-color: transparent; border: none; text-decoration: none; }

#shoplift-exit-preview-button:hover { cursor: pointer; background-color: rgb(51, 51, 51); }