.truncatee,
.truncatee h2 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.red-line-through {
   text-decoration: line-through;
   color: red
}

.bar {
   position: relative;
   background-color: #bdb7b7;
   border-radius: 10px;
   overflow: hidden;
   height: 15px;
   width: 100%
}

.progress {
   background-color: var(--warna_2);
   height: 100%;
   transition: width .5s
}

.progress-text {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   font-size: 11px;
   color: #fff
}

#skeleton-loaderr {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px
}

.container-desktop {
   max-width: 1255px;
   margin: 0 auto
}

@media (min-width:1024px) {
   .container-desktop {
      height: 400px
   }
}

.pl-6 {
   padding-left: 1.5rem
}

.truncatee {
   width: 190px;
   display: block
}

.truncatee h2 {
   width: inherit;
   margin: 0
}

.btn {
   position: absolute;
   top: 0;
   right: 0
}

.fs-countdown {
   display: flex;
   justify-content: center;
   align-items: center
}

.fs-countdown .time {
   font-size: 1em;
   color: #fff;
   padding: .3em .8em;
   background: linear-gradient(to bottom, var(--warna_1), var(--warna_2));
   border-radius: .3em
}

.fs-countdown .separator {
   font-size: 1em;
   color: #fff;
   padding: .3em
}

.tabs-container {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none
}

.tabs-container::-webkit-scrollbar {
   display: none
}

.tab-button {
   flex: 0 0 auto;
   margin-right: 10px
}

.containermelpa {
   border-radius: 15px 15px 0 0
}

.text-yellow-400 {
   --tw-text-opacity: 1;
   color: rgb(250, 204, 21, var(--tw-text-opacity))
}

.flash-sale-img {
   width: 65px;
   height: 60px;
   object-fit: cover
}

.p-4 {
   padding: 1rem
}

.rounded-xl {
   border-radius: .75rem
}

.cursor-pointer {
   cursor: pointer
}

.w-\[265px\] {
   width: 265px
}

.relative {
   position: relative
}

a {
   color: inherit;
   text-decoration: inherit
}

.rounded-sm {
   border-radius: calc(var(--radius) - 4px)
}

.overflow-hidden {
   overflow: hidden
}

.w-24 {
   width: 6rem
}

.aspect-square {
   aspect-ratio: 1/1
}

.-top-\[9px\] {
   top: -9px
}

.-right-\[9px\] {
   right: -9px
}

.bg-primary\/50 {
   background-color: #293447f0
}

.w-2 {
   width: .5rem
}

.h-2 {
   height: .5rem
}

.top-0 {
   top: 0
}

.left-0 {
   left: 0
}

.absolute {
   position: absolute
}

.shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
}

.shadow-md,
.shadow-sm {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.text-primary-foreground {
   color: hsl(var(--primary-foreground))
}

.uppercase {
   text-transform: uppercase
}

.font-semibold {
   font-weight: 600
}

.text-center {
   text-align: center
}

.py-1 {
   padding-top: .25rem;
   padding-bottom: .25rem
}

.rotate-45 {
   --tw-rotate: 45deg
}

.rotate-180,
.rotate-45 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.origin-bottom-right {
   transform-origin: bottom right
}

.w-square-diagonal {
   width: 141.42%
}

.block {
   display: block
}

.right-0 {
   right: 0
}

.bottom-0 {
   bottom: 0
}