/** 100% fit screen ***/
@media (orientation: landscape) {
    .fullscreen {
        background-color: #f8f9f8 !important; /* Change background for landscape */
    }
}

@media (orientation: portrait) {
    .fullscreen {
        background-color: #f8f9f8 !important; /* Change background for portrait */
    }
}

        
 /* Reset margins and paddings */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%; /* Ensure the body spans the full height */
            width: 100%;  /* Ensure the body spans the full width */
            overflow-x: hidden; /* Prevent scrolling if not desired */
        }

        .fullscreen {
            display: flex;
            justify-content: center; /* Center content horizontally */
            align-items: center;    /* Center content vertically */
            height: 100%;           /* Full height of viewport */
            width: 100%;            /* Full width of viewport */
            background-color: #f3f3f3; /* Set your background color */
            text-align: center;     /* Center text if any */
        }

        .fullscreen img {
            max-width: 100%; /* Scale down for wide screens */
            max-height: 100%; /* Scale down for tall screens */
            object-fit: contain; /* Ensure the image is fully visible */
        }
        
        /* Let's get this party started */
::-webkit-scrollbar {
	width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

/* Handle */
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.checked {
  color: orange;
}
.priceLabelSpan{
	flex: 0 0 auto;
    min-height: 24px;
    max-height: 3em;
    width: auto;
    padding: 4px 6px;
    border-radius: 2px;
    font-weight: 700;
}
.limitedOffer{
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    vertical-align: top;
    padding: 4px 6px;
    border-radius: 2px;
    color: #ffffff;
    background-color: #CC0C39;
}
.saveDiscount{
	padding-top: 4px;
    color: #111111;
    font-size: 11px;
}

.discountTotal{
	padding: 4px;
    background-color: #7FDA6A !important;
}
.bestSeller{
	margin-right: 4px;
    background-color: #C45500 !important;
    font-size: 12px;
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 14px;
    font-weight: 400;
}
.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}

.info {
    position: relative;
    padding: 16px;
    border-radius: 10px;
    margin: 16px;
    background-color: #f1ae65;
    z-index: 1;
    overflow: hidden;
}

.info::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #f1ae65, #fff, #f1ae65);
    z-index: -1;
    background-size: 400% 400%;
    animation: borderRun 4s linear infinite;
    border-radius: 12px;
}

@keyframes borderRun {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}