body {
    margin-top: 130px;
}
@media (max-width: 1198px) {
    body {
        margin-top: 50px;
    }
}

/* The base skeleton animation */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e2e5e7 !important;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.2) 20%,
            rgba(255, 255, 255, 0.5) 60%,
            rgba(255, 255, 255, 0)
    );
    animation: shimmer 1.5s infinite;
}

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

@keyframes p-shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.skeleton-box {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 100%;
    animation: p-shimmer  1.2s infinite linear;
    border-radius: 12px;
}

.skeleton-card {
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 15px;
}
/* While the slider is NOT yet initialized */
.slider-5:not(.slick-initialized) {
    display: flex !important;
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 15px;
}

/* Ensure each category box has a consistent width before Slick takes over */
.slider-5:not(.slick-initialized) > div {
    flex: 0 0 auto;
    width: 20%; /* Since it's slider-5, we assume 5 items per row */
}

/* While the slider is NOT yet initialized */
.slider-4:not(.slick-initialized) {
    display: flex !important;
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 15px;
}

/* Ensure each category box has a consistent width before Slick takes over */
.slider-4:not(.slick-initialized) > div {
    flex: 0 0 auto;
    width: 25%; /* Since it's slider-5, we assume 5 items per row */
}
@media (max-width: 576px) {
    .slider-4:not(.slick-initialized) > div {
        flex: 0 0 auto;
        width: 100%; /* Since it's slider-5, we assume 5 items per row */
    }
}
/* Hide extra items that exceed the screen width to prevent layout jump */
@media (max-width: 768px) {
    .slider-5:not(.slick-initialized) > div {
        width: 33.33%; /* Show roughly 3 items on mobile before Slick */
    }
}
.category-box.loading-skeleton {
    position: relative;
    overflow: hidden;
    background: #f6f7f8;
}

.category-box.loading-skeleton img {
    opacity: 0; /* Hide image until it's loaded */
}

.category-box.loading-skeleton::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, #f6f7f8 0%, #edeef1 50%, #f6f7f8 100%);
    background-size: 200% 100%;
    animation: skeleton-glance 1.5s infinite;
}

@keyframes skeleton-glance {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
.btn-glance {
    position: relative;
    overflow: hidden;
    background-color: #212529;
    color: white;
    padding: 12px 28px; /* Added base padding */
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* This makes the BUTTON grow and shrink */
    animation: button-pulse 3s infinite ease-in-out;
}

/* 1. The Light Beam (Shine) */
.btn-glance::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%; /* Slightly wider for better visibility */
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    animation: shine-glance 3s infinite ease-in-out;
}

/* 2. Keyframes for the Light Beam */
@keyframes shine-glance {
    0% { left: -60%; }
    30% { left: 130%; } /* Movement happens during the first 30% */
    100% { left: 130%; } /* Pauses for the rest of the time */
}

/* 3. Keyframes for the Padding/Growth Effect */
@keyframes button-pulse {
    0% { transform: scale(1); }
    15% { transform: scale(1.08); } /* Button grows while light passes */
    30% { transform: scale(1); }    /* Button returns to normal */
    100% { transform: scale(1); }   /* Stays normal until next cycle */
}

/* Hover effects */
.btn-glance:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    background-color: #000;
}

.category-slot {
    text-align: center;
    cursor: pointer;
}

.slot-inner {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px dashed #ddd;
    border-radius: 8px;
    background: #fff;
}

.category-slot.filled .slot-inner {
    border-style: solid;
}

.plus {
    font-size: 28px;
    color: #aaa;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slot-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.remove-from-pack {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
}
.pack-discount{
    position: absolute;
    left: 10px;
    top: 10px;
    background: var(--theme-color);
    color: white;
    z-index: 1;
    font-size: 15px;
}
.slot-title{
    height: 36px;
    overflow: hidden;
}
#productsModal * { /* Whatever class you use for those cards */
    pointer-events: auto !important;
    touch-action: pan-y !important;
}

@font-face {
    font-family: "OGJ-Type-Design---Sequel-100-Black-85";
    src: url('https://cdn.shopify.com/s/files/1/1214/7132/files/gempages_OGJ_Type_Design_-_Sequel_100_Black_85.ttf?v=1740163403') format("truetype");
    font-display: swap;
}
.font-OGJ-Type-Design{
    font-family: 'OGJ-Type-Design---Sequel-100-Black-85', sans-serif;
}
@font-face {
    font-family: "OGJ-Type-Design---Sequel-Sans-Headline-Bold";
    src: url('https://cdn.shopify.com/s/files/1/1214/7132/files/gempages_OGJ_Type_Design_-_Sequel_Sans_Headline_Bold.ttf?v=1740163646') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "OGJ-Type-Design---Sequel-Sans-Headline-Book";
    src: url('https://cdn.shopify.com/s/files/1/1214/7132/files/gempages_OGJ_Type_Design_-_Sequel_Sans_Headline_Book.ttf?v=1740155894') format("truetype");
    font-display: swap;
}

.font-15{
    font-size: 15px!important;
}
.font-25{
    font-size: 15px!important;
}
.height-45{
    height: 45px;

}
.height-25{
    height: 25px;
    overflow: hidden;
}

.mfp-bg{
    background: #ffffff;
}
.mfp-figure:after{
    box-shadow: 0 0 8px rgba(255,255,255 , 0.6);
    background: #fff;
}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
    color: #000;
    right: -6px;
    text-align: right;
    padding-right: 12px;
    width: unset;
}

header .border-nav{
    padding-top: 0;
}

.product-box-3 .product-footer .product-detail .name{
    /*font-family: "Bebas Neue", sans-serif;*/
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    margin-top: 10px;
    height: 46px;
}
.product-box-3 .product-footer .price span{
    font-size:calc(20px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}
.add-to-cart-box{
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.flash-buy:hover {
    color: #fff!important;
    background: linear-gradient(93.33deg, #0f96d1  12.35%, #1d2937 99.38%);
}
header .onhover-dropdown .onhover-div{
    right: 0;
}
#cartContent{
    position: fixed;
    /*overflow-y: scroll;*/
    right: 0px;
    height: 100vh;
    top: 0;
    padding: 5px;
    padding-top: 30px;
    z-index: 10;
    background-color: #fff;
    width: 320px;
    border-radius: 10px;
    -webkit-box-shadow: -1px 0 10px 0 rgba(34, 34, 34, 0.07), 5px 20px 40px 0 rgba(34, 34, 34, 0.04);
    box-shadow: -1px 0 10px 0 rgba(34, 34, 34, 0.07), 5px 20px 40px 0 rgba(34, 34, 34, 0.04);
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    visibility: hidden
}
h2 {
    font-size: calc(30px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
}
.remove-filter{
    cursor: pointer;
}
.owl-carousel{
    z-index:  0;
}
.slick-prev:before, .slick-next:before{
    color: #0f96d1;
}
.slick-prev:before, .slick-next:before{
    font-size: 25px;
}
.breadscrumb-section .breadscrumb-contain h2{

}

.title h2{
    text-transform: uppercase;
    font-size: calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
    font-family: 'OGJ-Type-Design---Sequel-100-Black-85', sans-serif;
}

.font-gloss{

}

.product-var .product-var-list{
    display: none;
    transition: ease 0.5s;
}
.product-var:hover .product-var-list{
    display: block;
}

header .navbar{
    z-index: 100;
}
header{
    background: #1e2937;
}
header .navbar-light .navbar-nav .nav-link {
    color: #fff;
}
header .top-nav .navbar-top .rightside-box .right-side-menu .right-side .delivery-login-box .delivery-icon .feather{
    color: #fff;
}
header .top-nav .navbar-top .rightside-box .right-side-menu .right-side .header-wishlist .feather{
    color: #fff;
}
header .navbar-toggler-icon{
    color: #fff;
}
header .navbar-toggler-icon{
    -webkit-text-fill-color: #ffffff;
}
.btn-add-cart:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 0%;
    background: linear-gradient(93.33deg, #0f96d1  12.35%, #1d2937 99.38%);
    transition: all 0.3s;
    border-radius: 10rem;
    z-index: -1;
}
.btn-add-cart:hover {
    color: #000;
}
.btn-add-cart:hover:before {
    width: 100%;
}








.discount-badge{
    display: flex;
    justify-content: end;
    position: absolute;
    top: -2px;
    right: 25px;
    z-index: 1;
}
.badge-pulsate {
    display: inline-block;
    background-color: #F44336;
    border-radius: 50%;
    color: #fff;
    padding-top: 10px;
    text-align: center;
    position: relative;
    width: 50px;
    height: 50px;
    /* font-weight: 900; */
    font-size: 20px;
    font-family: 'Bebas Neue', sans-serif !important;
    z-index: 8;
}

.pulsate::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: pulse 1s ease infinite;
    border-radius: 50%;
    border: 4px double #F44336;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    60% {
        transform: scale(1.3);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}
.compare-btn{
    /*position: absolute;*/
    /*top: 10px;*/
    /*right: 10px;*/
    /*height: 25px;*/
    /*width: 25px;*/
    /*border-radius: 50%;*/
    /*border: 1px solid;*/
    /*padding: 2px;*/
    /*transform: rotate(90deg);*/
}
.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.count-down {
    max-width: 550px;
    height: 150px;
    margin: auto;
    padding: 20px;
}
.count-down .flipdown {
    margin: auto;
    max-width: 600px;
    margin-top: 30px;
}
.count-down h1 {
    text-align: center;
    font-weight: 400;
    font-size: 3em;
    margin-top: 0;
    margin-bottom: 10px;
}
@media (max-width: 550px) {
    .count-down {
        width: 100%;
        height: 150px;
    }
    .count-down h1 {
        font-size: 2.5em;
    }
    .count-down .flipdown{
        width: 100%;
    }
}

.moving-border:hover::before,
.moving-border:hover::after {
    content: "";
    position: absolute;
    inset: -0.2rem;
    z-index: -1;
    background: linear-gradient(var(--angle), #032146, #C3F2FF, #399bbb);
    animation: rotate 10s linear infinite;
}

.moving-border:hover::after {
    filter: blur(10px);
}

@keyframes rotate {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

/*WEBSITE 3.0*/
/*NAVBAR*/
.nav-link{
    color: red;
    font-family: 'OGJ-Type-Design---Sequel-100-Black-85', sans-serif;
    font-size: 12px;
}
/*NAVBAR*/

/*PACKS*/
/* Hide the radio buttons */
.radio-buttons input[type="radio"] {
    display: none;
}

/* Style the labels to look like buttons */
.radio-buttons .radio-button {
    display: inline-block;
    padding: 0;
    margin: 5px;
    border: 2px solid #0f96d1;
    border-radius: 5px;
    background-color: #f8f9fa;
    color: #0f96d1;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Add a hover effect for better interaction */
.radio-buttons .radio-button:hover {
    background-color: #e7f1ff;
}

/* Apply active styles to the label when the radio button is checked */
.radio-buttons input[type="radio"]:checked + .radio-button {
    background-color: #0f96d1;
    color: #fff;
    border-color: #0f96d1;
}
/*PACKS*/


/*buttons*/
.buy-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    position: absolute;
    bottom: 0;
    right: 15px;
    padding: 7px 11px;
    background-color: var(--theme-color);
    color: #fff;
    border-radius: 50%;
}
.buy-button:hover {
    background-color: #7f7f7f;
}
.flash-buy .purchase {
    margin-left: 5%;
}
.flash-buy{
    /*margin-left:5%; */
    /*margin-right:10%;*/
    width: 200px;
    background-color: var(--theme-color);
    border: var(--theme-color);
    padding:5px;
    font-size:20px;
    height: 33px;
    color: #fff;
    border-radius: 40px;
    font-weight: 600;
}
/*buttons*/

/**/
.carousel-indicators-wrapper {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    margin: 0;
    white-space: nowrap;
}

.carousel-indicators {
    display:flex;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0;
    position:static;
}

.carousel-indicators button {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 0;
}

.carousel-indicators img {
    width: 150px;
    height: auto;
    display: block;
    border: 2px solid transparent;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
}
.carousel-indicators [data-bs-target]{
    width:150px;
    height: 150px;
}
.carousel-indicators .active img {
    border-color: #007bff;
}

@media (max-width: 576px) {
    .carousel-indicators img {
        width: 150px;
    }
}
/**/


/*Card Order*/

:root {
    --clr-card: #1f2937;
    --clr-1: #6420aa;
    --clr-2: #ff3ea5;
    --clr-3: #851f00;
}

.card-order {
    position: relative;
    border-radius: 0.45rem;
    cursor: pointer;
    background: #fff;
}

.card-order::after,
.card-order::before {
    content: " ";
    position: absolute;
    z-index: -1;
    inset: -2px;
    background: conic-gradient(
            from var(--gradient-angle),
            var(--clr-card),
            #000,
            var(--theme-color),
            var(--clr-3),
            var(--theme-color),
            #000,
            var(--clr-card)
    );
    border-radius: inherit;
    animation: rotate 2.5s linear infinite;
}

.card-order::after {
    filter: blur(5px);
}

@keyframes rotate {
    0% {
        --gradient-angle: 0deg;
    }
    100% {
        --gradient-angle: 360deg;
    }
}

.deal-section .deal-box .category-image img{
    width: 100%!important;
    border-radius: 18px;
}
.deal-section .deal-box .deal-detail{
    width: 100%!important;
}
/*Card Order*/


/*PRODUCT CARD*/
.product-box-3{
    margin-bottom: 15px;
}
.product-box .product-image img{
    height: auto;
}
.variationsSelect{
    margin-left: 12%;
    display: block;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
}
/*PRODUCT CARD*/



/*ACCORDION*/
.accordion-item:first-of-type>.accordion-header .accordion-button,.accordion-header{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
/*ACCORDION*/

/*Carousel*/
.carousel-control-next-icon,.carousel-control-prev-icon{
    background-color: #03A9F4;
    border-radius: 50%;
}

 .carousel {
     touch-action: pan-y pinch-zoom !important;
 }

.carousel img {
    touch-action: auto !important;
    pointer-events: auto;
}

/*Carousel*/
/*WEBSITE 3.0*/

.flip {
    position: relative;
}
.flip > .front,
.flip > .back {
    display: block;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 0.5s;
    transition-property: transform, opacity;
}
.flip > .front {
    transform: rotateY(0deg);
}
.flip > .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
}
.flip:hover > .front {
    transform: rotateY(180deg);
}
.flip:hover > .back {
    opacity: 1;
    transform: rotateY(0deg);
}
.flip.flip-vertical > .back {
    transform: rotateX(-180deg);
}
.flip.flip-vertical:hover > .front {
    transform: rotateX(180deg);
}
.flip.flip-vertical:hover > .back {
    transform: rotateX(0deg);
}

.flip {
    position: relative;
    display: block;
    margin-bottom: 1em;
    width: 465px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;

}
@media only screen and (max-width: 550px) {
    .flip {
        width: 300px;
        height: 190px;
    }
}
.flip > .front,
.flip > .back {
    display: block;
    color: #1ea7dd;
    width: inherit;
    background-size: cover !important;
    background-position: center !important;
    height: 100%;
    padding: 0.2em 0.2em;
    background: #313131;
    border-radius: 10px;
}
.flip > .front p,
.flip > .back p {
    font-size: 0.9125rem;
    line-height: 160%;
    color: #999;
}

/*.text-shadow {*/
/*    text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);*/
/*}*/
/*WEBSITE 3.0*/

.category-box img {
    width: calc(150px + (45 - 38) * ((100vw - 320px) / (1920 - 320)));
    height: calc(150px + (45 - 38) * ((100vw - 320px) / (1920 - 320)));
    -o-object-fit: contain;
    object-fit: contain;
    margin: 0 auto
}

.capitalized {
    text-transform: lowercase;
}

.capitalized::first-letter {
    text-transform: uppercase;
}

/* Example CSS for positioning */
.floating {
    position: fixed;
    bottom: 100px;
    font-size: calc(30px + (40 - 30) * ((100vw - 320px) / (1920 - 320)));
    right: calc(10px + (25 - 10) * ((100vw - 320px) / (1920 - 320)));
    color: #10bb02;
    z-index: 8;
}