:root{
  --black:#050505;
  --yellow:#F5D90A;
  --muted:#71717a;
}
html{scroll-behavior:smooth}
body{font-family:Montserrat,Arial,sans-serif}
.font-display{font-family:Anton,Impact,"Arial Black",sans-serif}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none}
.product-img{aspect-ratio:4/5}
.product-card:hover .product-img img{transform:scale(1.045)}
.cut-shadow{box-shadow:0 20px 60px rgba(0,0,0,.14)}
.grain{
  background-image:
    radial-gradient(circle at 20% 20%,rgba(245,217,10,.09) 0 1px,transparent 1px),
    radial-gradient(circle at 80% 50%,rgba(255,255,255,.06) 0 1px,transparent 1px);
  background-size:22px 22px,18px 18px
}
.line-clamp-2{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
}
.product-gallery-thumb.active{outline:3px solid var(--yellow);outline-offset:2px}
input[type=radio].variant-radio{display:none}
input[type=radio].variant-radio + label{
  border:1px solid #d4d4d8;padding:.65rem .8rem;font-size:.7rem;font-weight:800;
  text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center
}
input[type=radio].variant-radio:checked + label{background:#000;color:#fff;border-color:#000}
.toast{animation:toastIn .25s ease}
@keyframes toastIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.hero-angle{clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}