
/* V422 — premium product card refine */
body #grid{
  gap:14px 10px!important;
}
body #grid>.card{
  border-radius:22px!important;
  border:1px solid rgba(13,16,20,.065)!important;
  box-shadow:0 10px 24px rgba(13,16,20,.055),0 2px 6px rgba(13,16,20,.03)!important;
}
body #grid>.card:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 14px 28px rgba(13,16,20,.07),0 3px 8px rgba(13,16,20,.035)!important;
}
body #grid .card-visual{
  aspect-ratio:1/0.93!important;
  margin:8px 8px 0!important;
  border-radius:18px 18px 12px 12px!important;
  background:
    radial-gradient(circle at 50% 12%,#ffffff 0,#ffffff 18%,rgba(255,255,255,.65) 40%,transparent 63%),
    linear-gradient(180deg,#fcfcfc 0,#f8f8f7 70%,#eeeeec 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -8px 14px rgba(8,10,9,.025)!important;
}
body #grid .card-visual:after{
  left:14px!important;
  right:14px!important;
  bottom:10px!important;
  height:8px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(185,188,192,.18),rgba(130,135,141,.52),rgba(185,188,192,.18))!important;
  box-shadow:none!important;
}
body #grid .card-visual img{
  padding:10px 10px 18px!important;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.08))!important;
}
body #grid .card-body,
body #grid .nnb-skeleton-card .card-body{
  min-height:96px!important;
  padding:10px 11px 11px!important;
}
body #grid .card-topline{
  min-height:18px!important;
  margin-bottom:6px!important;
}
body #grid .cat{
  color:#8b9198!important;
  font-size:7.2px!important;
  letter-spacing:.24em!important;
}
body #grid .card-weight{
  min-height:20px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:#f6f7f8!important;
  color:#5d6570!important;
  box-shadow:inset 0 0 0 1px rgba(15,19,23,.08)!important;
  font-size:7.2px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}
body #grid .name{
  min-height:30px!important;
  max-height:30px!important;
  font-size:14px!important;
  line-height:1.02!important;
  letter-spacing:-.05em!important;
}
body #grid .card-foot{
  min-height:24px!important;
  padding-top:7px!important;
  border-top:1px solid rgba(15,19,23,.06)!important;
}
body #grid .card-brand{
  color:#9098a1!important;
  font-size:7.2px!important;
  letter-spacing:.24em!important;
}
body #grid .card-open-label{
  display:none!important;
}
body #grid .card-arrow{
  width:26px!important;
  height:26px!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#11151a!important;
  box-shadow:inset 0 0 0 1px rgba(17,21,26,.14)!important;
  font-size:12px!important;
}

@media(max-width:720px){
  body #grid{
    gap:13px 8px!important;
  }
  body #grid>.card{
    border-radius:20px!important;
  }
  body #grid .card-visual{
    aspect-ratio:1/0.90!important;
    margin:7px 7px 0!important;
    border-radius:17px 17px 11px 11px!important;
  }
  body #grid .card-visual img{
    padding:8px 8px 16px!important;
  }
  body #grid .card-body,
  body #grid .nnb-skeleton-card .card-body{
    min-height:90px!important;
    padding:9px 10px 10px!important;
  }
  body #grid .card-topline{
    margin-bottom:5px!important;
  }
  body #grid .cat{
    font-size:6.8px!important;
    letter-spacing:.23em!important;
  }
  body #grid .card-weight{
    min-height:19px!important;
    padding:0 8px!important;
    font-size:7px!important;
  }
  body #grid .name{
    min-height:28px!important;
    max-height:28px!important;
    font-size:12.8px!important;
  }
  body #grid .card-foot{
    min-height:22px!important;
    padding-top:6px!important;
  }
  body #grid .card-brand{
    font-size:6.9px!important;
  }
  body #grid .card-arrow{
    width:24px!important;
    height:24px!important;
    font-size:11px!important;
  }
}
