#productsSide[data-view="grid"] #productGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
}
#productsSide[data-view="grid"] #productListView{display:none!important}
#productsSide[data-view="grid"] #productGrid .product-card{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  gap:0!important;
  padding:12px 12px 0!important;
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--line) 86%, transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 96%,#fff 4%),color-mix(in srgb,var(--card) 99%,var(--soft) 1%))!important;
  box-shadow:0 14px 34px rgba(15,23,42,.07)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
#productsSide[data-view="grid"] #productGrid .product-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 20px 42px rgba(15,23,42,.11)!important;
}
#productsSide[data-view="grid"] #productGrid .product-card>.thumb{
  width:100%!important;
  height:166px!important;
  flex:0 0 auto!important;
  border-radius:18px!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#38bdf8 0%,#4f46e5 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;
}
#productsSide[data-view="grid"] #productGrid .product-card>.thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
}
#productsSide[data-view="grid"] #productGrid .product-card>.thumb b{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  background:radial-gradient(circle at center,rgba(255,255,255,.13) 0,rgba(255,255,255,0) 37%),linear-gradient(135deg,#38bdf8 0%,#4f46e5 100%)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
}
#productsSide[data-view="grid"] #productGrid .product-card>.thumb em{
  left:0!important;
  top:0!important;
  z-index:2!important;
  padding:6px 10px!important;
  border-radius:0 0 10px 0!important;
  background:#fb7185!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  box-shadow:0 10px 22px rgba(244,63,94,.22)!important;
}
#productsSide[data-view="grid"] #productGrid .product-main{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  padding:13px 2px 0!important;
  min-width:0!important;
}
#productsSide[data-view="grid"] #productGrid .product-main .product-title{
  margin:0!important;
  padding:0!important;
  min-height:40px!important;
  font-size:15px!important;
  line-height:1.34!important;
  font-weight:900!important;
  color:var(--text)!important;
  text-decoration:none!important;
  white-space:normal!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
#productsSide[data-view="grid"] #productGrid .mini-cat{
  align-self:flex-start!important;
  max-width:100%!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--indigo) 9%,#fff 91%)!important;
  color:var(--indigo)!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#productsSide[data-view="grid"] #productGrid .product-meta{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin:0!important;
  padding-top:2px!important;
}
#productsSide[data-view="grid"] #productGrid .product-meta p,
#productsSide[data-view="grid"] #productGrid .product-meta small{
  display:block!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  color:var(--muted)!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:650!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom{
  width:100%!important;
  grid-column:auto!important;
  margin-top:auto!important;
  padding:14px 2px 14px!important;
  border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:10px!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom>div{
  min-width:0!important;
  flex:1 1 auto!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom strong{
  display:block!important;
  color:#0891b2!important;
  font-size:17px!important;
  line-height:1.12!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom del{
  display:block!important;
  margin-top:4px!important;
  color:var(--muted)!important;
  font-size:12px!important;
  line-height:1!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom button{
  position:relative!important;
  width:auto!important;
  min-width:82px!important;
  height:40px!important;
  flex:0 0 auto!important;
  padding:0 13px!important;
  border-radius:13px!important;
  border:1px solid color-mix(in srgb,var(--line) 86%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--soft) 78%,#fff 22%),color-mix(in srgb,var(--soft) 96%,var(--card) 4%))!important;
  color:var(--text)!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  text-indent:0!important;
  font-size:0!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom button::before{
  content:""!important;
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
  display:block!important;
  background:currentColor!important;
  opacity:.92!important;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM6.2 6l.8 8.1A3 3 0 0 0 10 17h6.6a3 3 0 0 0 2.9-2.3l1.1-5A2 2 0 0 0 18.7 7H8.1L7.8 4.9A3 3 0 0 0 4.9 2H3a1 1 0 0 0 0 2h1.9a1 1 0 0 1 1 .9L6.2 6Z"/></svg>') center/contain no-repeat!important;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM6.2 6l.8 8.1A3 3 0 0 0 10 17h6.6a3 3 0 0 0 2.9-2.3l1.1-5A2 2 0 0 0 18.7 7H8.1L7.8 4.9A3 3 0 0 0 4.9 2H3a1 1 0 0 0 0 2h1.9a1 1 0 0 1 1 .9L6.2 6Z"/></svg>') center/contain no-repeat!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom button::after{
  content:"Beli"!important;
  display:block!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:850!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom button:hover{
  color:var(--indigo)!important;
  border-color:color-mix(in srgb,var(--indigo) 20%,var(--line) 80%)!important;
  transform:translateY(-1px)!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card{
  background:linear-gradient(180deg,#152034 0%,#111a2c 100%)!important;
  border-color:rgba(148,163,184,.15)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card:hover{
  border-color:rgba(56,189,248,.22)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.34)!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .mini-cat{
  background:rgba(15,118,110,.22)!important;
  color:#99f6e4!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-meta p,
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-meta small,
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .card-bottom del{
  color:#9fb0c8!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .card-bottom{
  border-top-color:rgba(148,163,184,.15)!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .card-bottom strong{
  color:#22d3ee!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .card-bottom button{
  background:linear-gradient(180deg,#18263b 0%,#121d31 100%)!important;
  border-color:rgba(148,163,184,.18)!important;
  color:#e5eefc!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .card-bottom button:hover{
  color:#67e8f9!important;
  border-color:rgba(103,232,249,.26)!important;
}
@media(max-width:1180px){
  #productsSide[data-view="grid"] #productGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:640px){
  #productsSide[data-view="grid"] #productGrid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card{
    border-radius:18px!important;
    padding:8px 8px 0!important;
    box-shadow:0 10px 26px rgba(15,23,42,.08)!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb{
    height:112px!important;
    border-radius:15px!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb b{
    font-size:12px!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb em{
    padding:5px 8px!important;
    font-size:10px!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-main{
    padding:9px 1px 0!important;
    gap:6px!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-main .product-title{
    min-height:34px!important;
    font-size:12.75px!important;
    line-height:1.32!important;
  }
  #productsSide[data-view="grid"] #productGrid .mini-cat{
    padding:4px 7px!important;
    font-size:9px!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-meta{
    gap:6px!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-meta p,
  #productsSide[data-view="grid"] #productGrid .product-meta small{
    font-size:10px!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom{
    padding:10px 1px 11px!important;
    gap:6px!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom strong{
    font-size:13.5px!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom del{
    font-size:9.5px!important;
    margin-top:3px!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom button{
    min-width:36px!important;
    width:36px!important;
    height:36px!important;
    padding:0!important;
    border-radius:12px!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom button::before{
    width:15px!important;
    height:15px!important;
    flex-basis:15px!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom button::after{content:none!important;display:none!important;}
}
@media(max-width:390px){
  #productsSide[data-view="grid"] #productGrid{gap:9px!important;}
  #productsSide[data-view="grid"] #productGrid .product-card{padding:8px 8px 0!important;}
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb{height:104px!important;}
  #productsSide[data-view="grid"] #productGrid .product-main .product-title{font-size:12.25px!important;min-height:32px!important;}
  #productsSide[data-view="grid"] #productGrid .product-meta p,
  #productsSide[data-view="grid"] #productGrid .product-meta small{font-size:9.5px!important;}
  #productsSide[data-view="grid"] #productGrid .card-bottom strong{font-size:12.75px!important;}
}

@media(min-width:641px){
  .products-side[data-view="list"] .table-product,
  .products-side.is-list-view .table-product{
    gap:18px!important;
    min-width:380px!important;
    align-items:center!important;
  }
  .products-side[data-view="list"] .table-product .thumb.mini,
  .products-side.is-list-view .table-product .thumb.mini{
    width:88px!important;
    height:88px!important;
    flex:0 0 88px!important;
    border-radius:18px!important;
  }
  .products-side[data-view="list"] .table-product .thumb.mini b,
  .products-side.is-list-view .table-product .thumb.mini b{
    font-size:11px!important;
    letter-spacing:.08em!important;
  }
  .products-side[data-view="list"] .product-table td,
  .products-side.is-list-view .product-table td{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
  .products-side[data-view="list"] .table-product .product-title,
  .products-side.is-list-view .table-product .product-title{
    font-size:15.5px!important;
  }
}

#productsSide .card-bottom > div,
#productsSide .product-table td:nth-child(3){
  min-width:0!important;
}
#productsSide .card-bottom strong,
#productsSide .card-bottom del,
#productsSide .table-price,
#productsSide .product-table td:nth-child(3) del,
#productsSide .front-price,
#modalPrice,
#modalOriginal{
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom strong{
  font-size:clamp(15px,1.14vw,17px)!important;
  letter-spacing:0!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom del{
  font-size:11.5px!important;
  letter-spacing:0!important;
}
.products-side[data-view="list"] .table-price,
.products-side.is-list-view .table-price{
  display:block!important;
  font-size:clamp(14px,1vw,16px)!important;
  line-height:1.15!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
.products-side[data-view="list"] .product-table td:nth-child(3) del,
.products-side.is-list-view .product-table td:nth-child(3) del{
  font-size:11.5px!important;
  line-height:1.1!important;
  margin-top:4px!important;
  white-space:nowrap!important;
}
@media(max-width:640px){
  #productsSide[data-view="grid"] #productGrid .card-bottom{
    align-items:flex-end!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom > div{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom strong{
    font-size:clamp(12px,3.25vw,13.25px)!important;
    line-height:1.08!important;
    letter-spacing:-.01em!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom del{
    font-size:clamp(9px,2.55vw,10px)!important;
    line-height:1.05!important;
    letter-spacing:-.01em!important;
  }
  .products-side[data-view="list"] .table-price,
  .products-side.is-list-view .table-price{
    font-size:clamp(13px,3.65vw,15px)!important;
    line-height:1.08!important;
    letter-spacing:-.01em!important;
  }
  .products-side[data-view="list"] .product-table td:nth-child(3) del,
  .products-side.is-list-view .product-table td:nth-child(3) del{
    font-size:clamp(9.5px,2.65vw,11px)!important;
    line-height:1.05!important;
    letter-spacing:-.01em!important;
  }
}
@media(max-width:390px){
  #productsSide[data-view="grid"] #productGrid .card-bottom strong{
    font-size:12px!important;
  }
  #productsSide[data-view="grid"] #productGrid .card-bottom del{
    font-size:9px!important;
  }
  .products-side[data-view="list"] .table-price,
  .products-side.is-list-view .table-price{
    font-size:13.5px!important;
  }
}

.products-side[data-view="list"] .table-product .thumb.mini,
.products-side.is-list-view .table-product .thumb.mini{
  position:relative!important;
  overflow:visible!important;
}
.products-side[data-view="list"] .table-product .thumb.mini img,
.products-side.is-list-view .table-product .thumb.mini img,
.products-side[data-view="list"] .table-product .thumb.mini b,
.products-side.is-list-view .table-product .thumb.mini b{
  border-radius:inherit!important;
  overflow:hidden!important;
}
.products-side[data-view="list"] .table-product .thumb.mini em,
.products-side.is-list-view .table-product .thumb.mini em{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  left:-6px!important;
  top:-6px!important;
  z-index:4!important;
  min-height:22px!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#fb7185,#ec4899)!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  box-shadow:0 10px 22px rgba(236,72,153,.28)!important;
}
.hero-buttons .btn,
.hero-buttons a{
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease!important;
}
.hero-buttons .btn:hover,
.hero-buttons a:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 18px 34px rgba(15,23,42,.16)!important;
  text-decoration:none!important;
}
.hero-buttons .btn.primary:hover{
  background:#ecfeff!important;
  color:#0f766e!important;
}
.hero-buttons .btn.secondary:hover{
  background:rgba(15,118,110,.72)!important;
  border-color:rgba(153,246,228,.38)!important;
  color:#fff!important;
}
#productsSide .product-title{
  transition:color .16s ease, text-shadow .16s ease!important;
}
#productsSide .product-title:hover{
  color:#0891b2!important;
  text-decoration:none!important;
}
html[data-theme=dark] #productsSide .product-title:hover{
  color:#67e8f9!important;
  text-shadow:0 0 18px rgba(103,232,249,.12)!important;
}

#productsSide[data-view="grid"] #productGrid .product-card.hidden,
#productsSide[data-view="grid"] #productGrid .product-card[hidden],
#productsSide[data-view="list"] #productListView tr.hidden,
#productsSide[data-view="list"] #productListView tr[hidden],
[data-product-card].hidden,
[data-product-card][hidden]{
  display:none!important;
}

@media (min-width: 861px){
  .main-wrap{
    padding-top:28px!important;
  }
  .hero-card{
    min-height:438px!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 420px!important;
    grid-template-rows:auto auto auto auto 1fr auto!important;
    column-gap:42px!important;
    row-gap:0!important;
    padding:46px 54px 28px!important;
    border-radius:28px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:
      radial-gradient(circle at 78% 18%, rgba(103,232,249,.38) 0 18%, transparent 36%),
      radial-gradient(circle at 18% 6%, rgba(255,255,255,.16) 0 13%, transparent 31%),
      linear-gradient(120deg,#5b3ff0 0%,#4438d7 42%,#1d9bf0 78%,#25c7e6 100%)!important;
    box-shadow:0 28px 70px rgba(30,41,59,.18)!important;
  }
  .hero-card::before{
    content:""!important;
    position:absolute!important;
    inset:auto -120px -185px 32%!important;
    width:auto!important;
    height:340px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.12)!important;
    filter:blur(2px)!important;
    transform:rotate(-7deg)!important;
    z-index:-1!important;
  }
  .hero-card::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.15),transparent 36%),
      repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px, transparent 1px 46px)!important;
    opacity:.75!important;
    z-index:-1!important;
  }
  .hero-copy{display:contents!important;max-width:none!important;}
  .hero-badge,
  .hero-copy h1,
  .hero-copy p,
  .hero-buttons,
  .hero-benefits,
  .hero-art{position:relative!important;z-index:2!important;}
  .hero-badge{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    margin:0 0 20px!important;
    padding:8px 15px!important;
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.24)!important;
    background:rgba(255,255,255,.13)!important;
    color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;
    backdrop-filter:blur(12px)!important;
  }
  .hero-copy h1{
    grid-column:1!important;
    grid-row:2!important;
    max-width:720px!important;
    margin:0 0 15px!important;
    font-size:clamp(34px,3vw,46px)!important;
    line-height:1.12!important;
    letter-spacing:.01em!important;
    font-weight:950!important;
    text-wrap:balance!important;
    text-shadow:0 12px 34px rgba(15,23,42,.14)!important;
  }
  .hero-copy p{
    grid-column:1!important;
    grid-row:3!important;
    max-width:760px!important;
    margin:0 0 26px!important;
    color:rgba(239,246,255,.86)!important;
    font-size:16px!important;
    line-height:1.72!important;
  }
  .hero-buttons{
    grid-column:1!important;
    grid-row:4!important;
    margin:0!important;
    gap:14px!important;
  }
  .hero-buttons .btn{
    min-width:178px!important;
    height:52px!important;
    padding:0 24px!important;
    border-radius:15px!important;
    transition:transform .16s ease, box-shadow .16s ease, background .16s ease!important;
  }
  .hero-buttons .btn.primary{
    background:rgba(255,255,255,.96)!important;
    color:#4f46e5!important;
    box-shadow:0 16px 34px rgba(15,23,42,.18)!important;
  }
  .hero-buttons .btn.secondary{
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    color:#fff!important;
    backdrop-filter:blur(12px)!important;
  }
  .hero-buttons .btn:hover{transform:translateY(-2px)!important;}
  .hero-buttons .btn.primary:hover{box-shadow:0 20px 42px rgba(15,23,42,.22)!important;}
  .hero-art{
    grid-column:2!important;
    grid-row:1 / 6!important;
    align-self:center!important;
    min-height:285px!important;
    display:grid!important;
    place-items:center!important;
  }
  .digital-card{
    width:258px!important;
    height:210px!important;
    border-radius:28px!important;
    transform:rotate(7deg)!important;
    overflow:hidden!important;
    background:linear-gradient(155deg,rgba(255,255,255,.94) 0 46%,#dbeafe 46% 100%)!important;
    color:#2563eb!important;
    box-shadow:0 26px 70px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.68)!important;
  }
  .digital-card::before{
    content:""!important;
    position:absolute!important;
    inset:0 0 auto 0!important;
    height:54px!important;
    background:linear-gradient(135deg,#67e8f9,#3b82f6)!important;
  }
  .digital-card::after{
    content:""!important;
    position:absolute!important;
    top:22px!important;
    left:24px!important;
    width:12px!important;
    height:12px!important;
    border-radius:999px!important;
    background:#fff!important;
    box-shadow:28px 0 0 rgba(255,255,255,.85)!important;
    opacity:.95!important;
  }
  .digital-card span{
    width:72px!important;
    height:60px!important;
    border-radius:14px!important;
    display:grid!important;
    place-items:center!important;
    margin-top:32px!important;
    background:linear-gradient(135deg,#3b82f6,#4f46e5)!important;
    color:#fff!important;
    font-size:0!important;
    box-shadow:0 16px 34px rgba(37,99,235,.32)!important;
  }
  .digital-card span::before{content:"↓";font-size:34px;font-weight:900;line-height:1;}
  .digital-card b{
    margin-top:0!important;
    background:transparent!important;
    color:#2563eb!important;
    font-size:20px!important;
    letter-spacing:.14em!important;
    padding:0!important;
  }
  .hero-art .crown{
    left:18px!important;
    top:44px!important;
    width:72px!important;
    height:72px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:22px!important;
    background:linear-gradient(135deg,#f472b6,#a855f7)!important;
    box-shadow:0 18px 40px rgba(15,23,42,.18)!important;
  }
  .hero-art .zap{
    right:22px!important;
    bottom:50px!important;
    width:78px!important;
    height:78px!important;
    border-radius:24px!important;
    background:linear-gradient(135deg,#2dd4bf,#38bdf8)!important;
    box-shadow:0 18px 42px rgba(14,165,233,.26)!important;
  }
  .hero-art .zap::after{content:"✓";font-size:35px;font-weight:950;color:#fff;}
  .hero-art .zap{font-size:0!important;}
  .hero-art .s1{left:4px!important;bottom:72px!important;color:#67e8f9!important;}
  .hero-art .s2{right:-4px!important;top:110px!important;color:#fde047!important;}
  .hero-benefits{
    grid-column:1 / -1!important;
    grid-row:6!important;
    margin-top:30px!important;
    padding:14px 18px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.10)!important;
    backdrop-filter:blur(14px)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11)!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
  }
  .hero-benefits div{
    display:grid!important;
    grid-template-columns:48px 1fr!important;
    column-gap:13px!important;
    align-items:center!important;
    min-width:0!important;
    padding:2px 4px!important;
  }
  .hero-benefits span{
    width:48px!important;
    height:48px!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.11)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }
  .hero-benefits b{font-size:15px!important;line-height:1.15!important;color:#fff!important;}
  .hero-benefits small{font-size:12px!important;color:rgba(239,246,255,.78)!important;margin-top:3px!important;}

  #productsSide[data-view="grid"] #productGrid{
    gap:18px!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card{
    padding:10px 10px 0!important;
    border-radius:24px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.98),color-mix(in srgb,var(--card) 94%,#f8fafc 6%))!important;
    box-shadow:0 18px 48px rgba(15,23,42,.075)!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card:hover{
    box-shadow:0 24px 58px rgba(15,23,42,.12)!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb{
    height:172px!important;
    border-radius:19px!important;
    background:
      radial-gradient(circle at 30% 18%,rgba(255,255,255,.20),transparent 32%),
      linear-gradient(135deg,#38bdf8 0%,#4f46e5 68%,#6d28d9 100%)!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb::after{
    content:""!important;
    position:absolute!important;
    inset:auto -18% -42% 20%!important;
    height:86%!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.10)!important;
    transform:rotate(-10deg)!important;
    pointer-events:none!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb img{
    object-fit:cover!important;
    object-position:center!important;
    transition:transform .22s ease!important;
  }
  #productsSide[data-view="grid"] #productGrid .product-card:hover>.thumb img{transform:none!important;}
  #productsSide[data-view="grid"] #productGrid .product-card:focus-within>.thumb img{transform:none!important;}
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb b{
    position:relative!important;
    z-index:1!important;
    background:transparent!important;
    font-size:16px!important;
    letter-spacing:.16em!important;
    text-shadow:0 8px 22px rgba(15,23,42,.18)!important;
  }
}

@media (min-width: 861px) and (max-width: 1180px){
  .hero-card{grid-template-columns:minmax(0,1fr) 330px!important;padding:40px 42px 26px!important;}
  .hero-copy h1{font-size:36px!important;}
  .digital-card{width:220px!important;height:190px!important;}
  .hero-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

.stock-out-chip{position:absolute!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-height:30px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:7px 10px!important;border-radius:0 0 12px 12px!important;background:rgba(15,23,42,.42)!important;color:#fff!important;font-size:11px!important;font-weight:950!important;letter-spacing:.04em!important;text-transform:uppercase!important;text-shadow:0 2px 10px rgba(0,0,0,.35)!important;box-shadow:none!important;z-index:4!important;backdrop-filter:blur(5px)!important;pointer-events:none!important;border-top:1px solid rgba(255,255,255,.18)!important;}
.stock-out-watermark{display:none!important;}
.thumb.mini .stock-out-chip{min-height:22px!important;font-size:8px!important;padding:4px 6px!important;border-radius:0 0 10px 10px!important;}
.product-card.is-out>.thumb::before,.table-product .thumb.mini:has(.stock-out-chip)::before{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(15,23,42,.02),rgba(15,23,42,.16))!important;border-radius:inherit!important;z-index:1!important;}
.product-card.is-out>.thumb img,.is-out-row .table-product .thumb.mini img{filter:grayscale(.16) saturate(.85) brightness(.88)!important;}
.product-card.is-out .product-title,.is-out-row .product-title{opacity:.92!important;}
.product-card.is-out .product-meta small{background:#fee2e2!important;color:#b91c1c!important;}
html[data-theme=dark] .product-card.is-out .product-meta small{background:rgba(127,29,29,.32)!important;color:#fca5a5!important;}
.card-bottom button[disabled],.table-add[disabled],#modalAddCart[disabled],#modalAddCart.is-out{cursor:not-allowed!important;background:#cbd5e1!important;color:#475569!important;opacity:1!important;box-shadow:none!important;}
.card-bottom button[disabled]{text-indent:0!important;font-size:10px!important;font-weight:900!important;letter-spacing:.02em!important;display:grid!important;place-items:center!important;line-height:1.05!important;padding:0 4px!important;text-align:center!important;}
html[data-theme=dark] .card-bottom button[disabled],html[data-theme=dark] .table-add[disabled],html[data-theme=dark] #modalAddCart[disabled]{background:#334155!important;color:#cbd5e1!important;border-color:rgba(148,163,184,.18)!important;}
.card-bottom button[disabled]::before{display:none!important;}
.table-stock-out{display:inline-flex!important;align-items:center!important;gap:6px!important;margin-top:8px!important;padding:5px 9px!important;border-radius:999px!important;background:#fee2e2!important;color:#b91c1c!important;font-size:11px!important;font-weight:900!important;letter-spacing:.02em!important;}
html[data-theme=dark] .table-stock-out{background:rgba(127,29,29,.32)!important;color:#fca5a5!important;}
.is-out-row{background:color-mix(in srgb,var(--card) 96%,#fef2f2 4%)!important;}
#productModal.is-out .modal-body{position:relative!important;}
#productModal.is-out .modal-badges::after{content:"Produk Habis"!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:6px 10px!important;border-radius:999px!important;background:#fee2e2!important;color:#b91c1c!important;font-size:11px!important;font-weight:900!important;letter-spacing:.02em!important;margin-left:6px!important;}
html[data-theme=dark] #productModal.is-out .modal-badges::after{background:rgba(127,29,29,.32)!important;color:#fca5a5!important;}
#productModal.is-out .modal-thumb-img{filter:grayscale(.16) saturate(.9) brightness(.9)!important;}
#productModal.is-out .modal-visual::after{content:"Produk Habis"!important;position:absolute!important;left:50%!important;right:auto!important;top:50%!important;width:74%!important;max-width:340px!important;min-width:190px!important;height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:translate(-50%,-50%) rotate(-28deg)!important;transform-origin:center!important;background:rgba(15,23,42,.68)!important;color:#fff!important;font-size:13px!important;font-weight:1000!important;letter-spacing:.15em!important;text-transform:uppercase!important;border-radius:999px!important;border-top:1px solid rgba(255,255,255,.22)!important;border-bottom:1px solid rgba(255,255,255,.22)!important;box-shadow:0 14px 34px rgba(15,23,42,.26)!important;z-index:7!important;pointer-events:none!important;white-space:nowrap!important;}
@media(max-width:640px){.stock-out-chip{left:0!important;right:0!important;bottom:0!important;width:100%!important;min-height:26px!important;font-size:10px!important;padding:6px 8px!important}.table-stock-out{font-size:10px!important;padding:4px 8px!important}}

.stock-out-chip{display:none!important;}
#productsSide[data-view="grid"] #productGrid .card-bottom button[disabled],
#productsSide[data-view="grid"] #productGrid .card-bottom button[aria-disabled="true"]{
  width:auto!important;
  min-width:104px!important;
  height:40px!important;
  flex:0 0 auto!important;
  padding:0 13px!important;
  border-radius:13px!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  text-indent:0!important;
}
#productsSide[data-view="grid"] #productGrid .card-bottom button[disabled]::before,
#productsSide[data-view="grid"] #productGrid .card-bottom button[aria-disabled="true"]::before,
#productsSide[data-view="grid"] #productGrid .card-bottom button[disabled]::after,
#productsSide[data-view="grid"] #productGrid .card-bottom button[aria-disabled="true"]::after{
  content:none!important;
  display:none!important;
}
@media(max-width:640px){
  #productsSide[data-view="grid"] #productGrid .card-bottom button[disabled],
  #productsSide[data-view="grid"] #productGrid .card-bottom button[aria-disabled="true"]{
    width:auto!important;
    min-width:88px!important;
    height:34px!important;
    flex:0 0 auto!important;
    padding:0 10px!important;
    border-radius:11px!important;
    font-size:9.5px!important;
  }
}

#productsSide[data-view="grid"] #productGrid .product-card>.thumb .grid-stock-out-chip{
  position:absolute!important;
  right:9px!important;
  top:9px!important;
  z-index:5!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:6px 9px!important;
  border-radius:999px!important;
  background:rgba(15,23,42,.34)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.34)!important;
  backdrop-filter:blur(8px)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.16)!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  pointer-events:none!important;
}
#productsSide[data-view="grid"] #productGrid .product-card.is-out .product-meta small{
  background:#fff1f2!important;
  color:#e11d48!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card.is-out .product-meta small{
  background:rgba(244,63,94,.14)!important;
  color:#fda4af!important;
}
@media(max-width:640px){
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb .grid-stock-out-chip{
    right:6px!important;
    top:6px!important;
    padding:4px 7px!important;
    font-size:8.5px!important;
  }
}

#productsSide[data-view="grid"] #productGrid .product-card>.thumb{
  position:relative!important;
}
#productsSide[data-view="grid"] #productGrid .product-card>.thumb .grid-stock-out-chip,
.product-card.is-out>.thumb .grid-stock-out-chip{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  left:auto!important;
  bottom:auto!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  transform:none!important;
  z-index:30!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:rgba(15,23,42,.38)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.36)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.18)!important;
  font-size:10px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  text-align:center!important;
  pointer-events:none!important;
}
#productsSide[data-view="grid"] #productGrid .product-card>.thumb::after{
  z-index:1!important;
}
@media(max-width:640px){
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb .grid-stock-out-chip,
  .product-card.is-out>.thumb .grid-stock-out-chip{
    top:6px!important;
    right:6px!important;
    padding:4px 7px!important;
    font-size:8.5px!important;
  }
}

#productsSide[data-view="grid"] #productGrid .product-card>.thumb .grid-stock-out-chip,
.product-card.is-out>.thumb .grid-stock-out-chip{
  top:8px!important;
  right:8px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.46))!important;
  color:#92400e!important;
  border:1px solid rgba(251,191,36,.34)!important;
  box-shadow:0 8px 22px rgba(146,64,14,.10), inset 0 1px 0 rgba(255,255,255,.62)!important;
  backdrop-filter:blur(12px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.25)!important;
  font-size:9.5px!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  text-shadow:none!important;
  pointer-events:none!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card>.thumb .grid-stock-out-chip,
html[data-theme=dark] .product-card.is-out>.thumb .grid-stock-out-chip{
  background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(15,23,42,.42))!important;
  color:#fde68a!important;
  border-color:rgba(251,191,36,.30)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10)!important;
}
@media(max-width:640px){
  #productsSide[data-view="grid"] #productGrid .product-card>.thumb .grid-stock-out-chip,
  .product-card.is-out>.thumb .grid-stock-out-chip{
    top:6px!important;
    right:6px!important;
    padding:4.5px 7px!important;
    font-size:8px!important;
  }
}

.flash-sale-strip{
  margin:18px 0 22px!important;
  padding:14px!important;
  border:1px solid rgba(249,115,22,.28)!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(255,247,237,.92),rgba(255,255,255,.86) 52%,rgba(236,254,255,.82))!important;
  box-shadow:0 18px 44px rgba(249,115,22,.11)!important;
  position:relative!important;
  overflow:hidden!important;
}

.flash-sale-strip.hidden{display:none!important}
.flash-strip-head{position:relative!important;z-index:1!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:14px!important;margin-bottom:12px!important;padding:0 2px!important}
.flash-strip-head b{display:flex!important;align-items:center!important;gap:8px!important;color:#ea580c!important;font-size:16px!important;letter-spacing:.2px!important}
.flash-strip-head small{display:block!important;color:var(--muted)!important;font-size:12px!important;margin-top:3px!important;line-height:1.45!important}
.flash-see-all{color:#ea580c!important;text-decoration:none!important;font-weight:900!important;font-size:12px!important;white-space:nowrap!important}
.flash-sale-list{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.flash-sale-card{display:grid!important;grid-template-columns:176px minmax(0,1fr) 150px!important;gap:14px!important;align-items:center!important;min-width:0!important;padding:12px!important;border:1px solid rgba(249,115,22,.28)!important;border-radius:18px!important;background:rgba(255,255,255,.72)!important;box-shadow:0 12px 32px rgba(15,23,42,.07)!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important}
.flash-sale-card:hover{transform:translateY(-2px)!important;border-color:rgba(249,115,22,.48)!important;box-shadow:0 18px 42px rgba(249,115,22,.14)!important}
.flash-sale-card.hidden{display:none!important}
.flash-thumb{height:112px!important;border-radius:15px!important;overflow:hidden!important;background:linear-gradient(135deg,#22d3ee,#4f46e5)!important;display:grid!important;place-items:center!important;position:relative!important}
.flash-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.flash-thumb b{font-size:22px!important;letter-spacing:4px!important;color:#fff!important;text-shadow:0 8px 24px rgba(15,23,42,.24)!important}
.flash-info{min-width:0!important;display:grid!important;gap:8px!important}
.flash-badges{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;flex-wrap:wrap!important}
.flash-badges span,.flash-badges em{height:24px!important;border-radius:999px!important;padding:0 9px!important;display:inline-flex!important;align-items:center!important;font-style:normal!important;font-weight:900!important;font-size:10px!important;letter-spacing:.4px!important;text-transform:uppercase!important}
.flash-badges span{background:linear-gradient(135deg,#f97316,#ef4444)!important;color:#fff!important;box-shadow:0 8px 18px rgba(239,68,68,.22)!important}
.flash-badges em{background:#fff1f2!important;color:#e11d48!important;border:1px solid #fecdd3!important}
.flash-title{border:0!important;background:transparent!important;color:var(--text)!important;text-align:left!important;padding:0!important;font-weight:900!important;font-size:15px!important;line-height:1.25!important;cursor:pointer!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.flash-title:hover{color:#ea580c!important}
.flash-countdown{display:flex!important;align-items:center!important;gap:8px!important;margin-top:1px!important;min-width:0!important}
.flash-countdown small{color:var(--muted)!important;font-size:11px!important;font-weight:800!important;white-space:nowrap!important}
.flash-countdown b{font-variant-numeric:tabular-nums!important;letter-spacing:.8px!important;background:rgba(15,23,42,.92)!important;color:#fff!important;border-radius:10px!important;padding:7px 10px!important;font-size:13px!important;line-height:1!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;white-space:nowrap!important}
.flash-action{display:grid!important;gap:4px!important;justify-items:end!important;align-content:center!important;min-width:0!important}
.flash-action strong{font-size:18px!important;line-height:1.1!important;color:#ea580c!important;font-weight:1000!important;white-space:nowrap!important}
.flash-action del{color:var(--muted)!important;font-size:12px!important;white-space:nowrap!important}
.flash-action button{margin-top:8px!important;height:38px!important;border-radius:12px!important;padding:0 12px!important;border:1px solid rgba(249,115,22,.44)!important;background:linear-gradient(135deg,#fff7ed,#ffedd5)!important;color:#c2410c!important;font-weight:900!important;font-size:12px!important;box-shadow:0 10px 22px rgba(249,115,22,.16)!important;cursor:pointer!important;white-space:nowrap!important}
.flash-action button:hover{background:linear-gradient(135deg,#fed7aa,#fdba74)!important;color:#7c2d12!important}
.flash-action button:disabled{cursor:not-allowed!important;opacity:.62!important;filter:grayscale(.18)!important}
.flash-sale-card.is-expired{opacity:.72!important;filter:saturate(.7)!important}
.flash-sale-card.is-expired .flash-action button{pointer-events:none!important;opacity:.55!important}

html[data-theme=dark] .flash-sale-strip{
  background:linear-gradient(135deg,rgba(124,45,18,.24),rgba(15,23,42,.72) 45%,rgba(8,47,73,.36))!important;
  border-color:rgba(251,146,60,.32)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.26),0 0 44px rgba(249,115,22,.06)!important;
}
html[data-theme=dark] .flash-sale-strip:before{background:rgba(249,115,22,.16)!important}
html[data-theme=dark] .flash-strip-head b,html[data-theme=dark] .flash-see-all{color:#fb923c!important}
html[data-theme=dark] .flash-sale-card{background:rgba(15,23,42,.58)!important;border-color:rgba(251,146,60,.25)!important;box-shadow:0 16px 34px rgba(0,0,0,.18)!important}
html[data-theme=dark] .flash-sale-card:hover{border-color:rgba(251,146,60,.5)!important;box-shadow:0 20px 44px rgba(0,0,0,.28),0 0 32px rgba(249,115,22,.08)!important}
html[data-theme=dark] .flash-badges em{background:rgba(127,29,29,.38)!important;color:#fecdd3!important;border-color:rgba(251,113,133,.28)!important}
html[data-theme=dark] .flash-title:hover{color:#fdba74!important}
html[data-theme=dark] .flash-countdown b{background:rgba(2,6,23,.82)!important;color:#fed7aa!important;border:1px solid rgba(251,146,60,.14)!important}
html[data-theme=dark] .flash-action strong{color:#fb923c!important}
html[data-theme=dark] .flash-action button{background:rgba(249,115,22,.12)!important;border-color:rgba(251,146,60,.36)!important;color:#fed7aa!important;box-shadow:0 12px 26px rgba(249,115,22,.08)!important}
html[data-theme=dark] .flash-action button:hover{background:rgba(249,115,22,.22)!important;color:#fff7ed!important}

@media(max-width:1180px){
  .flash-sale-list{grid-template-columns:1fr!important}
  .flash-sale-card{grid-template-columns:180px minmax(0,1fr) 150px!important}
}
@media(max-width:760px){
  .flash-sale-strip{margin:14px 0 18px!important;padding:12px!important;border-radius:20px!important}
  .flash-strip-head{align-items:flex-start!important;gap:8px!important}
  .flash-strip-head b{font-size:15px!important}
  .flash-strip-head small{font-size:11px!important;max-width:245px!important}
  .flash-see-all{display:none!important}
  .flash-sale-list{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;padding-bottom:4px!important;margin:0 -2px!important;gap:10px!important;-webkit-overflow-scrolling:touch!important}
  .flash-sale-list::-webkit-scrollbar{height:0!important}
  .flash-sale-card{scroll-snap-align:start!important;flex:0 0 min(88vw,360px)!important;display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;grid-template-areas:"thumb info" "action action"!important;gap:10px!important;padding:10px!important;border-radius:17px!important}
  .flash-thumb{grid-area:thumb!important;height:96px!important;border-radius:14px!important}
  .flash-thumb b{font-size:16px!important;letter-spacing:2px!important}
  .flash-info{grid-area:info!important;gap:6px!important;align-content:start!important}
  .flash-title{font-size:14px!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  .flash-badges span,.flash-badges em{height:21px!important;font-size:9px!important;padding:0 7px!important}
  .flash-countdown{display:grid!important;grid-template-columns:1fr!important;gap:4px!important}
  .flash-countdown b{width:max-content!important;font-size:12px!important;padding:6px 8px!important}
  .flash-action{grid-area:action!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;justify-items:stretch!important;border-top:1px solid var(--line)!important;padding-top:9px!important;margin-top:0!important}
  .flash-action strong{font-size:16px!important}
  .flash-action del{font-size:11px!important}
  .flash-action button{height:36px!important;margin-top:0!important;padding:0 11px!important;font-size:11px!important;max-width:145px!important;overflow:hidden!important;text-overflow:ellipsis!important}
}
@media(max-width:390px){
  .flash-sale-card{flex-basis:calc(100vw - 38px)!important;grid-template-columns:86px minmax(0,1fr)!important}
  .flash-thumb{height:88px!important}
  .flash-action{gap:8px!important}
  .flash-action button{max-width:128px!important;padding:0 9px!important}
}

.product-card>.thumb,
.table-product .thumb.mini,
.flash-thumb,
.sale-item .sale-thumb,
.cart-thumb-img,
.modal-visual{
  position:relative!important;
  overflow:hidden!important;
}
.product-card>.thumb img,
.product-card>.thumb .ds-product-thumb-img,
.table-product .thumb.mini img,
.table-product .thumb.mini .ds-product-thumb-img,
.flash-thumb img,
.flash-thumb .ds-product-thumb-img,
.sale-item .sale-thumb img,
.cart-thumb-img img,
.modal-thumb-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  min-width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  margin:0!important;
}
.product-card>.thumb b,
.table-product .thumb.mini b{
  position:relative!important;
  z-index:1!important;
}
.product-card>.thumb em,
.table-product .thumb.mini em,
.grid-stock-out-chip,
.stock-out-chip{
  z-index:3!important;
}

#productsSide[data-view="grid"] #productGrid .product-card,
.znl-product-card{
  will-change:transform,box-shadow,border-color!important;
}
#productsSide[data-view="grid"] #productGrid .product-card:hover,
#productsSide[data-view="grid"] #productGrid .product-card:focus-within,
.znl-product-card:hover,
.znl-product-card:focus-within{
  border-color:rgba(14,165,233,.55)!important;
  box-shadow:0 20px 46px rgba(14,165,233,.16),0 0 0 1px rgba(45,212,191,.24)!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card:hover,
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card:focus-within,
html[data-theme=dark] .znl-product-card:hover,
html[data-theme=dark] .znl-product-card:focus-within{
  border-color:rgba(103,232,249,.68)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.36),0 0 0 1px rgba(103,232,249,.36),0 0 30px rgba(20,184,166,.18)!important;
}
#productsSide[data-view="list"] .product-table tbody tr,
.products-side.is-list-view .product-table tbody tr{
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
#productsSide[data-view="list"] .product-table tbody tr:hover,
.products-side.is-list-view .product-table tbody tr:hover{
  border-color:rgba(14,165,233,.42)!important;
  box-shadow:0 12px 30px rgba(14,165,233,.12),0 0 0 1px rgba(45,212,191,.18)!important;
}
html[data-theme=dark] #productsSide[data-view="list"] .product-table tbody tr:hover,
html[data-theme=dark] .products-side.is-list-view .product-table tbody tr:hover{
  border-color:rgba(103,232,249,.56)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 0 1px rgba(103,232,249,.24),0 0 24px rgba(20,184,166,.13)!important;
}

#productsSide[data-view="grid"] #productGrid .product-card:hover,
#productsSide[data-view="grid"] #productGrid .product-card:focus-within,
.znl-product-card:hover,
.znl-product-card:focus-within{
  border-color:rgba(168,85,247,.62)!important;
  box-shadow:0 20px 46px rgba(168,85,247,.16),0 0 0 1px rgba(192,132,252,.28),0 0 28px rgba(168,85,247,.13)!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card:hover,
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card:focus-within,
html[data-theme=dark] .znl-product-card:hover,
html[data-theme=dark] .znl-product-card:focus-within{
  border-color:rgba(196,181,253,.74)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.34),0 0 0 1px rgba(196,181,253,.38),0 0 34px rgba(168,85,247,.26)!important;
}
#productsSide[data-view="list"] .product-table tbody tr:hover,
.products-side.is-list-view .product-table tbody tr:hover{
  border-color:rgba(168,85,247,.52)!important;
  box-shadow:0 12px 30px rgba(168,85,247,.13),0 0 0 1px rgba(192,132,252,.20)!important;
}
html[data-theme=dark] #productsSide[data-view="list"] .product-table tbody tr:hover,
html[data-theme=dark] .products-side.is-list-view .product-table tbody tr:hover{
  border-color:rgba(196,181,253,.64)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 0 1px rgba(196,181,253,.28),0 0 26px rgba(168,85,247,.20)!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .card-bottom button:not(:disabled):hover,
html[data-theme=dark] .znl-card-bottom button:not(:disabled):hover,
html[data-theme=dark] .card-bottom button:not(:disabled):hover,
html[data-theme=dark] .table-add:not(:disabled):hover{
  color:#fff!important;
  background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#0891b2 100%)!important;
  border-color:rgba(196,181,253,.58)!important;
  box-shadow:0 14px 30px rgba(124,58,237,.24),0 0 0 1px rgba(196,181,253,.22),0 0 24px rgba(168,85,247,.18)!important;
  transform:translateY(-2px)!important;
  filter:none!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .card-bottom button:not(:disabled):hover::before,
html[data-theme=dark] .znl-card-bottom button:not(:disabled):hover::before,
html[data-theme=dark] .card-bottom button:not(:disabled):hover::before{
  opacity:1!important;
}

#productsSide[data-view="grid"] #productGrid .product-card:hover,
#productsSide[data-view="grid"] #productGrid .product-card:focus-within,
.znl-product-card:hover,
.znl-product-card:focus-within{
  border-color:color-mix(in srgb,var(--line) 86%,transparent)!important;
  box-shadow:0 20px 42px rgba(15,23,42,.11)!important;
}
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card:hover,
html[data-theme=dark] #productsSide[data-view="grid"] #productGrid .product-card:focus-within,
html[data-theme=dark] .znl-product-card:hover,
html[data-theme=dark] .znl-product-card:focus-within{
  border-color:rgba(148,163,184,.15)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.34)!important;
}
#productsSide[data-view="list"] .product-table tbody tr:hover,
#productsSide[data-view="list"] .product-table tbody tr:focus-within,
.products-side.is-list-view .product-table tbody tr:hover,
.products-side.is-list-view .product-table tbody tr:focus-within{
  border-color:var(--line)!important;
  box-shadow:none!important;
}
html[data-theme=dark] #productsSide[data-view="list"] .product-table tbody tr:hover,
html[data-theme=dark] #productsSide[data-view="list"] .product-table tbody tr:focus-within,
html[data-theme=dark] .products-side.is-list-view .product-table tbody tr:hover,
html[data-theme=dark] .products-side.is-list-view .product-table tbody tr:focus-within{
  border-color:rgba(148,163,184,.15)!important;
  box-shadow:none!important;
}

#productModal.is-out .modal-badges::after{
  content:none!important;
  display:none!important;
}
#productModal .modal-visual > b{
  display:none!important;
}
#productModal.is-out .modal-visual::after{
  content:"Produk Habis"!important;
  position:absolute!important;
  left:-22px!important;
  right:auto!important;
  top:24px!important;
  bottom:auto!important;
  width:220px!important;
  min-width:0!important;
  max-width:calc(100% - 84px)!important;
  height:40px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:rotate(-12deg)!important;
  transform-origin:center center!important;
  border-radius:999px!important;
  background:rgba(15,23,42,.72)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 12px 26px rgba(15,23,42,.24)!important;
  font-size:12px!important;
  font-weight:1000!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  z-index:7!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}
@media(max-width:640px){
  #productModal.is-out .modal-visual::after{
    left:-18px!important;
    top:20px!important;
    width:180px!important;
    max-width:calc(100% - 66px)!important;
    height:34px!important;
    padding:0 12px!important;
    font-size:10px!important;
    letter-spacing:.1em!important;
    transform:rotate(-12deg)!important;
  }
}

#productsSide[data-view="grid"] #productGrid .product-card>.thumb img,
#productsSide[data-view="grid"] #productGrid .product-card>.thumb .ds-product-thumb-img,
#productsSide[data-view="grid"] #productGrid .znl-product-card>.znl-card-thumb img,
#productsSide[data-view="grid"] #productGrid .znl-product-card>.znl-card-thumb .ds-product-thumb-img,
#productsSide[data-view="grid"] #productGrid .product-card>.thumb.znl-card-thumb img,
#productsSide[data-view="grid"] #productGrid .product-card>.thumb.znl-card-thumb .ds-product-thumb-img{
  transform:none!important;
  scale:1!important;
  transition:none!important;
}
#productsSide[data-view="grid"] #productGrid .product-card:hover>.thumb img,
#productsSide[data-view="grid"] #productGrid .product-card:hover>.thumb .ds-product-thumb-img,
#productsSide[data-view="grid"] #productGrid .product-card:focus-within>.thumb img,
#productsSide[data-view="grid"] #productGrid .product-card:focus-within>.thumb .ds-product-thumb-img,
#productsSide[data-view="grid"] #productGrid .znl-product-card:hover>.znl-card-thumb img,
#productsSide[data-view="grid"] #productGrid .znl-product-card:hover>.znl-card-thumb .ds-product-thumb-img,
#productsSide[data-view="grid"] #productGrid .znl-product-card:focus-within>.znl-card-thumb img,
#productsSide[data-view="grid"] #productGrid .znl-product-card:focus-within>.znl-card-thumb .ds-product-thumb-img{
  transform:none!important;
  scale:1!important;
}

#productsSide[data-view="grid"] #productGrid .product-card,
#productsSide[data-view="grid"] #productGrid .znl-product-card{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
#productsSide[data-view="grid"] #productGrid .product-card:hover,
#productsSide[data-view="grid"] #productGrid .product-card:focus-within,
#productsSide[data-view="grid"] #productGrid .znl-product-card:hover,
#productsSide[data-view="grid"] #productGrid .znl-product-card:focus-within{
  transform:translateY(-3px)!important;
  border-color:rgba(99,102,241,.32)!important;
  box-shadow:0 18px 40px rgba(15,23,42,.10),0 0 0 1px rgba(99,102,241,.10),0 0 24px rgba(99,102,241,.16)!important;
}
html[data-theme="dark"] #productsSide[data-view="grid"] #productGrid .product-card:hover,
html[data-theme="dark"] #productsSide[data-view="grid"] #productGrid .product-card:focus-within,
html[data-theme="dark"] #productsSide[data-view="grid"] #productGrid .znl-product-card:hover,
html[data-theme="dark"] #productsSide[data-view="grid"] #productGrid .znl-product-card:focus-within{
  transform:translateY(-3px)!important;
  border-color:rgba(45,212,191,.34)!important;
  box-shadow:0 20px 44px rgba(0,0,0,.34),0 0 0 1px rgba(45,212,191,.12),0 0 28px rgba(34,211,238,.18)!important;
}

.products-side[data-view="list"] .table-product,
.products-side.is-list-view .table-product{
  display:grid!important;
  grid-template-columns:118px minmax(0,1fr)!important;
  gap:16px!important;
  align-items:center!important;
}
.products-side[data-view="list"] .table-product .thumb.mini,
.products-side.is-list-view .table-product .thumb.mini{
  width:118px!important;
  height:90px!important;
  flex:0 0 118px!important;
  border-radius:16px!important;
  overflow:hidden!important;
}
.products-side[data-view="list"] .table-product .thumb.mini img,
.products-side.is-list-view .table-product .thumb.mini img,
.products-side[data-view="list"] .table-product .thumb.mini .ds-product-thumb-img,
.products-side.is-list-view .table-product .thumb.mini .ds-product-thumb-img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}
@media(max-width:760px){
  .products-side[data-view="list"] .table-product,
  .products-side.is-list-view .table-product{
    grid-template-columns:96px minmax(0,1fr)!important;
    gap:13px!important;
  }
  .products-side[data-view="list"] .table-product .thumb.mini,
  .products-side.is-list-view .table-product .thumb.mini{
    width:96px!important;
    height:80px!important;
    flex-basis:96px!important;
  }
}