body{background-color: #fff !important;}
body,a,p,h1,h2,h3,h4,h5,h6,span,b{
font-family: 'Albert Sans', sans-serif !important;
}
.fw-5{font-weight: 500 !important;}
.bg-black{background-color: black;}
.font-size19{font-size: 19px;}
.font-size14{font-size: 14px;}
.font-weight-500{font-weight: 500 !important;}

.white-line::after {
    content: '';
    display: inline-block;
    width: 25px;
    height: 2px;
    background-color: white;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.bg-black {
    overflow: hidden;
    position: relative;
}
.overlay-content:hover {
    background-color: #79e074;
}

.slidertext {
    white-space: nowrap;
    animation: slideRightToLeft 24s linear infinite;
  
}


@keyframes slideRightToLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes fadeInOut {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}
/* #preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
} */
.text-menu{color: #5d6374 !important}
.bg-orange{background-color: #ff5c39 !important; color: white;}
.pt-55{padding-top: 55px;}
.round-14{border-radius: 14px;}
/* #preloader img {
    width: 450px;
    animation: pulse 1s ease-in-out infinite;
   
} */

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
    }
}


.btn-light {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease !important; 
}


.btn-light::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%; 
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 50%;
    transition: all 0.5s ease;
    z-index: -1; 
    opacity: 0; 
}

.btn-light:hover::before {
    left: 0; 
    opacity: 1; 
}
.gshop-hero-slider-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 10px !important; 
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 5;
}

.hl-slider-btn-prev:hover i,
.hl-slider-btn-next:hover i {
    color: white !important;
}
.border1{border: 1px solid black;}
.collection {
    position: relative;
    height: 400px; 
}
@media screen and (max-width: 767px) {
    .collection {
        height: auto;
    }
}


.card-link {
    display: block;
}

.feature-image-overlay {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 10px !important;
}

.feature-image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-link:hover img {
    transform: scale(1.1); 
       
}
.botm-text * {
    color: white !important;
}
.overlay-content {
    position: absolute;
    bottom: 30px; 
    left: 0;
    width: auto;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 15px;
}
@media (min-width: 1300px) {
    .overlay-content {
        top: 290px !important;
        height: 60px;
    }
}

.card-title {
    margin: 0;
}
.pt-115{padding-top: 115px;}
.pt-110{padding-top: 110px;}
.pt-105{padding-top: 105px;}
.pt-100{padding-top: 100px;}
.p-120{padding:120px}
.mt-100{margin-top: 100px !important;}

.bg-light-blue{background-color: #F1F4F9 !important;}
.bg-light-orange{background-color: #FFF7DF !important;}
.bold-collection .image-container {
    position: relative;
}

.bold-collection .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bold-collection:hover .overlay {
    opacity: 1;
}

.border-top-left-radius-12 {
    border-top-left-radius: 12px;
}
.border-top-right-radius-12 {
    border-top-right-radius: 12px;
}
.border-bottom-left-radius-12 {
    border-bottom-left-radius: 12px;
}
.border-bottom-right-radius-12{
    border-bottom-right-radius: 12px;
}

.offer-product-slider .hover-image {
    display: none;
}

.offer-product-slider .thumbnail:hover .hover-image {
    display: inline-block;
    /* transform: scale(0.9);
    transition: transform 0.3s ease;  */
}

.offer-product-slider .thumbnail:hover .original-image {
    display: none;
}
.footer-nav li a{color:white !important}
.offer-product-slider .thumbnail {
    position: relative;
    text-align: center;
    width: 100%;
}
/* .btn-success{background-color: #93F859 !important;border-color: #93F859 !important;}
.btn-success:hover{background-color: #84dd50 !important;border-color: #84dd50 !important; color:white} */
.horizontal-product-card .card-content .title:hover{color:#3AAB33}
.widget-nav li a:hover{color:#3AAB33}
.sidebar-posts li .blog-title:hover{color:#3AAB33}
.btn-success{ color:white}
.btn-success:hover{ color:white}
.btn-outline-success:hover{ color:white}
.offer-product-slider .image-container {
    position: relative;
    display: inline-block;
    padding: 0px !important;
}
@media screen and (max-width: 768px) {
    /* Adjust height and overflow for smaller screens */
    .p_img {
      height: 150px; /* Adjust the height for mobile screens */
      overflow: hidden;
    }
  }
  
  @media screen and (min-width: 769px) {
    /* Set height and overflow for desktop screens */
    .p_img {
      height: 250px;
      overflow: hidden;
    }
  }
  

.offer-product-slider .product-btns-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.offer-product-slider .product-btns {
    display: flex;
}
.square{border-radius: 4px !important;}
.border2{border: 1px solid rgb(134 134 134); }
.round-10{border-radius: 10px !important;}

@media (max-width: 576px) {
    .psm-20 {
        padding: 20px !important;
    }
}
@media (min-width: 992px) {
    .custom-padding {
        padding-left: 60px;
        padding-right: 60px;
    }
}



@font-face {
    font-family: 'unicons';
    src: url(data:font/truetype;base64,[BASE64_ENCODED_FONT_DATA]) format('truetype');
}
.blok:nth-of-type(odd) {
    background-color: white;
}

.blok:nth-of-type(even) {
    background-color: black;
}

@-webkit-keyframes border-transform {

    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}

.paginacontainer {
    /* height: 3000px; */
}

/* #Progress
================================================== */

.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    content: '\f106';
    font-family: "Font Awesome 5 Free";
    font-weight: 550;
    text-align: center;
    line-height: 46px;
    font-size: 24px;
    color: #000;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap:hover::after {
    opacity: 0;
}

.progress-wrap::before {
    position: absolute;
    content: '\f106'; 
    font-family: "Font Awesome 5 Free";
    font-weight: 550;
    text-align: center;
    line-height: 46px;
    font-size: 24px;
    opacity: 0;
    background: black;
    /* --- Pijl hover kleur --- */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap:hover::before {
    opacity: 1;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: #000;
    /* --- Lijn progres kleur --- */
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ptb-80{padding:80px 0}
.ptb-50{padding:50px 0}



/* .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-right-radius:0;border-bottom-right-radius:0} */
.toolbar-icon {
    position: relative;
    display: inline-block;
}

.toolbar-icon .badge {
    position: absolute;
    top: -7px;
    right: -15px;
    background-color: #007bff;
    color: #fff;
    border-radius: 50%;
    padding: 4px;
    line-height: 1;
    min-width: 20px;
    text-align: center;
}
.bg-trans {
    background-color: rgba(255, 255, 255, 0.8); /* Adjust the alpha value (0.6) to make it slightly transparent */
}
.head-cart-button {
    background-color: #CCCCCC !important; 
    color: black !important;
}
.head-cart-button:hover {
    background-color: #AAAAAA !important;
}
.search-form input[type="text"]::placeholder {
    color: black !important;
}

/* marquee */
.main-container__marquee {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    font-family: "Merriweather", serif;
    text-transform: uppercase;
    font-size: 14px;
    color: #000;
    background-color: #fdf2e9;
    padding:10px
}

.main-container__marquee-track {
    display: flex;
    gap: 20px;
    white-space: nowrap;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
}

.main-container__marquee-items {
    flex-shrink: 0;
    display: flex;
    gap: 20px;
    justify-content: space-around;
    min-width: 100%;
    animation: marquee 20s linear infinite;
    
}

.main-container__marquee-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    width: auto;
    transition: all 0.1s ease-in-out;
    font-weight: bold;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}










/* shopify css */


.nxt-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.nxt-main a {
    text-decoration: none;
}

.nxt-splash-main {
    width: 100%;
    position: relative;
    height: calc(100vh - 120px);
}

.nxt-splash-section {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(https://cdn.shopify.com/s/files/1/0553/6186/3762/files/website_bg.png?v=1702391126);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #fff;
    display: flex;
    width: 100%;
}

.splash-title {
    font-family: Montserrat;
    color: #343434;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -1.152px;
    display: flex;
}

.splash-space-filler {
    width: 100%;
    display: flex;
    z-index: 2;
}

.splash-content {
    position: absolute;
    width: fit-content;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    left: 30%;
    transform: translateX(-50%);
    top: 36vh;
    z-index: 1;
}

.splash-button-container {
    display: flex;
    position: absolute;
    left: calc(30% - 180px);
    top: calc(36vh + 115px);
    transform: translateX(-50%);
    z-index: 2;
}
.btn-secondary{background-color: #E6E5EA !important;}
.splash-button {
    border: none;
    outline: none;
    width: 116px;
    height: 37px;
    border-radius: 26px;
    background: #000;
    box-shadow: 0px 27px 11px -20px rgba(30, 30, 30, 0.17);
    color: #fff;
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: -0.384px;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  border: 0;
  border-radius: .25em;
  background: initial;
  background-color: #7cd1f9 !important;
  color: #fff !important;
  font-size: 1em;
}
.splash-button:hover {
    cursor: pointer;
    background-color: #313131;
}

/* HOW TO SECTION */

.how-to-cards-main {
    margin-top: 115px;
    display: flex;
    width: 100%;
    justify-content: center;
}

.how-to-cards-container {
    width: 1140px;
    display: flex;
    gap: 36px;
}

.how-to-card {
    width: 355px;
    height: 403px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.activate-card {
    background: #1F1F1F;
}

.profile-card {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08), 0px 0px 10px 0px #FFF inset;
}

.how-to-card-title {
    font-family: Poppins;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 125.5%;
    letter-spacing: -0.96px;
}

.how-to-card-desc {
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125.5%;
    letter-spacing: -0.384px;
    width: 240px;
    margin-top: 10px;
}

.how-to-card-info {
    margin-top: 30px;
    margin-left: 33px;
    margin-right: 33px;
}

.activate-card .how-to-card-title {
    background: linear-gradient(91deg, #CCCFFF 3.3%, #8884FF 63.46%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.activate-card .how-to-card-desc {
    color: #fff;
}

.share-card {
    background: linear-gradient(200deg, #F4F2FF 3.7%, #C9BDFF 87.8%);
}


/* PRODUCT CALLOUT */

.product-callout-main {
    margin-top: 85px;
    display: flex;
    width: 100%;
    justify-content: center;
}

.product-callout-container {
    width: 1140px;
    height: 415px;
    border-radius: 25px;
    background: #F5F4F4;
    position: relative;
}

.product-callout-container img {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.product-callout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 95px;
    padding-top: 100px;
    padding-bottom: 100px;
    width: fit-content;
    height: 100%;
    justify-content: space-between;
}

.product-callout-content div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-callout-cta {
    width: 138px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    border: none;
    border-radius: 26px;
    background: linear-gradient(92deg, #646AFE 5.5%, #943EFF 96.64%);
    box-shadow: 0px 27px 11px -20px rgba(30, 30, 30, 0.17);

    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 20px */
    letter-spacing: -0.48px;
    justify-self: flex-end;
}

.product-callout-cta:hover {
    cursor: pointer;
    opacity: 0.9;
}

.product-callout-cta svg {
    height: 15px;
    width: 8px;
}

.product-callout-desc {
    color: #6E6E6E;
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 125.5%;
    /* 25.1px */
    letter-spacing: -0.48px;
    margin-top: 17px;
    margin-bottom: 17px;
}

.product-callout-price {
    color: #494949;
    text-align: center;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 125.5%;
    /* 18.825px */
    letter-spacing: -0.36px;
}

/* FEATURES SECTION */

.features-main {
    margin-top: 85px;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.features-row {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
}

.features-card {
    border-radius: 25px;
    padding-left: 50px;
    padding-top: 50px;
    position: relative;
    overflow: hidden;
}

.features-small-card {
    width: 412px;
    height: 412px;
}

.features-medium-card {
    width: 703px;
    height: 412px;
}

.lasts-forever-card {
    background: #000;
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.15);
}

.compatibility-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #F5F4F4;
}

.save-contact-card {
    background: linear-gradient(116deg, #BF6BFF 1.25%, #5E82F0 81.69%);
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.15);
}

.profile-feature-card {
    background: linear-gradient(151deg, #0B56FF 4.78%, #52AFFF 93.59%);
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.15);
}

.lasts-forever-card img {
    position: absolute;
    bottom: 0;
    left: 45px;
}

.features-title {
    color: #FFF;
    font-family: Poppins;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 40px */
    letter-spacing: -0.96px;
}

.features-desc {
    margin-top: 16px;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 125.5%;
    /* 25.1px */
    letter-spacing: -0.48px;
}

.features-small-card .features-desc {
    color: #C5C5C5;
    margin-right: 40px;
}

.compatibility-card .features-title {
    background: linear-gradient(271deg, #9340FF 5.73%, #40A7FF 96.93%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.save-contact-card .features-desc {
    color: #fff;
    width: 286px;
}

.compatibility-card .features-desc {
    color: #1E1E1E;
    margin-right: 40px;
}

.profile-feature-card .features-desc {
    color: #fff;
    display: flex;
    align-items: center;
}

.compatibility-card svg {
    position: absolute;
    bottom: 26px;
    right: 43px;
}

.save-contact-card img {
    position: absolute;
    top: 0;
    right: 0;
}

.profile-feature-card img {
    position: absolute;
    bottom: 0;
    right: 0;
}

.profile-feature-card svg path {
    fill: #fff;
}

.profile-feature-card svg {
    width: 75px;
    margin-left: 6px;
    margin-bottom: 3px;
    margin-right: 3px;
}

.profile-feature-item {
    color: #fff;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 125.5%;
    /* 25.1px */
    letter-spacing: -0.48px;
    margin-top: 5px;
}

.nxt-splash-section {
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
}

.nxt-splash-section::-webkit-scrollbar {
    display: none;
    /* Hide the scrollbar */
}

.scroll-test {
    position: absolute;
    height: calc(100% + 250px);
    width: 100%;
    z-index: 2;
    overflow-y: hidden;
}

.scroll-test svg {
    position: absolute;
    top: 375px;
    right: 30%;
    transform: translateX(50%);
    z-index: 3;
    opacity: 0;
}

.scroll-test img {
    position: absolute;
    top: 450px;
    z-index: 2;
    right: 30%;
    transform: translateX(59.9%);
}

.splash-card {
    position: absolute;
    right: 30%;
    transform: translateX(50%);
    top: 50px;
    z-index: 1;
}

.card-nfc-signal {
    position: absolute;
    right: 30%;
    transform: translateX(50%);
    top: 50px;
    z-index: 1;
    padding-left: 440px;
    padding-top: 90px;
    opacity: 0;
}

.card-nfc-signal svg {
    transform: rotate(90deg);
}

.ankit-phone {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.show-ankit {
    opacity: 100;
}

/* SCROLLER */

.scroller {
    max-width: 1140px;
    overflow: scroll;
    -webkit-mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
    mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
}

.scroller::-webkit-scrollbar {
    display: none;
}

.scroller__inner {
    padding: 20px 0;
    gap: 20px;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: scroll 200s linear infinite;
}

.second-scroller,
.third-scroller {
    padding-top: 0;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 10px));
    }
}

.review-container {
    width: 232px;
    height: 132px;
    display: flex;
    background-color: #fff;
    border: 1px solid #ECECEC;
    padding: 15px;
    padding-right: 12px;
    border-radius: 10px;
    flex-direction: column;
    box-shadow: rgba(13, 38, 76, 0.05) 0px 6px 9px;
}

.second-scroller .review-container {
    transform: translateX(-122px);
}


.review-top-row {
    display: flex;
}

.review-image {
    height: 40px;
    width: 40px;
    color: #fff;
    border-radius: 50%;
    background-color: #1d4fb1;
    /* opacity: 0.8; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    font-size: 16px;
    padding-top: 1px;
}

.review-name-container {
    display: flex;
    flex-direction: column;
}

.review-name {
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 125.5%;
    /* 18.825px */
    letter-spacing: -0.36px;
    color: #1E1E1E;
    margin-top: 2px;
}

.review-rating {
    display: flex;
    margin-top: 2px;
    gap: 1px;
}

.review-text {
    margin-top: 12px;
    height: 50px;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 16px;
}

.reviews-header {
    margin-top: 75px;
    width: 1140px;
    font-size: 40px;
    font-weight: 700;
    font-family: Poppins;
    line-height: 1.05;
    margin-bottom: 20px;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0.7;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0.7;
    }
}

.blink {
    animation: blink 0.4s linear 1;
}

.hide-signal {
    display: none;
}

@media screen and (max-width: 751px) {
    .nxt-main {
        display: none;
    }
}


/* footer */
.footer {
    border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
  
  .footer:not(.color-background-1) {
    border-top: none;
  }
  
  .footer__content-top {
    padding-bottom: 5rem;
    display: block;
  }
  
  @media screen and (max-width: 749px) {
    .footer .grid {
      display: block;
    }
  
    .footer-block.grid__item {
      padding: 0;
      margin: 4rem 0;
      width: 100%;
    }
  
    .footer-block.grid__item:first-child {
      margin-top: 0;
    }
  
    .footer__content-top {
      padding-bottom: 3rem;
      padding-left: calc(4rem / var(--font-body-scale));
      padding-right: calc(4rem / var(--font-body-scale));
    }
  }
  
  @media screen and (min-width: 750px) {
    .footer__content-top .grid {
      row-gap: 6rem;
      margin-bottom: 0;
    }
  }
  
  .footer__content-bottom {
    border-top: solid 0.1rem rgba(var(--color-foreground), 0.08);
    padding-top: 3rem;
  }
  
  .footer__content-bottom:only-child {
    border-top: 0;
  }
  
  .footer__content-bottom-wrapper {
    display: flex;
    width: 100%;
  }
  
  @media screen and (max-width: 749px) {
    .footer__content-bottom {
      flex-wrap: wrap;
      padding-top: 0;
      padding-left: 0;
      padding-right: 0;
      row-gap: 1.5rem;
    }
  
    .footer__content-bottom-wrapper {
      flex-wrap: wrap;
      row-gap: 1.5rem;
      justify-content: center;
    }
  }
  
  .footer__localization:empty + .footer__column--info {
    align-items: center;
  }
  
  @media screen and (max-width: 749px) {
    .footer__localization:empty + .footer__column {
      padding-top: 1.5rem;
    }
  }
  
  .footer__column {
    width: 100%;
    align-items: flex-end;
  }
  
  .footer__column--info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  @media screen and (min-width: 750px) {
    .footer__column--info {
      padding-left: 0;
      padding-right: 0;
      align-items: flex-end;
    }
  }
  
  .footer-block:only-child:last-child {
    text-align: center;
    max-width: 76rem;
    margin: 0 auto;
  }
  
  @media screen and (min-width: 750px) {
    .footer-block {
      display: block;
      margin-top: 0;
    }
  }
  
  .footer-block:empty {
    display: none;
  }
  
  .footer-block--newsletter {
    display: flex;
    align-items: flex-end;
    margin-top: 3rem;
    gap: 1rem;
  }
  
  .footer-block--newsletter:only-child {
    margin-top: 0;
  }
  
  @media screen and (max-width: 749px) {
    .footer-block.footer-block--menu:only-child {
      text-align: left;
    }
  }
  
  @media screen and (min-width: 750px) {
    .footer-block--newsletter {
      flex-wrap: nowrap;
      justify-content: center;
    }
  }
  
  .footer-block__heading {
    margin-bottom: 2rem;
    margin-top: 0;
    font-size: calc(var(--font-heading-scale) * 1.6rem);
  }
  
  @media screen and (min-width: 990px) {
    .footer-block__heading {
      font-size: calc(var(--font-heading-scale) * 1.8rem);
    }
  }
  
  .footer__list-social:empty,
  .footer-block--newsletter:empty {
    display: none;
  }
  
  .footer__follow-on-shop {
    display: flex;
    text-align: center;
  }
  
  .footer__list-social.list-social:only-child {
    justify-content: center;
  }
  
  .footer-block__newsletter {
    text-align: center;
    flex-grow: 1;
  }
  
  .newsletter-form__field-wrapper {
    max-width: 36rem;
  }
  
  @media screen and (min-width: 750px) {
    /* Pushes other components to the right of the flexbox */
    .footer-block__newsletter:not(:only-child) {
      text-align: left;
      margin-right: auto;
    }
  
    .footer-block__newsletter:not(:only-child) .footer__newsletter {
      justify-content: flex-start;
      margin: 0;
    }
  
    .footer-block__newsletter:not(:only-child) .newsletter-form__message--success {
      left: auto;
    }
  
    .footer__follow-on-shop {
      margin-bottom: 0.4rem;
    }
    /* Follow on shop is the first button but it has siblings*/
    .footer__follow-on-shop:first-child:not(:last-child) {
      justify-content: flex-start;
      margin-right: auto;
      text-align: left;
    }
  
    /*
      All three components are present, email, Follow on Shop, and social icons.
      Moves the FoS button next to the social icons so they appear grouped together
    */
    .footer__follow-on-shop:not(:first-child):not(:last-child) {
      justify-content: flex-end;
      text-align: right;
    }
  }
  
  @media screen and (max-width: 749px) {
    /*
      On a small screen we want all the items to be centered
      because they will be stacked.
     */
    .footer-block--newsletter {
      display: flex;
      flex-direction: column;
      flex: 1 1 100%;
      align-items: center;
      gap: 3rem;
    }
  
    .footer__list-social.list-social,
    .footer__follow-on-shop,
    .footer-block__newsletter {
      display: flex;
      justify-content: center;
    }
  
    .footer-block__newsletter {
      flex-direction: column;
    }
  }
  
  @media screen and (min-width: 750px) {
    .footer-block__newsletter + .footer__list-social {
      margin-top: 0;
    }
  }
  
  .footer__localization {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    padding: 1rem 1rem 0;
  }
  
  .footer__localization:empty {
    display: none;
  }
  
  .footer__localization h2 {
    margin: 1rem 1rem 0.5rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  
  @media screen and (min-width: 750px) {
    .footer__localization {
      padding: 0.4rem 0;
      justify-content: flex-start;
    }
  
    .footer__localization h2 {
      margin: 1rem 0 0;
    }
  }
  
  @media screen and (max-width: 989px) {
    .footer__localization noscript {
      width: 100%;
    }
  }
  
  @media screen and (min-width: 750px) {
    .footer__payment {
      margin-top: 1.5rem;
    }
  }
  
  .footer__content-bottom-wrapper--center {
    justify-content: center;
  }
  
  .footer__copyright {
    text-align: center;
    margin-top: 1.5rem;
  }
  
  @media screen and (min-width: 750px) {
    .footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center) .footer__copyright {
      text-align: right;
    }
  }
  
  @keyframes appear-down {
    0% {
      opacity: 0;
      margin-top: -1rem;
    }
    100% {
      opacity: 1;
      margin-top: 0;
    }
  }
  
  .footer-block__details-content {
    margin-bottom: 4rem;
  }
  
  @media screen and (min-width: 750px) {
    .footer-block__details-content {
      margin-bottom: 0;
    }
  
    .footer-block__details-content > p,
    .footer-block__details-content > li {
      padding: 0;
    }
  
    .footer-block:only-child li {
      display: inline;
    }
  
    .footer-block__details-content > li:not(:last-child) {
      margin-right: 1.5rem;
    }
  }
  
  .footer-block__details-content .list-menu__item--link,
  .copyright__content a {
    color: rgba(var(--color-foreground), 0.75);
  }
  
  .footer-block__details-content .list-menu__item--active {
    transition: text-decoration-thickness var(--duration-short) ease;
    color: rgb(var(--color-foreground));
  }
  
  @media screen and (min-width: 750px) {
    .footer-block__details-content .list-menu__item--link:hover,
    .copyright__content a:hover {
      color: rgb(var(--color-foreground));
      text-decoration: underline;
      text-underline-offset: 0.3rem;
    }
  
    .footer-block__details-content .list-menu__item--active:hover {
      text-decoration-thickness: 0.2rem;
    }
  }
  
  @media screen and (max-width: 989px) {
    .footer-block__details-content .list-menu__item--link {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  }
  
  @media screen and (min-width: 750px) {
    .footer-block__details-content .list-menu__item--link {
      display: inline-block;
      font-size: 1.4rem;
    }
  
    .footer-block__details-content > :first-child .list-menu__item--link {
      padding-top: 0;
    }
  }
  
  .footer-block-image {
    display: flex;
  }
  
  .footer-block-image.left {
    justify-content: flex-start;
  }
  
  .footer-block-image.center {
    justify-content: center;
  }
  
  .footer-block-image.right {
    justify-content: flex-end;
  }
  
  @media screen and (max-width: 749px) {
    .footer-block-image,
    .footer-block-image.left,
    .footer-block-image.center,
    .footer-block-image.right {
      justify-content: center;
    }
  }
  
  .footer-block__image-wrapper {
    margin-bottom: 2rem;
    overflow: hidden !important;
  }
  
  .footer-block__image-wrapper img {
    display: block;
    height: auto;
    max-width: 100%;
  }
  
  .footer-block__brand-info {
    text-align: left;
  }
  
  .footer-block:only-child .footer-block__brand-info {
    text-align: center;
  }
  
  .footer-block:only-child > .footer-block__brand-info > .footer-block__image-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
  
  .footer-block-image > img,
  .footer-block__brand-info > img {
    height: auto;
  }
  
  .footer-block:only-child .footer-block__brand-info .footer__list-social.list-social {
    justify-content: center;
  }
  
  .footer-block__brand-info .footer__list-social.list-social {
    justify-content: flex-start;
    margin-left: -1.3rem;
    margin-right: -1.3rem;
  }
  
  .footer-block__details-content .placeholder-svg {
    max-width: 20rem;
  }
  
  .copyright__content {
    font-size: 1.1rem;
  }
  
  .copyright__content a {
    color: currentColor;
    text-decoration: none;
  }
  
  .policies {
    display: inline;
  }
  
  .policies li {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  
  .policies li::before {
    content: '\00B7';
    padding: 0 0.8rem;
  }
  
  .policies li a {
    padding: 0.6rem 0;
    display: block;
  }
  
  @media screen and (min-width: 750px) {
    .policies li a {
      padding: 0;
    }
  }
  @keyframes animateLocalization {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
  
    100% {
      opacity: 1;
      transform: translateY(-1rem);
    }
  }
  
  /* check for flexbox gap in older Safari versions */
  @supports not (inset: 10px) {
    @media screen and (max-width: 749px) {
      .footer .grid {
        margin-left: 0;
      }
    }
  
    @media screen and (min-width: 750px) {
      .footer__content-top .grid {
        margin-left: -3rem;
      }
  
      .footer__content-top .grid__item {
        padding-left: 3rem;
      }
    }
  }




/* Style for input field */
.field__input {
    width: calc(100% - 40px); /* Adjusted width to accommodate the button */
    padding: 12px;
    border: 1px solid rgb(225, 225, 225);
    border-radius: 24px;
    font-size: 16px;
    background-color: transparent; /* Removed !important to avoid specificity issues */
    color: white; /* Set text color to white */
}

/* Style for button */
.field__button {
    width: 40px; /* Fixed width for the button */
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Positioning for input and button */
.input-with-button {
    display: flex;
    align-items: center;
    position: relative;
}

/* Adjustments for icon position */
.icon-arrow {
    width: 14px;
    height: auto;
    fill: #fff; /* Adjust arrow color */
}

/* Hover effect for button */
.field__button:hover .icon-arrow {
    fill: #fff; /* Adjust arrow color on hover */
}
.rounded-24{border-radius: 24px !important;}
.bg-dark{background-color: #020912 !important;}
.text-light{color: #F4F1F5}













/* product */


.product {
    margin: 0;
  }
  
  .product.grid {
    gap: 0;
  }
  
  .product--no-media {
    max-width: 57rem;
    margin: 0 auto;
  }
  
  .product__media-wrapper {
    padding-left: 0;
  }
  
  @media screen and (min-width: 750px) {
    .product__column-sticky {
      display: block;
      position: sticky;
      top: 3rem;
      z-index: 2;
    }
  
    .product--thumbnail .thumbnail-list {
      padding-right: var(--media-shadow-horizontal-offset);
    }
  
    .product__info-wrapper {
      padding: 0 0 0 5rem;
    }
  
    .product__info-wrapper--extra-padding {
      padding: 0 0 0 8rem;
    }
  
    .product--right .product__info-wrapper {
      padding: 0 5rem 0 0;
    }
  
    .product--right .product__info-wrapper--extra-padding {
      padding: 0 8rem 0 0;
    }
  
    .product--right .product__media-list {
      margin-bottom: 2rem;
    }
  
    .product__media-container .slider-buttons {
      display: none;
    }
  }
  
  @media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__media-wrapper {
      max-width: 65%;
      width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2);
    }
  
    .product--large:not(.product--no-media) .product__info-wrapper {
      padding: 0 0 0 4rem;
      max-width: 35%;
      width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
    }
  
    .product--large:not(.product--no-media).product--right .product__info-wrapper {
      padding: 0 4rem 0 0;
    }
  
    .product--medium:not(.product--no-media) .product__media-wrapper,
    .product--small:not(.product--no-media) .product__info-wrapper {
      max-width: 55%;
      width: calc(55% - var(--grid-desktop-horizontal-spacing) / 2);
    }
  
    .product--medium:not(.product--no-media) .product__info-wrapper,
    .product--small:not(.product--no-media) .product__media-wrapper {
      max-width: 45%;
      width: calc(45% - var(--grid-desktop-horizontal-spacing) / 2);
    }
  }
  
  /* Dynamic checkout */
  
  .shopify-payment-button__button {
    font-family: inherit;
    min-height: 4.6rem;
  }
  
  .shopify-payment-button__button [role='button'].focused,
  .no-js .shopify-payment-button__button [role='button']:focus {
    outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important;
    outline-offset: 0.3rem;
    box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
      0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important;
  }
  
  .shopify-payment-button__button [role='button']:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none !important;
  }
  
  .shopify-payment-button__button [role='button']:focus-visible {
    outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important;
    box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
      0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important;
  }
  
  .shopify-payment-button__button--unbranded {
    background-color: rgba(var(--color-button), var(--alpha-button-background));
    color: rgb(var(--color-button-text));
    font-size: 1.4rem;
    line-height: calc(1 + 0.2 / var(--font-body-scale));
    letter-spacing: 0.07rem;
  }
  
  .shopify-payment-button__button--unbranded::selection {
    background-color: rgba(var(--color-button-text), 0.3);
  }
  
  .shopify-payment-button__button--unbranded:hover,
  .shopify-payment-button__button--unbranded:hover:not([disabled]) {
    background-color: rgba(var(--color-button), var(--alpha-button-background));
  }
  
  .shopify-payment-button__more-options {
    margin: 1.6rem 0 1rem;
    font-size: 1.2rem;
    line-height: calc(1 + 0.5 / var(--font-body-scale));
    letter-spacing: 0.05rem;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
  
  .shopify-payment-button__button + .shopify-payment-button__button--hidden {
    display: none;
  }
  
  /* Product form */
  
  .product-form {
    display: block;
  }
  
  .product-form__error-message-wrapper:not([hidden]) {
    display: flex;
    align-items: flex-start;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  }
  
  .product-form__error-message-wrapper svg {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.7rem;
    margin-top: 0.5rem;
  }
  
  /* Form Elements */
  .product-form__input {
    flex: 0 0 100%;
    padding: 0;
    margin: 0 0 1.2rem 0;
    max-width: 44rem;
    min-width: fit-content;
    border: none;
  }
  
  variant-radios,
  variant-selects {
    display: block;
  }
  
  .product-form__input--dropdown {
    margin-bottom: 1.6rem;
  }
  
  .product-form__input .form__label {
    padding-left: 0;
  }
  
  fieldset.product-form__input .form__label {
    margin-bottom: 0.2rem;
  }
  
  .product-form__input input[type='radio'] {
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    position: absolute;
    height: 1px;
    width: 1px;
  }
  
  .product-form__input input[type='radio'] + label {
    border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
    background-color: rgb(var(--color-background));
    color: rgba(var(--color-foreground));
    border-radius: var(--variant-pills-radius);
    color: rgb(var(--color-foreground));
    display: inline-block;
    margin: 0.7rem 0.5rem 0.2rem 0;
    padding: 1rem 2rem;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    line-height: 1;
    text-align: center;
    transition: border var(--duration-short) ease;
    cursor: pointer;
    position: relative;
  }
  
  .product-form__input input[type='radio'] + label:before {
    content: '';
    position: absolute;
    top: calc(var(--variant-pills-border-width) * -1);
    right: calc(var(--variant-pills-border-width) * -1);
    bottom: calc(var(--variant-pills-border-width) * -1);
    left: calc(var(--variant-pills-border-width) * -1);
    z-index: -1;
    border-radius: var(--variant-pills-radius);
    box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset)
      var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
  }
  
  .product-form__input input[type='radio'] + label:hover {
    border-color: rgb(var(--color-foreground));
  }
  
  .product-form__input input[type='radio']:checked + label {
    background-color: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }
  
  .product-form__input input[type='radio']:not(.disabled) + label > .visually-hidden {
    display: none;
  }
  
  @media screen and (forced-colors: active) {
    .product-form__input input[type='radio']:checked + label {
      text-decoration: underline;
    }
  }
  
  .product-form__input input[type='radio']:checked + label::selection {
    background-color: rgba(var(--color-background), 0.3);
  }
  
  .product-form__input input[type='radio']:disabled + label,
  .product-form__input input[type='radio'].disabled + label {
    border-color: rgba(var(--color-foreground), 0.1);
    color: rgba(var(--color-foreground), 0.6);
    text-decoration: line-through;
  }
  
  .product-form__input input[type='radio'].disabled:checked + label,
  .product-form__input input[type='radio']:disabled:checked + label {
    color: rgba(var(--color-background), 0.6);
  }
  .product-form__input input[type='radio']:focus-visible + label {
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
  }
  
  /* Fallback */
  .product-form__input input[type='radio'].focused + label,
  .no-js .shopify-payment-button__button [role='button']:focus + label {
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
  }
  
  /* No outline when focus-visible is available in the browser */
  .no-js .product-form__input input[type='radio']:focus:not(:focus-visible) + label {
    box-shadow: none;
  }
  
  .product-form__input .select {
    max-width: 25rem;
  }
  
  .product-form__submit {
    margin-bottom: 1rem;
  }
  
  .no-js .product-form__submit.button--secondary {
    --color-button: inherit;
    --color-button-text: inherit;
    --alpha-button-background: 1;
  }
  
  .product-form__submit[aria-disabled='true'] + .shopify-payment-button .shopify-payment-button__button[disabled],
  .product-form__submit[disabled] + .shopify-payment-button .shopify-payment-button__button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  @media screen and (forced-colors: active) {
    .product-form__submit[aria-disabled='true'] {
      color: Window;
    }
  }
  
  /* Overrides */
  .shopify-payment-button__more-options {
    color: rgb(var(--color-foreground));
  }
  
  .shopify-payment-button__button {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
  }
  
  /* Product info */
  
  .product__info-container > * + * {
    margin: 1.5rem 0;
  }
  
  .product__info-container iframe {
    max-width: 100%;
  }
  
  .product__info-container .product-form,
  .product__info-container .product__description,
  .product__info-container .icon-with-text {
    margin: 2.5rem 0;
  }
  
  .product__text {
    margin-bottom: 0;
  }
  
  a.product__text {
    display: block;
    text-decoration: none;
    color: rgba(var(--color-foreground), 0.75);
  }
  
  .product__text.caption-with-letter-spacing {
    text-transform: uppercase;
  }
  
  .product__title {
    word-break: break-word;
    margin-bottom: 1.5rem;
  }
  
  .product__title > * {
    margin: 0;
  }
  
  .product__title > a {
    display: none;
  }
  
  .product__title + .product__text.caption-with-letter-spacing {
    margin-top: -1.5rem;
  }
  
  .product__text.caption-with-letter-spacing + .product__title {
    margin-top: 0;
  }
  
  .product__accordion .accordion__content {
    padding: 0 1rem;
  }
  
  .product .price .badge {
    margin-bottom: 0.5rem;
  }
  
  .product .price__container {
    margin-bottom: 0.5rem;
  }
  
  .product .price dl {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .product .price--sold-out .price__badge-sale {
    display: none;
  }
  
  @media screen and (min-width: 750px) {
    .product__info-container {
      max-width: 60rem;
    }
  
    .product__info-container .price--on-sale .price-item--regular {
      font-size: 1.6rem;
    }
  
    .product__info-container > *:first-child {
      margin-top: 0;
    }
  }
  
  .product__description-title {
    font-weight: 600;
  }
  
  .product--no-media .product__title,
  .product--no-media .product__text,
  .product--no-media noscript .product-form__input,
  .product--no-media .product__tax,
  .product--no-media .product__sku,
  .product--no-media shopify-payment-terms {
    text-align: center;
  }
  
  .product--no-media .product__media-wrapper,
  .product--no-media .product__info-wrapper {
    padding: 0;
  }
  
  .product__tax {
    margin-top: -1.4rem;
  }
  
  .product--no-media noscript .product-form__input,
  .product--no-media .share-button {
    max-width: 100%;
  }
  
  .product--no-media fieldset.product-form__input,
  .product--no-media .product-form__quantity,
  .product--no-media .product-form__input--dropdown,
  .product--no-media .share-button,
  .product--no-media .product__view-details,
  .product--no-media .product__pickup-availabilities,
  .product--no-media .product-form {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .product--no-media .product-form {
    flex-direction: column;
  }
  
  .product--no-media .product-form > .form {
    max-width: 30rem;
    width: 100%;
  }
  
  .product--no-media .product-form__quantity,
  .product--no-media .product-form__input--dropdown {
    flex-direction: column;
    max-width: 100%;
  }
  
  .product-form__quantity .form__label {
    margin-bottom: 0.6rem;
  }
  
  .price-per-item__label.form__label {
    margin-bottom: 0rem;
  }
  
  .product-form__quantity-top .form__label {
    margin-bottom: 1.2rem;
  }
  
  .product--no-media fieldset.product-form__input {
    flex-wrap: wrap;
    margin: 0 auto 1.2rem auto;
  }
  
  .product-form__buttons {
    max-width: 44rem;
  }
  
  .product--no-media .product__info-container > modal-opener {
    display: block;
    text-align: center;
  }
  
  .product--no-media .product-popup-modal__button {
    padding-right: 0;
  }
  
  .product--no-media .price {
    text-align: center;
  }
  
  /* Product media */
  .product__media-list video {
    border-radius: calc(var(--media-radius) - var(--media-border-width));
  }
  
  @media screen and (max-width: 749px) {
    .product__media-list {
      margin-left: -2.5rem;
      margin-bottom: 3rem;
      width: calc(100% + 4rem);
    }
  
    .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
      margin-left: -1.5rem;
      margin-right: -1.5rem;
    }
  
    .slider.product__media-list::-webkit-scrollbar {
      height: 0.2rem;
      width: 0.2rem;
    }
  
    .product__media-list::-webkit-scrollbar-thumb {
      background-color: rgb(var(--color-foreground));
    }
  
    .product__media-list::-webkit-scrollbar-track {
      background-color: rgba(var(--color-foreground), 0.2);
    }
  
    .product__media-list .product__media-item {
      width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
    }
  
    .product--mobile-columns .product__media-item {
      width: calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing));
    }
  }
  
  @media screen and (min-width: 750px) {
    .product--thumbnail .product__media-list,
    .product--thumbnail_slider .product__media-list {
      padding-bottom: calc(var(--media-shadow-vertical-offset) * var(--media-shadow-visible));
    }
  
    .product__media-list {
      padding-right: calc(var(--media-shadow-horizontal-offset) * var(--media-shadow-visible));
    }
  
    .product--thumbnail .product__media-item:not(.is-active),
    .product--thumbnail_slider .product__media-item:not(.is-active) {
      display: none;
    }
  
    .product-media-modal__content > .product__media-item--variant.product__media-item--variant {
      display: none;
    }
  
    .product-media-modal__content > .product__media-item--variant:first-child {
      display: block;
    }
  }
  
  .product__media-item.product__media-item--variant {
    display: none;
  }
  
  .product__media-item--variant:first-child {
    display: block;
  }
  
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .product__media-list .product__media-item:first-child {
      padding-left: 0;
    }
  
    .product--thumbnail_slider .product__media-list {
      margin-left: 0;
    }
  
    .product__media-list .product__media-item {
      width: 100%;
    }
  }
  
  .product__media-icon .icon {
    width: 1.2rem;
    height: 1.4rem;
  }
  
  .product__media-icon,
  .thumbnail__badge {
    background-color: rgb(var(--color-background));
    border-radius: 50%;
    border: 0.1rem solid rgba(var(--color-foreground), 0.1);
    color: rgb(var(--color-foreground));
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    z-index: 1;
    transition: color var(--duration-short) ease, opacity var(--duration-short) ease;
  }
  
  .product__media-video .product__media-icon {
    opacity: 1;
  }
  
  .product__modal-opener--image .product__media-toggle:hover {
    cursor: zoom-in;
  }
  
  .product__modal-opener:hover .product__media-icon {
    border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  }
  
  @media screen and (min-width: 750px) {
    .grid__item.product__media-item--full {
      width: 100%;
    }
  
    .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) {
      max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    }
  
    .product--large.product--columns .product__media-item--full .deferred-media__poster-button {
      height: 5rem;
      width: 5rem;
    }
  
    .product--medium.product--columns .product__media-item--full .deferred-media__poster-button {
      height: 4.2rem;
      width: 4.2rem;
    }
  
    .product--medium.product--columns .product__media-item--full .deferred-media__poster-button .icon {
      width: 1.8rem;
      height: 1.8rem;
    }
  
    .product--small.product--columns .product__media-item--full .deferred-media__poster-button {
      height: 3.6rem;
      width: 3.6rem;
    }
  
    .product--small.product--columns .product__media-item--full .deferred-media__poster-button .icon {
      width: 1.6rem;
      height: 1.6rem;
    }
  }
  
  @media screen and (min-width: 990px) {
    .product--stacked .product__media-item {
      max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    }
  
    .product:not(.product--columns) .product__media-list .product__media-item:first-child,
    .product:not(.product--columns) .product__media-list .product__media-item--full {
      width: 100%;
      max-width: 100%;
    }
  
    .product__modal-opener .product__media-icon {
      opacity: 0;
    }
  
    .product__modal-opener:hover .product__media-icon,
    .product__modal-opener:focus .product__media-icon {
      opacity: 1;
    }
  }
  
  .product__media-item > * {
    display: block;
    position: relative;
  }
  
  .product__media-toggle {
    display: flex;
    border: none;
    background-color: transparent;
    color: currentColor;
    padding: 0;
  }
  
  .product__media-toggle::after {
    content: '';
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(var(--border-width) * -1);
    right: calc(var(--border-width) * -1);
    bottom: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1);
    z-index: 2;
  }
  
  .product__media-toggle:focus-visible {
    outline: 0;
    box-shadow: none;
  }
  
  /* outline styling for Windows High Contrast Mode */
  @media (forced-colors: active) {
    .product__media-toggle:focus-visible,
    .product__media-toggle:focus-visible:after,
    .product-form__input input[type='radio']:focus-visible + label {
      outline: transparent solid 1px;
      outline-offset: 2px;
    }
  }
  .product__media-toggle.focused {
    outline: 0;
    box-shadow: none;
  }
  
  .product__media-toggle:focus-visible:after {
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
    border-radius: var(--media-radius);
  }
  
  .product__media-toggle.focused:after {
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
    border-radius: var(--media-radius);
  }
  
  .product-media-modal {
    background-color: rgb(var(--color-background));
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
  }
  
  .product-media-modal[open] {
    visibility: visible;
    opacity: 1;
    z-index: 101;
  }
  
  .product-media-modal__dialog {
    display: flex;
    align-items: center;
    height: 100vh;
  }
  
  .product-media-modal__content {
    max-height: 100vh;
    width: 100%;
    overflow: auto;
  }
  
  .product-media-modal__content > *:not(.active),
  .product__media-list .deferred-media {
    display: none;
  }
  
  @media screen and (min-width: 750px) {
    .product-media-modal__content {
      padding-bottom: 2rem;
    }
  
    .product-media-modal__content > *:not(.active) {
      display: block;
    }
  
    .product__modal-opener:not(.product__modal-opener--image) {
      display: none;
    }
  
    .product__media-list .deferred-media {
      display: block;
    }
  }
  
  @media screen and (max-width: 749px) {
    .product--thumbnail .is-active .product__modal-opener:not(.product__modal-opener--image),
    .product--thumbnail_slider .is-active .product__modal-opener:not(.product__modal-opener--image) {
      display: none;
    }
  
    .product--thumbnail .is-active .deferred-media,
    .product--thumbnail_slider .is-active .deferred-media {
      display: block;
      width: 100%;
    }
  }
  
  .product-media-modal__content > * {
    display: block;
    height: auto;
    margin: auto;
  }
  
  .product-media-modal__content .media {
    background: none;
  }
  
  .product-media-modal__model {
    width: 100%;
  }
  
  .product-media-modal__toggle {
    background-color: rgb(var(--color-background));
    border: 0.1rem solid rgba(var(--color-foreground), 0.1);
    border-radius: 50%;
    color: rgba(var(--color-foreground), 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    right: 2rem;
    padding: 1.2rem;
    position: fixed;
    z-index: 2;
    top: 2rem;
    width: 4rem;
  }
  
  .product-media-modal__content .deferred-media {
    width: 100%;
  }
  
  @media screen and (min-width: 750px) {
    .product-media-modal__content {
      padding: 2rem 11rem;
    }
  
    .product-media-modal__content > * {
      width: 100%;
    }
  
    .product-media-modal__content > * + * {
      margin-top: 2rem;
    }
  
    .product-media-modal__toggle {
      right: 5rem;
      top: 2.2rem;
    }
  }
  
  @media screen and (min-width: 990px) {
    .product-media-modal__content {
      padding: 2rem 11rem;
    }
  
    .product-media-modal__content > * + * {
      margin-top: 1.5rem;
    }
  
    .product-media-modal__content {
      padding-bottom: 1.5rem;
    }
  
    .product-media-modal__toggle {
      right: 5rem;
    }
  }
  
  .product-media-modal__toggle:hover {
    color: rgba(var(--color-foreground), 0.75);
  }
  
  .product-media-modal__toggle .icon {
    height: auto;
    margin: 0;
    width: 2.2rem;
  }
  
  /* Product popup */
  
  .product-popup-modal {
    box-sizing: border-box;
    opacity: 0;
    position: fixed;
    visibility: hidden;
    z-index: -1;
    margin: 0 auto;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    background: rgba(var(--color-foreground), 0.2);
    height: 100%;
  }
  
  .product-popup-modal[open] {
    opacity: 1;
    visibility: visible;
    z-index: 101;
  }
  
  .product-popup-modal__content {
    border-radius: var(--popup-corner-radius);
    background-color: rgb(var(--color-background));
    overflow: auto;
    height: 80%;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5rem;
    width: 92%;
    position: absolute;
    top: 0;
    padding: 0 1.5rem 0 3rem;
    border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
    border-style: solid;
    border-width: var(--popup-border-width);
    box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
      rgba(var(--color-shadow), var(--popup-shadow-opacity));
  }
  
  .product-popup-modal__content.focused {
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3),
      var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
        rgba(var(--color-shadow), var(--popup-shadow-opacity));
  }
  
  .product-popup-modal__content:focus-visible {
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3),
      var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
        rgba(var(--color-shadow), var(--popup-shadow-opacity));
  }
  
  @media screen and (min-width: 750px) {
    .product-popup-modal__content {
      padding-right: 1.5rem;
      margin-top: 10rem;
      width: 70%;
      padding: 0 3rem;
    }
  
    .product-media-modal__dialog .global-media-settings--no-shadow {
      overflow: visible !important;
    }
  }
  
  .product-popup-modal__content img {
    max-width: 100%;
  }
  
  @media screen and (max-width: 749px) {
    .product-popup-modal__content table {
      display: block;
      max-width: fit-content;
      overflow-x: auto;
      white-space: nowrap;
      margin: 0;
    }
  
    .product-media-modal__dialog .global-media-settings,
    .product-media-modal__dialog .global-media-settings video,
    .product-media-modal__dialog .global-media-settings model-viewer,
    .product-media-modal__dialog .global-media-settings iframe,
    .product-media-modal__dialog .global-media-settings img {
      border: none;
      border-radius: 0;
    }
  }
  
  .product-popup-modal__opener {
    display: inline-block;
  }
  
  .product-popup-modal__button {
    font-size: 1.6rem;
    padding-right: 1.3rem;
    padding-left: 0;
    min-height: 4.4rem;
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.1rem;
    transition: text-decoration-thickness var(--duration-short) ease;
  }
  
  .product-popup-modal__button:hover {
    text-decoration-thickness: 0.2rem;
  }
  
  .product-popup-modal__content-info {
    padding-right: 4.4rem;
  }
  
  .product-popup-modal__content-info > * {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
  }
  
  @media screen and (max-width: 749px) {
    .product-popup-modal__content-info > * {
      max-height: 100%;
    }
  }
  
  .product-popup-modal__toggle {
    background-color: rgb(var(--color-background));
    border: 0.1rem solid rgba(var(--color-foreground), 0.1);
    border-radius: 50%;
    color: rgba(var(--color-foreground), 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: sticky;
    padding: 1.2rem;
    z-index: 2;
    top: 1.5rem;
    width: 4rem;
    margin: 0 0 0 auto;
  }
  
  .product-popup-modal__toggle:hover {
    color: rgba(var(--color-foreground), 0.75);
  }
  
  .product-popup-modal__toggle .icon {
    height: auto;
    margin: 0;
    width: 2.2rem;
  }
  
  .product__media-list .media > * {
    overflow: hidden;
  }
  
  .thumbnail-list {
    flex-wrap: wrap;
    grid-gap: 1rem;
  }
  
  /* Fix to show some space at the end of our sliders in all browsers to be applied on thumbnails */
  .slider--mobile.thumbnail-list:after {
    content: none;
  }
  
  @media screen and (min-width: 750px) {
    .product--stacked .thumbnail-list {
      display: none;
    }
  
    .thumbnail-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  .thumbnail-list_item--variant:not(:first-child) {
    display: none;
  }
  
  @media screen and (min-width: 990px) {
    .thumbnail-list {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .product--medium .thumbnail-list {
      grid-template-columns: repeat(5, 1fr);
    }
  
    .product--large .thumbnail-list {
      grid-template-columns: repeat(6, 1fr);
    }
  }
  
  @media screen and (max-width: 749px) {
    .product__media-item {
      display: flex;
      align-items: center;
    }
  
    .product__modal-opener {
      width: 100%;
    }
  
    .thumbnail-slider {
      display: flex;
      align-items: center;
    }
  
    .thumbnail-slider .thumbnail-list.slider {
      display: flex;
      padding: 0.5rem;
      flex: 1;
      scroll-padding-left: 0.5rem;
    }
  
    .thumbnail-list__item.slider__slide {
      width: calc(33% - 0.6rem);
    }
  }
  
  @media screen and (min-width: 750px) {
    .product--thumbnail_slider .thumbnail-slider {
      display: flex;
      align-items: center;
    }
  
    .thumbnail-slider .thumbnail-list.slider--tablet-up {
      display: flex;
      padding: 0.5rem;
      flex: 1;
      scroll-padding-left: 0.5rem;
    }
  
    .product__media-wrapper .slider-mobile-gutter .slider-button {
      display: none;
    }
  
    .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
      width: calc(25% - 0.8rem);
    }
  
    .product--thumbnail_slider .slider-mobile-gutter .slider-button {
      display: flex;
    }
  }
  
  @media screen and (min-width: 900px) {
    .product--small .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
      width: calc(25% - 0.8rem);
    }
  
    .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
      width: calc(20% - 0.8rem);
    }
  }
  
  .thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    background-color: transparent;
  }
  
  .thumbnail:hover {
    opacity: 0.7;
  }
  
  .thumbnail.global-media-settings img {
    border-radius: 0;
  }
  
  .thumbnail[aria-current] {
    box-shadow: 0 0 0rem 0.1rem rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
  }
  
  .image-magnify-full-size {
    cursor: zoom-out;
    z-index: 1;
    margin: 0;
    border-radius: calc(var(--media-radius) - var(--media-border-width));
  }
  
  .image-magnify-hover {
    cursor: zoom-in;
  }
  
  .product__modal-opener--image .product__media-zoom-none,
  .product__media-icon--none {
    display: none;
  }
  
  .product__modal-opener > .loading__spinner {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    align-items: center;
    height: 48px;
    width: 48px;
  }
  
  .product__modal-opener .path {
    stroke: rgb(var(--color-button));
    opacity: 0.75;
  }
  
  @media (hover: hover) {
    .product__media-zoom-hover,
    .product__media-icon--hover {
      display: none;
    }
  }
  
  @media screen and (max-width: 749px) {
    .product__media-zoom-hover,
    .product__media-icon--hover {
      display: flex;
    }
  }
  
  .js .product__media {
    overflow: hidden !important;
  }
  
  .thumbnail[aria-current]:focus-visible {
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
  }
  
  .thumbnail[aria-current]:focus,
  .thumbnail.focused {
    outline: 0;
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
  }
  
  /* outline styling for Windows High Contrast Mode */
  @media (forced-colors: active) {
    .thumbnail[aria-current]:focus,
    .thumbnail.focused {
      outline: transparent solid 1px;
    }
  }
  .thumbnail[aria-current]:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
  }
  
  .thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  .thumbnail__badge .icon {
    width: 1rem;
    height: 1rem;
  }
  
  .thumbnail__badge .icon-3d-model {
    width: 1.2rem;
    height: 1.2rem;
  }
  
  .thumbnail__badge {
    color: rgb(var(--color-foreground), 0.6);
    height: 2rem;
    width: 2rem;
    left: auto;
    right: calc(0.4rem + var(--media-border-width));
    top: calc(0.4rem + var(--media-border-width));
  }
  
  @media screen and (min-width: 750px) {
    .product:not(.product--small) .thumbnail__badge {
      height: 3rem;
      width: 3rem;
    }
  
    .product:not(.product--small) .thumbnail__badge .icon {
      width: 1.2rem;
      height: 1.2rem;
    }
  
    .product:not(.product--small) .thumbnail__badge .icon-3d-model {
      width: 1.4rem;
      height: 1.4rem;
    }
  }
  
  .thumbnail-list__item {
    position: relative;
  }
  
  .thumbnail-list__item::before {
    content: '';
    display: block;
    padding-bottom: 100%;
  }
  
  .product:not(.featured-product) .product__view-details {
    display: none;
  }
  
  .product__view-details {
    display: block;
    text-decoration: none;
  }
  
  .product__view-details:hover {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
  
  .product__view-details .icon {
    width: 1.2rem;
    margin-left: 1.2rem;
    flex-shrink: 0;
  }
  
  /* Inventory status */
  
  .product__inventory {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .product--no-media .product__inventory {
    justify-content: center;
  }
  
  /* This keeps the container from getting display: none; applied to it and to make sure we're not introducing some layout shift when switching to an unavailable variant */
  .product__inventory.visibility-hidden:empty {
    display: block;
  }
  
  .product__inventory.visibility-hidden:empty::after {
    content: '#';
  }
  
  /* Icon with text */
  .icon-with-text {
    --icon-size: calc(var(--font-heading-scale) * 3rem);
    --icon-spacing: calc(var(--font-heading-scale) * 1rem);
  }
  
  .icon-with-text--horizontal {
    display: flex;
    justify-content: center;
    column-gap: 3rem;
    flex-direction: row;
  }
  
  .icon-with-text--vertical {
    --icon-size: calc(var(--font-heading-scale) * 2rem);
  }
  
  .icon-with-text .icon {
    fill: rgb(var(--color-foreground));
    height: var(--icon-size);
    width: var(--icon-size);
  }
  
  .icon-with-text--horizontal .icon,
  .icon-with-text--horizontal img {
    margin-bottom: var(--icon-spacing);
  }
  
  .icon-with-text--vertical .icon {
    min-height: var(--icon-size);
    min-width: var(--icon-size);
    margin-right: var(--icon-spacing);
  }
  
  .icon-with-text img {
    height: var(--icon-size);
    width: var(--icon-size);
    object-fit: contain;
  }
  
  .icon-with-text--vertical img {
    margin-right: var(--icon-spacing);
  }
  
  .icon-with-text--horizontal .h4 {
    padding-top: calc(var(--icon-size) + var(--icon-spacing));
    text-align: center;
  }
  
  .icon-with-text--horizontal svg + .h4,
  .icon-with-text--horizontal img + .h4,
  .icon-with-text--horizontal.icon-with-text--text-only .h4 {
    padding-top: 0;
  }
  
  .icon-with-text__item {
    display: flex;
    align-items: center;
  }
  
  .icon-with-text--horizontal .icon-with-text__item {
    flex-direction: column;
    width: 33%;
  }
  
  .icon-with-text--vertical .icon-with-text__item {
    margin-bottom: var(--icon-size);
  }
  
  /* SKU block */
  
  .product__sku.visibility-hidden::after {
    content: '#';
  }
  
  /* Product-thumbnail snippet */
  
  .product-media-container {
    --aspect-ratio: var(--preview-ratio);
    --ratio-percent: calc(1 / var(--aspect-ratio) * 100%);
    position: relative;
    width: 100%;
    max-width: calc(100% - calc(var(--media-border-width) * 2));
  }
  
  .product-media-container.constrain-height {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: 300px;
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
    margin-right: auto;
    margin-left: auto;
  }
  
  .product-media-container.constrain-height.media-fit-contain {
    --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
    width: min(var(--contained-width), 100%);
  }
  
  .product-media-container .media {
    padding-top: var(--ratio-percent);
  }
  
  .product-media-container.constrain-height .media {
    padding-top: min(var(--constrained-height), var(--ratio-percent));
  }
  
  @media screen and (max-width: 749px) {
    .product-media-container.media-fit-cover {
      display: flex;
      align-self: stretch;
    }
  
    .product-media-container.media-fit-cover .media {
      /* allow media img element to scale relative to modal-opener/product-media-container */
      position: initial;
    }
  }
  
  @media screen and (min-width: 750px) {
    .product-media-container {
      max-width: 100%;
    }
  
    .product-media-container:not(.media-type-image) {
      /* override to use actual media ratio (not poster ratio) for video/models on desktop */
      --aspect-ratio: var(--ratio);
    }
  
    .product-media-container.constrain-height {
      --viewport-offset: 170px;
      --constrained-min-height: 500px;
    }
  
    .product-media-container.media-fit-cover,
    .product-media-container.media-fit-cover .product__modal-opener,
    .product-media-container.media-fit-cover .media {
      height: 100%;
    }
  
    .product-media-container.media-fit-cover .deferred-media__poster img {
      object-fit: cover;
      width: 100%;
    }
  }
  
  .product-media-container .product__modal-opener {
    display: block;
    position: relative;
  }
  
  @media screen and (min-width: 750px) {
    .product-media-container .product__modal-opener:not(.product__modal-opener--image) {
      display: none;
    }
  }
  
  /* Recipient form */
  .recipient-form {
    /* (2.88[line-height] - 1.6rem) / 2 */
    --recipient-checkbox-margin-top: 0.64rem;
  
    display: block;
    position: relative;
    max-width: 44rem;
    margin-bottom: 2.5rem;
  }
  
  .recipient-form-field-label {
    margin: 0.6rem 0;
  }
  
  .recipient-form-field-label--space-between {
    display: flex;
    justify-content: space-between;
  }
  
  .recipient-checkbox {
    flex-grow: 1;
    font-size: 1.6rem;
    display: flex;
    word-break: break-word;
    align-items: flex-start;
    max-width: inherit;
    position: relative;
    cursor: pointer;
  }
  
  .no-js .recipient-checkbox {
    display: none;
  }
  
  .recipient-form > input[type='checkbox'] {
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    margin: var(--recipient-checkbox-margin-top) 0;
    top: 0;
    left: 0;
    z-index: -1;
    appearance: none;
    -webkit-appearance: none;
  }
  
  .recipient-fields__field {
    margin: 0 0 2rem 0;
  }
  
  .recipient-fields .field__label {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 3.5rem);
    overflow: hidden;
  }
  
  .recipient-checkbox > svg {
    margin-top: var(--recipient-checkbox-margin-top);
    margin-right: 1.2rem;
    flex-shrink: 0;
  }
  
  .recipient-form .icon-checkmark {
    visibility: hidden;
    position: absolute;
    left: 0.28rem;
    z-index: 5;
    top: 0.4rem;
  }
  
  .recipient-form > input[type='checkbox']:checked + label .icon-checkmark {
    visibility: visible;
  }
  
  .js .recipient-fields {
    display: none;
  }
  
  .recipient-fields hr {
    margin: 1.6rem auto;
  }
  
  .recipient-form > input[type='checkbox']:checked ~ .recipient-fields {
    display: block;
    animation: animateMenuOpen var(--duration-default) ease;
  }
  .recipient-form > input[type='checkbox']:not(:checked, :disabled) ~ .recipient-fields,
  .recipient-email-label {
    display: none;
  }
  
  .js .recipient-email-label.required,
  .no-js .recipient-email-label.optional {
    display: inline;
  }
  
  .recipient-form ul {
    line-height: calc(1 + 0.6 / var(--font-body-scale));
    padding-left: 4.4rem;
    text-align: left;
  }
  
  .recipient-form ul a {
    display: inline;
  }
  
  .recipient-form .error-message::first-letter {
    text-transform: capitalize;
  }
  
  @media screen and (forced-colors: active) {
    .recipient-fields > hr {
      border-top: 0.1rem solid rgb(var(--color-background));
    }
  
    .recipient-checkbox > svg {
      background-color: inherit;
      border: 0.1rem solid rgb(var(--color-background));
    }
  
    .recipient-form > input[type='checkbox']:checked + label .icon-checkmark {
      border: none;
    }
  }
  
  .b-card .card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.b-card .card-body {
    position: relative;
}

.b-card .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.b-card .profile-picture {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 3px solid #fff;
    border-radius: 50%;
    overflow: hidden;
}

.b-card .profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.b-card .card-content {
    text-align: center;
    padding: 20px;
    margin-top: 60px;
}

.b-card .card-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.b-card .social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.b-card .social-icons a {
    color: #333;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.b-card .social-icons a:hover {
    color: #007bff;
}
.gradient-text {
  color: linear-gradient(to right, rgb(33, 197, 198), rgb(209, 112, 247), rgb(100, 106, 254));
}

   input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
/* Preloader styles */
@media only screen and (max-width: 768px) {
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  /* background-color: #fff; */
  z-index: 9999; 
  display: none; 
}
.spinner {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  border: 4px solid #f3f3f3; 
  border-top: 4px solid #3498db; 
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
}
.pad-des {
  padding: 100px 20px;
}
.nxt-splash {
  height: 100vh !important;
  position: relative;
  background-image: url(../1.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #fff;
  display: flex;
  width: 100%;
}
.w-140{width:140% !important}
@media only screen and (max-width: 768px) {
  .pad-des {
    padding: 10px 20px;
  }
  .mob-img{width:80% !important}

  .nxt-splash {
    
    background-image: url(../2.webp);
  }


}



/* design */
.inpt {
  position: relative;
}

.inpt input,textarea {
  padding-left: 40px;
}

.inpt .icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-10%);
  font-size: 20px;
  color: #bf6bff;
}
.bg-grd {
  background: linear-gradient(116deg, #bf6bff 1.25%, #5e82f0 81.69%);
  background-size: cover
}
.inpt textarea:focus{
  outline:none
}

/*= input focus effects css
=========================== */
.theme-input:focus,
.theme-input:active {
    box-shadow: 0 0 1px 1px #bf6bff, 0 0 1px 1px #5e82f0;
}



  .theme-input:focus::before,
  .theme-input:active::before {
      opacity: 1;
  }

  .theme-input::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border: 2px solid #191d28;
      border-radius: 5px;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      animation: neon-border 1.5s infinite;
  }

  @keyframes neon-border {

      0%,
      100% {
          box-shadow: 0 0 1px #191d28, 0 0 2px #191d28, 0 0 3px #191d28, 0 0 4px #191d28, 0 0 5px #191d28, 0 0 6px #191d28, 0 0 7px #191d28;
      }

      50% {
          box-shadow: 0 0 2px #191d28, 0 0 3px #191d28, 0 0 4px #191d28, 0 0 5px #191d28, 0 0 6px #191d28, 0 0 7px #191d28, 0 0 8px #191d28;
      }
  }
  .hide {
    display: none;
}

  /* animation */
  .how-to-cards-main,.product-callout-main {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #d9a5ff 1.25%, #a3b5f9 81.69%);
    pointer-events: none;
    z-index: -1;
}

.circle.left {
    left: -2%;
}

.circle.right {
    right: -3%;
}

.bubble-container {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}

@keyframes moveUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}
.how-to-cards {
  transition: transform 0.3s ease;
}

.how-to-cards:hover {
  transform: scale(1.1) !important; 
  z-index: 1;
  cursor: pointer !important; 
}