*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button{border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.header{
  height:100px;
  display:grid;
  grid-template-columns:70px 1fr 70px;
  align-items:center;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.97);
}
.plus{font-size:34px;font-weight:200;line-height:1;text-align:left;padding:0}
.nav{display:flex;align-items:center;justify-content:center;gap:34px}
.nav-item{
  font-size:14px;
  font-weight:400;
  letter-spacing:.01em;
  color:#cfcfcf;
  transition:color .15s;
}
.nav-item.active,.nav-item:hover{color:#111}
.bag{width:30px;height:34px;justify-self:end;position:relative}
.bag-shape{
  position:absolute;left:5px;top:10px;width:19px;height:17px;
  border:2px solid #111;border-radius:1px;
}
.bag-shape:before{
  content:"";position:absolute;left:4px;top:-9px;width:8px;height:8px;
  border:2px solid #111;border-bottom:0;border-radius:7px 7px 0 0;
}
.count{position:absolute;right:0;top:0;font-size:8px}
.collection{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  width:100%;
}
.product{
  min-width:0;
  padding:12px 22px 30px;
  text-align:center;
}
.photo{
  width:100%;
  height:190px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .35s ease;
}
.product:hover img{transform:scale(1.045)}
.name{
  margin-top:18px;
  font-size:15px;
  font-weight:400;
  letter-spacing:.01em;
}
.meta{
  margin-top:9px;
  font-size:11px;
  color:#8d8d8d;
  letter-spacing:.03em;
}
.price{
  margin-top:8px;
  font-size:11px;
  color:#777;
}
.add{
  margin-top:10px;
  font-size:9px;
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:0;
}
.product:hover .add{opacity:1}

.mobile-nav{display:none}

.drawer{
  position:fixed;right:0;top:0;height:100vh;width:min(420px,100%);
  background:#fff;z-index:50;transform:translateX(100%);transition:.3s ease;
  display:flex;flex-direction:column;border-left:1px solid #eee;
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  height:76px;padding:0 25px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid #eee;
  font-size:11px;letter-spacing:.12em;
}
.drawer-head button{font-size:28px;font-weight:200}
.drawer-body{padding:18px 25px;overflow:auto;flex:1}
.empty{color:#999;font-size:12px}
.row{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #eee}
.row-img{height:70px;background:#f7f7f7}
.row-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.row-name{font-size:11px}.row-price{font-size:10px;color:#888;margin-top:5px}
.remove{font-size:9px;text-decoration:underline}
.drawer-foot{padding:20px 25px;border-top:1px solid #eee}
.total{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;margin-bottom:18px}
.checkout{width:100%;background:#111;color:#fff;padding:17px 16px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em}
.shade{display:none;position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:40}
.shade.open{display:block}

@media(max-width:700px){
  .header{
    height:100px;
    padding:0 20px;
    grid-template-columns:44px 1fr 44px;
  }
  .plus{font-size:34px}
  .nav{gap:18px;flex-wrap:wrap;max-width:360px;justify-content:center;line-height:1}
  .nav-item{font-size:14px}
  .bag{justify-self:end}
  .collection{grid-template-columns:repeat(3,1fr)}
  .product{padding:8px 10px 27px}
  .photo{height:170px}
  .name{font-size:14px;margin-top:13px}
  .meta{font-size:10px;margin-top:7px}
  .price,.add{display:none}
}
@media(max-width:470px){
  .header{height:245px;position:relative;align-items:start;padding-top:22px}
  .plus{padding-top:0}
  .bag{margin-top:0}
  .nav{
    align-self:start;
    padding-top:34px;
    gap:22px 27px;
    max-width:280px;
  }
  .nav-item{font-size:14px}
  .collection{grid-template-columns:repeat(3,1fr)}
  .photo{height:145px}
  .product{padding:5px 7px 25px}
  .name{font-size:13px;margin-top:11px}
  .meta{font-size:9px;margin-top:7px}
}