/** Shopify CDN: Minification failed

Line 190:19 Expected identifier but found whitespace
Line 190:26 Unexpected ";"

**/
/* General flyout panel styles */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--hotspot-color)/0.7);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(var(--hotspot-color)/0);
  }
}

.hotspot {
  transform: translate(-50%, -50%);
}
.hotspot.is-active {
  z-index: 31;
}

.hotspot__btn {
  width: 32px;
  height: 32px;
  transition: transform 0.3s, opacity 0.3s;
  border: 4px solid rgb(var(--text-color));
  border-radius: 50%;
  opacity: 0.6;
  background-color: rgb(var(--hotspot-color));
}
.hotspot__btn::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  animation: pulse 2.5s cubic-bezier(0.1, 0.5, 0.3, 1) infinite;
  border-radius: 50%;
}
.is-active > .hotspot__btn, .hotspot__btn:hover {
  opacity: 1;
}
.is-active > .hotspot__btn::before, .hotspot__btn:hover::before {
  animation: none;
}
.is-active > .hotspot__btn {
  transform: rotate(45deg);
}

.hotspot__btn > .icon {
  width: 20px;
  height: 20px;
  margin: 2px;
  stroke-width: 2px;
  stroke: var(--hotspot-cross-color);
}

.flyout-panel__header {
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: left;
  line-height: normal;
}

.flyout-panel__divider {
  margin: 0;
  border: none;
  border-top: 1px solid #ddd;
}

.hotspot__card {
  visibility: hidden;
  top: calc(100% + 12px);
  left: 50%;
  width: 100vw; /* Full width for mobile devices */
  height: 100%;
  padding: 16px;
  transform: translateX(-50%);
  transition: visibility 0s 0.3s, opacity 0.3s;
  opacity: 0;
  background-color: rgba(var(--bg-color));
  box-shadow: -4px 0 12px 0 rgba(0, 0, 0, 0.2);
  color: rgb(var(--text-color));
  overflow-y: auto;
}

.is-active > .hotspot__card {
  visibility: visible;
  transition: visibility 0s, opacity 0.3s;
  opacity: 1;
}

@media (min-width: 768px) {
  .hotspot__card {
    width: 60vw; /* Adjust width for larger screens */
    max-width: 400px; /* Max width for larger screens */
  }
}

@media (min-width: 1024px) {
  .hotspot__card {
    width: 50vw; /* Adjust width for desktop screens */
    max-width: 400px; /* Max width for desktop screens */
  }
}

.flyout-panel__close-btn {
  font-size: 3.5rem; /* Increased font size */
  padding: 1rem; /* Added padding */
  border: none;
  background: none;
  cursor: pointer;
}

.flyout-panel__content {
  padding: 1rem;
}

/*.bold_option_swatch_title, 
.bold_tooltip > :first-child {
  display: none !important;
}*/

.bold_option_title {
    cursor: pointer;
}

.bold_tooltip {
  cursor: pointer;
}

#flyout-panel > div.content.flyout-panel__content > ul,
#flyout-panel > div.content.flyout-panel__content > ol {
    padding-left: 20px; /* Add some left padding for nested list items */
    margin: 10px 0; /* Add some vertical spacing */
}

#flyout-panel > div.content.flyout-panel__content > ul {
    list-style-type: disc; /* Use disc bullets for unordered lists */
}

#flyout-panel > div.content.flyout-panel__content > ol {
    list-style-type: decimal; /* Use decimal numbers for ordered lists */
}

#flyout-panel > div.content.flyout-panel__content > ul > li,
#flyout-panel > div.content.flyout-panel__content > ol > li {
    margin-bottom: 5px; /* Add some spacing between list items */
    line-height: 1.5; /* Ensure readable line height */
}

.bold_option_title, .bold_tooltip, .bold_option_value_price {
    cursor: pointer;
    font-size: 14px; }


.bold_option_checkbox label:hover {
   color: red;
}
input[type="checkbox"] {
    /* Enlarging the checkbox */
    transform: scale(1.5); /* Adjust the scaling factor as needed */
    /* Bolder appearance can mean visually more prominent, since 'bold' doesn't apply to checkboxes directly */
    margin: 5px; /* Ensures there's space around the scaled checkbox */
    cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
    transition: transform 0.3s ease; /* Smooth transition for transformations */
}

input[type="checkbox"]:hover {
    /* Further enlarge on hover for visual feedback */
    transform: scale(1.7);
}

.bold_option:not(:empty) {
    padding-bottom: 8px;
}

/*.bold_tooltip {
    position: relative;
    display: inline-block;
    background: url('data:image/svg+xml,%3Csvg%20id%3D%22fi_5683325%22%20enable-background%3D%22new%200%200%2048%2048%22%20height%3D%2216%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20fill%3D%22%232196f3%22%20r%3D%2218%22%3E%3C%2Fcircle%3E%3Cg%20fill%3D%22%23fff%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2215.5%22%20r%3D%222.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22m22%2021h4v14h-4z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    margin-right: 8px; /* Space between the icon and the text */
    vertical-align: middle;
    top: -0px; /* Move the icon up by 5 pixels */
}*/

.media--cover {
  position: relative;
}

.media--cover .notice-over-product-image {
  position: absolute;
  bottom: 10px; /* Adjust as needed */
  left: 10px;   /* Adjust as needed */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: white;
  padding: 0 10px; /* Horizontal padding only */
  font-size: 14px; /* Adjust font size as needed */
  z-index: 10; /* Ensure it appears above the image */
  height: 40px; /* Adjust height as needed */
  line-height: 40px; /* Match the line-height to the height */
  text-align: center; /* Center text horizontally, if needed */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .media--cover .notice-over-product-image {
    font-size: 10px; /* Smaller font size for mobile */
    padding: 0 8px; /* Smaller padding for mobile */
    height: 24px; /* Smaller box height for mobile */
    line-height: 24px; /* Match the line-height to the height */
  }
}


.bold_options.bold_options_loaded {
    border: 1px solid #D3D3D3;
border-radius: 5px;
    padding: 10px;
}

.bold_clone {
display: none;
}

.bold_hidden {
    display: inline-block !important;
}

.pv-bold-input-error {
    border: 2px solid red; /* Highlight with a red border */
    padding: 4px; /* Add some padding if needed */
    border-radius: 4px; /* Optional: round the corners */
}


.swatch-color-label {
    font-size: 12px;
    color: #333;
    z-index: 1000; /* Ensure it appears above other elements */
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow */
}

.bold_option_checkbox > .bold_tooltip {
    display: none;
}

.flyout-panel__content {
    max-height: 70vh; /* Adjust as needed */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overscroll-behavior: contain; /* Prevent scroll chaining */
}

/* Prevent body scroll when flyout is open */
body.flyout-open {
    overflow: hidden;
}