/* Webflow Design Mode Overrides */
html.wf-design-mode [data-next-skeleton] {
display:none!important;
}

      
        
/* smoothing and fluid responsive */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html {
  font-size: 1rem;
}
/* Set color style to inherit */
.inherit-color * {
  color: inherit;
}
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext > :last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0 !important;
}
/* Prevent all click and hover interaction with an element */
.pointer-events-off {
  pointer-events: none;
}
/* Enables all click and hover interaction with an element */
.pointer-events-on {
  pointer-events: auto;
}
/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
/* Make sure containers never lose their center alignment */
.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}
/* 
Make the following elements inherit typography styles from the parent and not have hardcoded values. 
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/
/* Apply "..." after 3 lines of text */
.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */
.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}
/* These classes are never overwritten */
.hide {
  display: none !important;
}
@media screen and (max-width: 991px) {
  .hide,
  .hide-tablet {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}
@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}
.margin-0 {
  margin: 0rem !important;
}
.padding-0 {
  padding: 0rem !important;
}
.spacing-clean {
  padding: 0rem !important;
  margin: 0rem !important;
}
.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
/* Apply "..." at 100% width */
.truncate-width {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Removes native scrollbar */
.no-scrollbar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Badge Pro Colors */
.ll-badge-pro {
  background: linear-gradient(
    45deg,
    rgba(185, 205, 255, 0.4) 0%,
    rgba(201, 182, 255, 0.4) 33.33%,
    rgba(239, 184, 255, 0.4) 66.67%,
    rgba(255, 210, 177, 0.4) 100%
  );
}
/* Badge Pro Text Colors */
.ll-badge-pro-text {
  background: linear-gradient(90deg, #8771ce 0%, #98519b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Fix for ios */
.cc-text-field {
  -webkit-appearance: none;
}
/* Fix for ios */
.cc-explore-search {
  -webkit-appearance: none;
}
.fb-gradient {
  background: var(
    --Title-Gradient,
    linear-gradient(180deg, #11023b 0%, #431274 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Text Limit */
.cc-text-limit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cc-text-limit-xs {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/* Text Limit */
.cc-word-limit {
  max-width: 13ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

      

        
input#ship_field_intl::placeholder {
    opacity: 1;
}
input#billing_field_intl::placeholder {
    opacity: 1;
}
.preloader {
	position: fixed;
  display: grid;
  place-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
  transition: opacity 0.2s .15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.preloader::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border: 1px solid color-mix(in hsl, #000, transparent 50%);
  border-radius: 50%;
  border-top-color: transparent;
  border-right-color: transparent;
  animation: spin 0.6s linear infinite;
  transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wf-design-mode .preloader,
.site-scrollbar .preloader {
	display: none;
}
[data-os-checkout-ready="true"] .preloader {
  opacity: 0;
  pointer-events: none;
}
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #fdf8f3 inset !important;
      transition: background-color 5000s ease-in-out 0s!important;
}
select:-webkit-autofill,
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus, 
select:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #fdf8f3 inset !important;
      transition: background-color 5000s ease-in-out 0s!important;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fdf8f3 inset !important;
      transition: background-color 5000s ease-in-out 0s!important;
      }
select {
  /* Removes the native dropdown arrow in most modern browsers */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /* Ensures that the arrow graphic is not displayed in Internet Explorer / Edge */
  background: none; /* or your preferred background */
  background-repeat: no-repeat;
  padding-right: 1em; /* ensure there's space if you replace with a custom icon */
  border: 1px solid #ccc; /* example styling; adjust as needed */
}
/* Specifically hide the dropdown arrow in IE / Edge */
select::-ms-expand {
  display: none;
}
/* Hide checkmark by default */
.pb-component-checkmark [os-component="check"] {
  display: none;
}
/* Show checkmark if parent has 'os--selected' in its class attribute */
.checkout-bump__head[class*="os--active"] .pb-component-checkmark [os-component="check"] {
  display: flex;
}
input::placeholder {
        color: #808080;
    }

      

        
/* PageBlock Animation System */
/* Base Animation Keyframes */
@keyframes pageblock-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes pageblock-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}
@keyframes pageblock-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}
@keyframes pageblock-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes pageblock-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.5; }
}
@keyframes pageblock-tada {
    0% { transform: scale(1) rotate(0); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes pageblock-heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}
@keyframes pageblock-swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
@keyframes pageblock-rubber {
    0% { transform: scale(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    60% { transform: scaleX(1.15) scaleY(0.85); }
    100% { transform: scale(1); }
}
/* Add the rotate keyframe to our animation system */
@keyframes pageblock-rotate {
    0% { transform: rotate(0); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(180deg); }
}
@keyframes pageblock-rotate-360 {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}
  @keyframes pageblock-pulsate {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
/* Add it to our pb-animate attributes */
[pb-animate="rotate"] {
    animation: pageblock-rotate 2.5s ease-in-out infinite forwards;
}
/* Add a continuous rotation variant */
[pb-animate="rotate-360"] {
    animation: pageblock-rotate-360 2s linear infinite;
}
/* Animation Attributes */
[pb-animate="pulse"] {
    animation: pageblock-pulse 1s ease infinite;
}
[pb-animate="shake"] {
    animation: pageblock-shake 0.8s ease-in-out;
}
[pb-animate="wiggle"] {
    animation: pageblock-wiggle 0.8s ease-in-out;
}
[pb-animate="bounce"] {
    animation: pageblock-bounce 1s ease infinite;
}
[pb-animate="flash"] {
    animation: pageblock-flash 1s ease infinite;
}
[pb-animate="tada"] {
    animation: pageblock-tada 1s ease;
}
[pb-animate="heartbeat"] {
    animation: pageblock-heartbeat 1.5s ease infinite;
}
[pb-animate="swing"] {
    transform-origin: top center;
    animation: pageblock-swing 1s ease;
}
[pb-animate="rubber"] {
    animation: pageblock-rubber 0.8s ease;
}
/* Animation Modifiers */
[pb-animate-count="once"] {
    animation-iteration-count: 1;
}
[pb-animate-count="infinite"] {
    animation-iteration-count: infinite;
}
[pb-animate-speed="fast"] {
    animation-duration: 0.5s;
}
[pb-animate-speed="slow"] {
    animation-duration: 2s;
}
[pb-animate-state="pause"] {
    animation-play-state: paused;
}
[pb-animate="pulsate"] {
	animation: pageblock-pulsate 1s ease-out infinite
  }

      

        
.swiper,
swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;  /* This is the key overflow property */
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

      

        
[pb-accordion-element="content"] {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  display: none;
  /* Faster transitions */
  transition: 
    max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.15s ease-out,
    visibility 0s linear 0.2s;
  /* Optimize rendering */
  will-change: max-height, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
[pb-accordion-element="content"].is-active-accordion {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: 
    max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.15s ease-out,
    visibility 0s linear 0s;
}
[pb-accordion-element="arrow"] {
  transition: transform 0.15s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(0, 0, 0);
}
[pb-accordion-element="arrow"].is-active-accordion {
  transform: rotate(180deg) translate3d(0, 0, 0);
}
[pb-accordion-element="plus"] {
  display: flex;
  align-items: center;
  justify-content: center;
}
[pb-accordion-element="plus"] svg {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate3d(0, 0, 0);
}
[pb-accordion-element="plus"] .vertical {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
[pb-accordion-element="plus"].is-active-accordion .vertical {
  transform: scaleY(0);
}
[pb-accordion-element="plus"]:hover {
  opacity: 0.8;
}
[pb-accordion-element="trigger"]:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}
[pb-accordion-element="trigger"]:focus:not(:focus-visible) {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  [pb-accordion-element="content"],
  [pb-accordion-element="arrow"],
  [pb-accordion-element="plus"] svg,
  [pb-accordion-element="plus"] .vertical {
    transition: none;
  }
}

        
.diagonal-strike {
  position: relative;
  display: inline-block;
}
.diagonal-strike::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid currentColor;
  transform: rotate(-10deg);
  transform-origin: center;
}

      

        
/* PLYR VIDEO MODAL REVIEWS */
html {
  --plyr-color-main: white;
  --plyr-tab-focus-color: transparent;
  --plyr-video-control-color-hover: black;
  --plyr-control-icon-size: 1.5em;
  --plyr-range-thumb-height: 0px;
  --plyr-range-track-height: 0.6em;
}
.plyr__control--overlaid {
  color: black;
}
.plyr__volume {
  width: auto;
  min-width: auto;
  max-width: auto;
}
.plyr {
  width: 100%;
  height: 100%;
}
.plyr video {
  object-fit: cover;
}
.contain-video video {
  object-fit: contain;
}
.hide-cover .plyr_cover {
  opacity: 0;
  pointer-events: none;
}
.hide-cover .plyr_cover-img {
  transform: scale(1.4);
}
.plyr-modal {
aspect-ratio: 2 / 3;
}
.video-container {
aspect-ratio: 2 / 3;
}
.plyr-modal video {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
@keyframes swipeUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.plyr-modal.is-active {
  animation: swipeUp 0.5s ease-in-out;
}
.video-modal {
pointer-events:none;
}
.video-modal.is-active {
pointer-events:all;
z-index: 999999999999;
}
.plyr_component {
aspect-ratio: 2 / 3;
}
.video-modal {
    z-index: 999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
}
.video-modal.is-active {
    display: flex !important;
    z-index: 999999 !important;
}
#plyr_video {
    z-index: 1000000 !important;
    position: relative !important;
}
/* Ensure Plyr controls are also above everything */
.plyr {
    z-index: 1000001 !important;
}
.plyr__controls {
    z-index: 1000002 !important;
}
.plyr--fullscreen-enabled {
    z-index: 1000003 !important;
}
/* Override any potential conflicting styles */
.video-modal * {
    z-index: inherit !important;
}

      

        
      html:not(.next-display-ready) [data-next-await] {
        position: relative;
        overflow: hidden;
        border-color: transparent !important;
        box-shadow: none !important;
      }
      [data-next-await] * {
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      [data-next-await]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e0e0e0;
        animation: pulse-gray 1.5s ease-in-out infinite;
        z-index: 1;
        pointer-events: none;
      }
      @keyframes pulse-gray {
        0%,
        100% {
          background-color: #e0e0e0;
          opacity: 0.6;
        }
        50% {
          background-color: #f5f5f5;
          opacity: 0.8;
        }
      }
      html.next-display-ready [data-next-await] * {
        opacity: 1;
      }
      html.next-display-ready [data-next-await]::before {
        display: none;
      }
  /* ===========================
     10. SKELETON LOADING
  =========================== */
  /* Base skeleton */
  .skeleton {
    background: #e9ecef;
    background-image: linear-gradient(
      90deg,
      #e9ecef 0px,
      #f4f6f8 40px,
      #e9ecef 80px
    );
    background-size: 200% 100%;
    border-radius: 4px;
    line-height: 1;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  .skeleton--static {
    animation: none;
    background-image: none;
  }
  /* Skeleton shapes */
  .skeleton-text {
    height: 1em;
    width: 100%;
    margin-bottom: 0.25em;
  }
  .skeleton-text--short { width: 10ch; }
  .skeleton-text--medium { width: 20ch; }
  .skeleton-text--long { width: 40ch; }
  .skeleton-text--full { width: 100%; }
  /* Height modifiers */
  .skeleton--xs { height: 0.75em; }
  .skeleton--sm { height: 0.875em; }
  .skeleton--lg { height: 1.25em; }
  .skeleton--xl { height: 1.5em; }
  .skeleton--2xl { height: 2em; }
  /* Avatar shapes */
  .skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .skeleton-avatar--sm { width: 32px; height: 32px; }
  .skeleton-avatar--lg { width: 48px; height: 48px; }
  .skeleton-avatar--xl { width: 64px; height: 64px; }
  .skeleton-avatar--square { border-radius: 8px; }
  /* Box shapes */
  .skeleton-box {
    width: 100%;
    height: 200px;
  }
  .skeleton-box--square { aspect-ratio: 1; height: auto; }
  .skeleton-box--video { aspect-ratio: 16/9; height: auto; }
  .skeleton-box--thumb { width: 80px; height: 80px; }
  /* Button shapes */
  .skeleton-button {
    height: 2.5rem;
    width: 100px;
    border-radius: 6px;
  }
  .skeleton-button--sm { height: 2rem; width: 80px; }
  .skeleton-button--lg { height: 3rem; width: 120px; }
  .skeleton-button--pill { border-radius: 9999px; }
  /* Skeleton utilities */
  .skeleton--mb-1 { margin-bottom: 0.25rem; }
  .skeleton--mb-2 { margin-bottom: 0.5rem; }
  .skeleton--mb-3 { margin-bottom: 0.75rem; }
  .skeleton--mb-4 { margin-bottom: 1rem; }
  .skeleton--rounded-none { border-radius: 0; }
  .skeleton--rounded-sm { border-radius: 2px; }
  .skeleton--rounded { border-radius: 4px; }
  .skeleton--rounded-lg { border-radius: 8px; }
  .skeleton--rounded-xl { border-radius: 12px; }
  .skeleton--rounded-full { border-radius: 9999px; }
  /* Skeleton variants */
  .skeleton--darker {
    background: #d5d7db;
    background-image: linear-gradient(
      90deg,
      #d5d7db 0px,
      #e5e7eb 40px,
      #d5d7db 80px
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  .skeleton--dark {
    background: #374151;
    background-image: linear-gradient(
      90deg,
      #374151 0px,
      #4b5563 40px,
      #374151 80px
    );
  }
  .skeleton--pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background-image: none;
  }
  .skeleton--wave {
    background-image: linear-gradient(
      90deg,
      #e9ecef 25%,
      #f4f6f8 50%,
      #e9ecef 75%
    );
    background-size: 400% 100%;
    animation: wave 2s ease infinite;
  }
  .skeleton--smooth {
    background-image: linear-gradient(
      105deg,
      #e9ecef 40%,
      #f4f6f8 50%,
      #e9ecef 60%
    );
    background-size: 200% 100%;
    animation: smooth 1.8s ease-in-out infinite;
  }
  /* Skeleton state management */
  [data-next-skeleton] {
    transition: opacity 0.3s ease-out;
  }
  .next-display-ready [data-next-skeleton] {
    opacity: 0;
    pointer-events: none;
  }
 /* ===========================
     2. BUTTON STATES & PROCESSING
  =========================== */
  /* Disabled state */
  .next-disabled {
    opacity: 0.5;
    cursor: not-allowed;
	pointer-events: none;
  }
  /* Base button processing state */
  .next-processing {
    opacity: 0.7;
    pointer-events: none;
  }
  /* Processing state content */
  .next-processing [next-slot="content"] {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .next-processing [next-slot="spinner"] {
    opacity: 1;
  }
  /* Buttons need relative positioning */
  [data-action="submit"] {
    position: relative;
  }
  /* Universal spinner wrapper */
  [next-slot="spinner"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.2s ease;
  }
  /* Universal spinner */
  .spinner {
    width: 100%;
    height: 100%;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  /* Spinner color variants */
  .cc-light .spinner {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #000000;
  }
  .cc-dark .spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
  }
@keyframes spin {
    to { transform: rotate(360deg); }
  }
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  @keyframes wave {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @keyframes smooth {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
    
      

        
/* ========================================
   SWITCH TOGGLE COMPONENTS - PARENT CLASS VERSION
======================================== */
/* Switch Base Styles */
.os-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}
.os-switch input {
    display: none; /* Hide the input completely */
}
/* Switch Slider */
.os-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border: 0.5px solid gray;
    transition: .3s;
    border-radius: 24px;
}
.os-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #586280;
    transition: .3s;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}
/* Switch Active State - Using parent class */
[data-next-bump][class*="next-active"] .os-slider {
    background-color: transparent;
    border-color: #586280;
}
[data-next-bump][class*="next-active"] .os-slider:before {
    transform: translateY(-50%) translateX(20px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5L20 7' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Switch Size Variants */
.os-switch.small {
    width: 36px;
    height: 20px;
}
.os-switch.small .os-slider:before {
    height: 12px;
    width: 12px;
    left: 4px;
    background-size: 8px 8px;
}
[data-next-bump][class*="next-active"] .os-switch.small .os-slider:before {
    transform: translateY(-50%) translateX(16px);
}
.os-switch.xs {
    width: 28px;
    height: 16px;
}
.os-switch.xs .os-slider:before {
    height: 10px;
    width: 10px;
    left: 3px;
    background-size: 6px 6px;
}
[data-next-bump][class*="next-active"] .os-switch.xs .os-slider:before {
    transform: translateY(-50%) translateX(12px);
}
/* ========================================
   FILL UTILITY CLASS
======================================== */
/* When active-fill is added, the switch gets a filled background */
[data-next-bump][class*="next-active"] .os-switch.active-fill .os-slider {
    background-color: #ff30cc;
    border-color: #ff30cc;
}
[data-next-bump][class*="next-active"] .os-switch.active-fill .os-slider:before {
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l5 5L20 7' stroke='%23ff30cc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Hide tooltip when parent has active class */
[data-next-bump][class*="next-active"] .os-tooltip {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px) scale(0.95);
}
/* Mobile optimizations */
@media screen and (max-width: 426px) {
    .os-switch {
        width: 36px;
        height: 20px;
    }
    .os-slider:before {
        height: 12px;
        width: 12px;
        background-size: 8px 8px;
    }
    [data-next-bump][class*="next-active"] .os-slider:before {
        transform: translateY(-50%) translateX(16px) !important;
    }
}
button.next-processing [data-pb-element="checkout-button-info"] {
  display: none;
}
button.next-processing [data-pb-element="checkout-button-spinner"] {
  display: flex;
}